在 Google Maps Places API 中根据特定国家/地区限制搜索

Question

我正在使用 Google 地图的 Places API 作为用户类型自动完成位置。但是如何将建议限制在特定国家/地区？

这是我的 javascript：

function initAutocomplete() {

    // Create the search box and link it to the UI element.
    var input = document.getElementById('autocomplete-input');
    var searchBox = new google.maps.places.SearchBox(input);

    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
    });
}

Answer 1

通过将 SearchBox 更改为 Autocomplete 并传递带有要求的选项来修复它。如果有人需要，这里是代码。

function initAutocomplete() {

    // Create the search box and link it to the UI element.
    var input = document.getElementById('autocomplete-input');
    var options = {
        componentRestrictions: {country: 'fr'}
    };

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

    // [START region_getplaces]
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
    });
}

Answer 2

注意：我使用的是 Google Maps API v3 (v3.30.13)

@Abhilash 解决问题的方法很好用。但是随着他的回答，我遇到了一个问题：自动完成功能工作正常，但没有触发places_changed 方法。而且也没有控制台错误。

然后在另一个线程中使用the answer by @geocodezip，我发现使用Autocomplete 触发的事件不是places_changed，而是place_changed（注意单数形式的区别） .

如果您想继续使用place_changed，还需要进行其他更改，因为place_changed 它只返回一个位置，而不是一组位置。所以：

• 你必须使用.getPlace() 而不是.getPlaces()

• 您必须直接使用place 而不是places.forEach(function(place) { ... }。

  var input = document.getElementById('pac-input');
  var restrictOptions = {
      componentRestrictions: {country: 'bd'}
  };
  var searchBox = new google.maps.places.Autocomplete(input, restrictOptions);
  
  searchBox.addListener('place_changed', function() {
  
      var place = searchBox.getPlace();
  
      if (place.length == 0) {
          return;
      }
  
      if (!place.geometry) {
          console.log("No details available for input: '" + place.name + "'");
          return;
      }
  
      // ...
  
  });
  

警告

限制是：使用.SearchBox() google 地方搜索即使使用随机字符串也能工作，但使用.Autocomplete() 随机字符串无法找到任何.geometry，因此无法精确定位到地图上的任何匹配区域。使用.SearchBox()，如果您输入“地名”，按回车，它可以指向地名、地区。但是如果没有从自动建议中进行选择，.Autocomplete() 就无法触发该地点的.geometry。以下console.log(place) 显示随机字符串和自动完成所选项目之间的区别：

后果

我对@9​​87654343@ 为我工作的结果不满意。因此，在找到更好的解决方案之前，我决定坚持使用.SearchBox() 方法——尽管它并不限制搜索建议。但是用bounds_changed绑定的话，搜索结果就有点绑定了，虽然不够严格和满意，但至少有总比没有好。 ¯\_(ツ)_/¯

// Bias the SearchBox results towards current map's viewport.
front_end_map.addListener('bounds_changed', function() {
    searchBox.setBounds(front_end_map.getBounds());
});

我非常期待一个防弹解决方案......