google-maps - 如何将 Google map 地点库的自动填充功能限制为仅建议一个城市的地点？

Question

我目前正在使用给定的代码，但这仅将建议限制在一个国家/地区。我见过一种实现，但它使用 jQuery，我想在不使用 jQuery 的情况下实现它。

var input = document.getElementById('searchTextField');
var options = {
    //types: ['(cities)'],
    componentRestrictions: { country: 'pk' }
};
var autocomplete = new google.maps.places.Autocomplete( input, options );

Answer 1

尝试将 bounds 属性添加到要传递给 Autocomplete 构造函数的 options 对象，如以下代码所示:

var southWest = new google.maps.LatLng( 25.341233, 68.289986 );
var northEast = new google.maps.LatLng( 25.450715, 68.428345 );
var hyderabadBounds = new google.maps.LatLngBounds( southWest, northEast );

var options = {
    bounds: hyderabadBounds,
    types:  ['establishment [or whatever fits your usage]'],
    componentRestrictions: { country: 'pk' }
};

如果您希望自动完成边界由 map 的当前视口(viewport)驱动，可以通过以下方式将 map 的边界绑定(bind)到自动完成:

autocomplete.bindTo('bounds', map);

或者，如果它在您的应用程序中运行得更好，您还可以选择在必要时显式设置边界:

autocomplete.setBounds( someOtherBounds );

这可能意味着您创建一个默认城市，就像我在上面的示例中对海伯拉巴所做的那样。或者您允许用户从城市列表中选择要启动的城市，然后将 map 视口(viewport)设置为所选城市。如果您一开始只使用国家“PK” 的 componentRestrictions，就像您已经在做的那样，自动完成 将会建议城市名称。您将知道什么最适合您的应用程序。

最后，这并没有真正完全将自动完成限制为仅城市，但它会尽可能接近您当前想要的结果。