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

Question

所以我的问题是结果如下：

1980 Mission Street, 旧金山, CA, 美国

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

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

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

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

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


            });

        }

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

Answer 1

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

注意：一个城市，县或州通常有一个以上的邮政编码，获得一个唯一的邮政编码的唯一方法是反转地理编码返回的坐标，这是否足够取决于使用。

概念证明小提琴

 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> 

Answer 2

嗨，我在角度上测试地图并使用“地理代码”或“地址”类型获得相同的地址组件结果：<<--- address_component:Arr[5] ---<<< 具有属性 Routes 和 locality.. 等。但没有人给出 Postal_code 属性...

Map.Component.html

Map.Component.ts

options={
    bounds:this.defaultBounds,
    strictBounds:true,
    types:['address'],
   //or types:['geocode'] };

  public AddressChange(address: any){
      console.log(address);
 }

Answer 3

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