我如何从谷歌地图的自动完成API获取邮政编码 [英] how do i get the postal code from google map's autocomplete api

问题描述

因此，我的问题是，结果正在吐出为：

<1980>美国加利福尼亚州旧金山Mission街1980

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

//这是代码，我只有自动填充输入字段

  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（）。

任何建议都很多赞赏。感谢。

解决方案

autocomplete 返回的.exp / reference＃PlaceResultrel =noreferrer>结果包含 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  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

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

1980 Mission Street, San Francisco, CA, United States

...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().

Any advice is much appreciated. Thanks.

解决方案

The result returned by the autocomplete contains an address_components array, one entry of which has the type 'postal_code', which for your sample address ("1980 Mission Street, San Francisco, CA, United States"), contains 94103.

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"></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>

这篇关于我如何从谷歌地图的自动完成API获取邮政编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！