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>

这是控制器：

// 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.
  });
})

问题

如何让角谷歌地图的搜索框只显示波多黎各的地方？

谢谢！

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。如上所述：

您可以将SearchBox附加到文本字段，并在输入文本时，服务将以下拉选择列表的形式返回预测。

有关地址和搜索字词自动填充的更多详细信息和示例，请参阅文档。

此外，您还可以使用此SO帖子 - How to limit google autocomplete results to City and Country only作为参考。

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

1 个答案: