Question

我正在使用google maps api V3中的自动完成服务来制作自定义自动填充输入。我基本上都会调用此函数来检索城市建议。

function getPlaces(st){
    gService.getQueryPredictions({input:st,types:['geocode']},function(predictions,status)      {
        if(status != google.maps.places.PlacesServiceStatus.OK) return false;
        for(var i = 0, prediction; prediction = predictions[i]; i++){
            console.log(prediction);
        }
        return predictions;
    });
}

这很有效，但我希望获得与城市相关联的邮政编码。就像V2 api那样，see this example。

我尝试将类型选项更改为城市，但结果是一样的。知道怎么做吗？

Answer 1

在新API中，AutocompleteService仅搜索与您目前输入的文本相匹配的猜测字符串。要获取包含地址和其他数据的实际Place对象，需要使用将autocomplete（）函数附加到文本框时创建的自动完成对象。请参阅此处的文档：https://developers.google.com/maps/documentation/javascript/places#getting_place_information

Answer 2

检查此代码段：

    var geocoder;
var map;
function initialize() {  
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'in'
    }
  };

  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)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDxcRPSsACIjdvMWRcfJBMzp4pKQXPJjj0&libraries=places"></script>
<input id="id_address" type="text" value="" />
<div id="postal_code"></div>

Answer 3

对于正在寻找解决方案的其他任何人，请检查this answer

您可以获取PlacesService

const service = new google.maps.places.PlacesService(document.createElement('div'));

然后在您向Google api发送请求，如下所示：

service.getDetails(
    {
        placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
        fields: [
            'formatted_address',
        ],
    },
    (...params) => {console.log(params);},
);

不要忘记提供Google归因！

使用google maps api v3中的自动完成服务获取邮政编码

3 个答案: