谷歌地图自动完成：只输出地址，没有国家和城市

Posted 2023-02-23

【中文标题】谷歌地图自动完成：只输出地址，没有国家和城市

【英文标题】：Google maps Autocomplete: output only address without country and city

【发布时间】：2012-04-12 14:04:20

【问题描述】：

我使用Places library 来自动完成地址输入。搜索仅限于一个城市，我得到这样的输出：

“Rossiya, Moskva, Leninskiy prospekt 28”

如何隐藏“Rossiya，Moskva”？ ...

我的查询：

function() 
        // Search bounds
        var p1 = new google.maps.LatLng(54.686534, 35.463867);
        var p2 = new google.maps.LatLng(56.926993, 39.506836);
        self.options = 
            bounds : new google.maps.LatLngBounds(p1, p2),
            componentRestrictions: country: 'ru',
        ;

        var elements = document.querySelectorAll('.address');

        for ( var i = 0; i < elements.length; i++) 
            var autocomplete = new google.maps.places.Autocomplete(elements[i],
                    self.options);
        

【问题讨论】：

这里的文档developers.google.com/maps/documentation/javascript/places 说如下，试试看vicinity: A simplified address for the Place, including the street name, street number, and locality, but not the province/state, postal code, or country. For example, Google's Sydney, Australia office has a vicinity value of 5/48 Pirrama Road, Pyrmont.

谢谢，我试过了，但附近是 Place 属性，在我的情况下 autocomplete.getPlace() 返回未定义。还没有找到解决办法。

您可以根据this answer 进行推断，使用您需要的信息构建您自己的自动完成小部件。

【参考方案1】：

您可以，但您必须在两个地方替换输入字段的值。 示例：

var autocomplete = new google.maps.places.Autocomplete(input, placesOptions);
var input = document.getElementById('searchTextField');

在“place_changed”事件中，您可以执行以下操作：

placeResult = autocomplete.getPlace();
//This will get only the address
input.value = placeResult.name;

这会将搜索文本字段中的值更改为街道。

第二名有点棘手：

input.addEventListener('blur', function()
// timeoutfunction allows to force the autocomplete field to only display the street name.
if(placeResult) setTimeout(function() input.value = placeResult.name; , 1); 

我们必须这样做的原因是因为如果您只添加事件监听器进行模糊处理，谷歌地方将使用完整地址填充输入字段，因此您必须“等待”谷歌更新然后强制您等待几毫秒来改变。

尝试不使用 setTimeout 函数，您就会明白我的意思。

【参考方案2】：

编辑

你不能。我有相反的看法，你只是在寻找一个城市。没有办法只从地址组件中打印出街道名称（我假设那是街道名称）。

---

与所问内容相反

From the docs:

(cities) 类型集合指示 Place 服务返回匹配 locality 或 administrative_area3 的结果。

var input = document.getElementById('searchTextField');
var options = 
  bounds: defaultBounds,
  types: ['(cities)']
;

autocomplete = new google.maps.places.Autocomplete(input, options);

【讨论】：

爱坚定的回答说“你不能”......最糟糕的是，这个答案被接受了。

【参考方案3】：

结果你有哈希，你可以从中得到你想要的部分：

 google.maps.event.addListener(autocomplete, 'place_changed', function() 
          var place = autocomplete.getPlace();

现在你可以从“地方”得到它

place.geometry.location.lat()

地址

place.address_components[0] or place.address_components[1] ...

取决于你想得到什么

【参考方案4】：

我有一个非常相似的问题，确实可以解决。这在 Angular 2 项目中，但它也应该适用于其他地方。我过滤了机构的结果，并且只想显示名称并隐藏结果的地址部分。这对我有用，一旦你选择了一个建议就会执行一个函数：

   getAddress(place: Object) 
    this.zone.run(() => 
        this.establishment = place['name'];
    );

其中zone 是在构造函数中注入的 NgZone 组件，this.establishment 是与输入字段中的[(NgModel)] 关联的变量。

【参考方案5】：

在place_changed里面设置一个超时函数：

var streetString = place.address_components[0] or place.address_components[1];

window.setTimeout(function() 
  $('input').val(streetString);
, 200);

这个解决方案对我有用。