1

我需要检查给定的地址是否已满。I'm using Google Maps API v3 autocomplete in one of my fields and when address is selected, three other fields are populated. 字段:城市、街道名称、房屋。

当我选择完整地址时,一切正常。但是,例如,如果我没有输入门牌号,我会得到错误的结果。城市变成教区,街道变成城市,房子变成街道。

问题是:如何检查给定地址是否已满,或者如何通过不是 [0]、[1] 等,而是 ['city']、['street'] 等选择所需的地址组件?

代码:

<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(55.169438, 23.881275),
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        var input = document.getElementById('searchMap');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                $("#CityName").attr("readonly", false);
                $("#StreetName").attr("readonly", false);
                $("#House").attr("readonly", false);
                $("#ExternalId").attr("readonly", false);
                return;
            }
            $("#CityName").attr("readonly", true);
            $("#StreetName").attr("readonly", true);
            $("#House").attr("readonly", true);
            $("#ExternalId").attr("readonly", true);

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            var image = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            };
            marker.setIcon(image);
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
                $('#House').val(place.address_components[0] && place.address_components[0].short_name || '');
                $('#StreetName').val(place.address_components[1] && place.address_components[1].short_name || '');
                $('#CityName').val(place.address_components[2] && place.address_components[2].short_name || '');
                $('#ExternalId').val(place.id);
            }
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
4

0 回答 0