谷歌地图 api 自动完成仅显示街道和门牌号答案

【问题标题】：Google maps api autocomplete show only street and street number谷歌地图 api 自动完成仅显示街道和门牌号
【发布时间】：2017-10-20 14:35:17
【问题描述】：

现在在我的输入中，我打印街道、门牌号、州、国家…… 如何只打印街道和门牌号？我的代码：

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

【问题讨论】：

那么您是如何打印街道、街道号码、州、国家/地区我可以知道的
google.maps.places.Autocomplete 类不允许这样做，您无法更改其格式。如果您需要自定义格式，您应该基于 google.maps.places.AutocompleteService 类实现您自己的自动完成功能。查看文档developers.google.com/maps/documentation/javascript/…

标签： javascript google-maps autocomplete

【解决方案1】：

一旦选择了一个地方，你可以通过覆盖输入的值来解决这个问题。

var input        = document.getElementById("address");
var autocomplete = new google.maps.places.Autocomplete(input, {types: ["geocode"]});

autocomplete.addListener("place_changed", function() {
    var placeResult       = autocomplete.getPlace();
    var addressComponents = placeResult.address_components;
    var street            = "";
    var number            = "";

    // loop through addressComponents and find the route and street_number types
    for (var i = 0, i_len = addressComponents.length; i < i_len; i++) {
        var addressType = addressComponents[i].types[0];

        switch(addressType) {
            case "route":
                street = addressComponents[i]["long_name"];
                break;

            case "street_number":
                number = addressComponents[i]["long_name"];
                break;
        }
    }

    input.value = number + " " + street;
});

我最近创建了一个jQuery plugin，可以轻松地让你做到这一点。这将是您的新代码：

$("#address").geocomplete({
  fields: {
    "#address" : "street address"
  }
});

该插件将允许您根据所选地点的结果自动填充任意数量的字段。它还添加了自定义样式、提供回调并修复了烦人的scrolling issue。

【讨论】：