Javascript 如何从谷歌地图的自动完成 api 获取邮政编码

How do I get the postal code from google map's autocomplete api

提问by Chris

So my issue is that the results are spitting out as:

所以我的问题是结果被吐出为：

1980 Mission Street, San Francisco, CA, United States

1980 Mission Street, San Francisco, CA, 美国

...but I need it to give me the zipcode because when I put it back into google's Geocoder, for some reason it doesn't register the location.

...但我需要它给我邮政编码，因为当我把它放回谷歌的地理编码器时，由于某种原因它没有注册位置。

// This is the code I have just the autocomplete input field

// 这是我只有自动完成输入字段的代码

var input = document.getElementById('id_address');
var options = {
  types: ['address'],
  componentRestrictions: {country:'us'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);

// This is how I'm using the geocoder

// 这就是我使用地理编码器的方式

window.onload = function initMap() {
            console.log("{{ task.address }}");
            console.log("{{ location }}");
            var address = "{{ location }}";

            geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': address }, function(results, status) {
                <!-- console.log(address); -->
              if (status == google.maps.GeocoderStatus.OK) {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: results[0].geometry.location,
                    zoom: 12,
                  });
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                  });
              }


            });

        }

I have a working solution, but the user will have to input each piece of the address separately. I'm trying to change it so they can just fill out one input field and then I can spit that address into the gecoder.geocode().

我有一个可行的解决方案，但用户必须分别输入每个地址。我正在尝试更改它，以便他们只需填写一个输入字段，然后我就可以将该地址吐到 gecoder.geocode() 中。

回答by geocodezip

The resultreturned by the autocompletecontains an address_componentsarray, one entry of which has the type 'postal_code', which for your sample address ("1980 Mission Street, San Francisco, CA, United States"), contains 94103.

返回的结果autocomplete包含一个address_components数组，其中一个条目的类型为“postal_code”，对于您的示例地址（“1980 Mission Street, San Francisco, CA, United States”），该数组包含 94103。

Note:a city, county or state usually has more than one postal code, the only way to get a unique one would be to reverse geocode the returned coordinates, whether that is adequate will depend on the use.

注意：一个城市、县或州通常有多个邮政编码，获得唯一邮政编码的唯一方法是对返回的坐标进行反向地理编码，这是否足够取决于用途。

proof of concept fiddle

概念证明小提琴

function initialize() {
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'us'
    }
  };
  autocomplete = new google.maps.places.Autocomplete(input, options);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "postal_code") {
          document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;

        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="id_address" type="text" size="100" value="1980 Mission Street, San Francisco, CA, United States" />zip code:
<div id="postal_code"></div>
<div id="map_canvas"></div>

回答by adjuremods

If you're using the Google Maps Geocoding API, the Resulthas the address_componentsarray which contains the postal_code. You just need to specify the type as postal_code.

如果您使用的是 Google Maps Geocoding API，则Result的address_components数组包含postal_code. 您只需要将类型指定为postal_code.