Question

我有一个表格，可以收集用户的位置信息。我正在使用Google置贴api来自动填充位置信息。它很棒。所有的东西都填写得很好但是有一些地方（例如我的工作场所是建筑物），谷歌不会为它返回邮政编码。

我在Google地址自动填充中关注了此example。它也不会返回我的工作场所的邮政编码。所以我不能完全确定我做错了什么。

以下是我的代码：

HTML

    <div id="location-autocomplete" style="display: none;">
        <div class="half-formfield">
            @Html.LabelFor(x => x.Address)
            @Html.TextBoxFor(x => x.Address, new { @class = "two-third-field", id = "street_number", required = "required" })
        </div>
        <div>
            @Html.LabelFor(x => x.UnitNumber, new { value = "Unit Number" })
            @Html.TextBoxFor(x => x.UnitNumber, new { @class = "one-third-field" })
        </div>
        <div class="half-formfield">
            @Html.LabelFor(x => x.City)
            @Html.TextBoxFor(x => x.City, new { @class = "half-field", required = "required", id = "locality" })
        </div>
        <div>
            @Html.LabelFor(x => x.ProvinceOrState)
            @Html.TextBoxFor(x => x.ProvinceOrState, new { @class = "half-field", required = "required", id = "administrative_area_level_1" })
        </div>
        <div class="half-formfield">
            @Html.LabelFor(x => x.ZipOrPostalCode)
            @Html.TextBoxFor(x => x.ZipOrPostalCode, new { @class = "half-field", required = "required", id = "postal_code" })
        </div>
        <div>
            @Html.LabelFor(x => x.Country)
            @Html.TextBoxFor(x => x.Country, new { @class = "half-field", required = "required", id = "country" })
        </div>
        <input type="button" value="Clear Address" onclick="clearAddress()" id="clear-btn" class="service-form-btn"/>

JS

var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function initialize() {
    // Create the autocomplete object, restricting the search
    // to geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
        { types: ['geocode'] });
    // When the user selects an address from the dropdown,
    // populate the address fields in the form.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
        showAddressComponent();
        setTimeout(hideAddressSearch, 800);
    });

}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        if (component != "route") {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }
    }
    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            console.log(val);
            if (addressType != "route") document.getElementById(addressType).value = val;
            else if (addressType == "route") document.getElementById("street_number").value = document.getElementById("street_number").value + " " + val;
        }
    }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(
                position.coords.latitude, position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
                geolocation));
        });
    }
}

截图

enter image description here

我想知道这是一个错误还是谷歌不知道建筑物的邮政编码。在这种情况下，是否有任何解决方法？

提前致谢。

Answer 1

这个地址有一个邮政编码，但只有一部分（我猜它叫做FSA代码）。

该函数无法识别此部分，因为对于此地址，返回的types-array为：

 ["postal_code_prefix", "postal_code"]

...但该函数仅检查types-array的第一项。

可能的解决方法：

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressTypes = place.address_components[i].types,addressType,val;
    for(var j=0;j<addressTypes.length;++j){

      addressType=addressTypes[j];

      if (componentForm[addressType]) {
        val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
        break;
      }
    }

  }
}

Answer 2

希望这能探索更多的想法。

  function initDefaultAutoCompleteFunction() {

        var objAddress = document.getElementsByClassName('autocomplete-address');
        $(objAddress).each(function (index, address) {
            if (typeof (address) != 'undefined' && address != null) {
    
                let options = {
                    types: ['address'],
                    Fields: ['address_component', 'formatted_address'],
                    componentRestrictions: { country: ['us', 'ca'] }
                };
    
                let autocomplete = new google.maps.places.Autocomplete(address, options);
                autocomplete.addListener('place_changed', function () {
                    debugger;
                    let place = autocomplete.getPlace();
                    if (place) {
                        let zipOrPostalCode = null; // or set empty etc.                    
                        $.each(place.address_components, function (index, value) {
                            let addressType = value.types[0];
    
                            if (addressType == 'street_number') {
                                // value.short_name; //this is your street number
    
                            }
    
                            if (addressType == 'route') {
                                // value.short_name; //this is your route                         
    
                            }
    
                            if (addressType == 'postal_code' || addressType == "postal_code_prefix") {
                                // value.short_name; //this is your postal_code    
                            }
                        });
                    }
                });
            }
        });
    }

Answer 3

var location = place.geometry.location;
var lat = location.lat();
var lng = location.lng();


var latlng = {lat: lat, lng: lng};
            geocoder.geocode({'location': latlng}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                            if (results[0]) {

                            for (var i = 0; i < results[0].address_components.length; i++) {
                                var types = results[0].address_components[i].types;

                                for (var typeIdx = 0; typeIdx < types.length; typeIdx++) {
                                    if (types[typeIdx] == 'postal_code') {
                                        //console.log(results[0].address_components[i].long_name);

                                        var pincode = results[0].address_components[i].short_name;
                                        alert('pin'+pincode);

                                    }
                                }
                            }   

                            $('#pac-input2').val(results[0].formatted_address);
                            infowindow.setContent(results[0].formatted_address);
                            //infowindow.open(map, marker);
                            }
                        }

            });

谷歌将api没有返回某些地方的邮政编码

3 个答案: