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

问题描述

所以我的问题是结果显示为:

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

1980 Mission Street, San Francisco, CA, 美国

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


            });

        }

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

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

推荐答案

result 包含一个 address_components 数组，其中一个条目的类型为postal_code"，用于您的示例地址(1980Mission Street, San Francisco, CA, United States")，包含 94103.

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.

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

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.

概念证明小提琴

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>

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