谷歌地点 API 未能返回某些地点的邮政编码

Question

我有一个表单，将从用户那里收集位置信息。我正在使用Google地点API自动填充位置信息。它非常有效。一切都填得很好，但是有些地方（例如我的工作地点）Google没有返回邮政编码。

我按照Google地址自动填充的示例进行操作。它在我的工作地点也无法返回邮政编码。所以我不确定我做错了什么。

以下是我的代码：

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));
        });
    }
}

截图

我想知道这是一个bug还是谷歌不知道该建筑物的邮政编码。如果是这种情况，有没有简单的方法来解决这个问题？

先感谢你。

- TheBokiya

---

谷歌的示例未能找到该地址的邮政编码。因此，这与您粘贴的样板代码无关。这听起来像是一个向谷歌提出的问题。 - bzlm

Answer 1

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

该函数没有识别到这部分，因为该地址的返回类型数组是：

 ["postal_code_prefix", "postal_code"]

...但该函数仅检查types数组的第一个项目。

可能的修复方法：

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;
      }
    }

  }
}

- Dr.Molle

---

还是不行。你从中得到了什么FSA代码？V7X？ - TheBokiya

那实际上不是该建筑物的正确FSA代码。如果您在Google地图上查找地址，Google地图也会简单地提供该代码。 - TheBokiya

至少对我来说，这座建筑似乎是Bentall Tower 1，而在他们的网站上我看到一个邮政编码V7X 1M9。当加拿大邮政编码的前3个字符是FSA时，它似乎是正确的。 - Dr.Molle

该综合大楼周围有多座本特尔塔。我猜V7X所在的那座是主塔。我们大楼的邮政编码以V6E开头。 - TheBokiya

有找到任何解决方案吗？ - abenevaut

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    
                            }
                        });
                    }
                });
            }
        });
    }

- Kd Nimavat

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);
                            }
                        }

            });

- soumik

---

欢迎来到 Stack Overflow！虽然这段代码可能回答了问题，但提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。仅有代码而没有其他内容的回答是不被鼓励的。 - Ajean