javascript - 将 Angular Google map 搜索框过滤到某个地点或半径

Question

我正在尝试使用angular-google-maps创建一个过滤器搜索框。

现在，它显示所有可能的地方，但我希望它只搜索 Puerto Rico 中的城市

我的代码与此类似example .

html:

<div class="row" style="margin-top: 15px;">
  <div class="col s12">
    <div id="map_canvas">
      <div id="searchbox">
        <label>Enter an address: </label>
      </div>
      <script type="text/ng-template" id="searchbox.tpl.html">
        <input type="text" placeholder="Search Box">
      </script>
    </div>
  </div>
  <div class="col s12">
    <!-- JUST ONE MARKER -->
    <ui-gmap-google-map
    center="pickUp || map.center"
    events="map.events"
    zoom="map.zoom">
      <ui-gmap-search-box
      parentdiv="'searchbox'"
      template="searchbox.template"
      events="searchbox.events"></ui-gmap-search-box>
      <ui-gmap-marker
      coords="pickUp"
      options="marker.options"
      events="marker.events"
      fit="true"
      idKey="0"></ui-gmap-marker>
    </ui-gmap-google-map>
  </div>
</div>

这是 Controller :

// SET MAP POSITION AND MARKER WHEN SEARCHING
var events = {
  places_changed: function (searchBox) {
    var place = searchBox.getPlaces()[0];
    console.log(place.geometry.location.lat());
    var lat = place.geometry.location.lat(),lon = place.geometry.location.lng();
    $scope.setLocation(lat, lon);
    $scope.map.center = {
      latitude: lat,
      longitude: lon
    };
  }
}
$scope.searchbox = { template:'searchbox.tpl.html', events:events};

以及它的配置:

.config(function ($stateProvider, uiGmapGoogleMapApiProvider) {
  'ngInject';

  uiGmapGoogleMapApiProvider.configure({
    //    key: 'your api key',
    v: '3.20', //defaults to latest 3.X anyhow
    libraries: 'places' // Required for SearchBox.
  });
})

问题

如何使 Angular 谷歌地图的搜索框仅显示波多黎各的地点？

谢谢!

Answer 1

使用 componentRestrictions 选项将自动完成搜索限制到特定国家/地区，如 Set biases and search-area boundaries for Autocomplete 中所述。 .

将结果限制为法国境内城市的示例代码:

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

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

然后，add SearchBox for autocompleting search terms 。如前所述:

You can attach the SearchBox to a text field and, as text is entered, the service will return predictions in the form of a drop-down pick list.

有关地址和搜索词自动完成的更多详细信息和示例可以在文档中找到。

而且，除此之外，您还可以使用这篇文章 - How to limit google autocomplete results to City and Country only供引用。