使用Google Places获取郊区的邮政编码

Get postcode for suburb using Google Places

<input id="supplier-area" type="text">

var autocomplete;
function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('supplier-area')),
        {
            types: ['(cities)'],
            componentRestrictions: {
                country: 'au'
            }
        }
    );
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        alert(JSON.stringify(place));
    });
}
initialize();

我也有同样的问题。我想使用谷歌位置自动完成功能来选择郊区，然后总是返回邮政编码。

下面的JSFiddle展示了如何做到这一点。放置自动填写地址表单这是通过地理代码反向查找扩展的股票代码。

其作用如下：

1. 获取自动完成结果
2. 如果没有邮政编码
3. 将地理坐标从结果中删除
4. 调用geocoder.geocode以获取返回坐标处的地址
5. 询问地址响应，并从这些地理坐标处返回的地址中读取城市和邮政编码值

HTML更改为纵向添加额外字段

    <tr>
        <td class="label">Lat</td>
        <td class="wideField" colspan="3"><input class="field" id="lat" disabled="true"/></td>
    </tr>
    <tr>
        <td class="label">Long</td>
        <td class="wideField" colspan="3"><input class="field" id="lng" disabled="true"/></td>
    </tr>

不仅需要询问地址组件，还需要询问几何结构，这样你就可以获得geo corinates

autocomplete.setFields(['address_component', 'geometry']);

功能

    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 then fill-in 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]];
          document.getElementById(addressType).value = val;
        }    
      }
      // geometry
      var geometry = place.geometry;
      var lat = geometry.location.lat();
      var lng = geometry.location.lng();
      document.getElementById("lat").value = lat;
      document.getElementById("lng").value = lng;
      var postcode = document.getElementById("postal_code");
      if(postcode.value == ""){
        //alert("no postcode use lat/lng to lookup place")
        var geocoder = new google.maps.Geocoder();
        var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
         geocoder.geocode({'location': latlng}, function(results, status) {
              if (status === 'OK') {
                if (results[0]) {
                  var faddress = results[0].formatted_address;
                  var addressParts = results[0].address_components;
                  for (var i = 0; i < addressParts.length; i++) {
                    var addressType = addressParts[i].types[0];
                    if (addressType == "postal_code" || addressType == "locality") {
                      var val = addressParts[i][componentForm[addressType]];
                      document.getElementById(addressType).value = val;
                    }    
                  }
                  //alert(faddress);
                } else {
                  window.alert('No results found');
                }
              } else {
                window.alert('Geocoder failed due to: ' + status);
              }
        });
      }
    }

这是基于谷歌在这里给出的例子Place Autocomplete Address Form

google.maps.event.addListener(autocomplete, 'place_changed', function () {
  var place = autocomplete.getPlace();
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (addressType == "postal_code") {
      var postalcode = place.address_components[i].long_name;
      $("#Address_Postcode").val(postalcode);
    }
  }
});