Leaflet JS 和 Google Places 搜索框

Question

我想进行与此 demo 类似的搜索。这就是我要找的

我可以使用 leaflet-search 设置搜索，但与 google 提供的位置搜索框相比，搜索功能不强大且速度较慢。

我在我的应用程序中使用传单 AngularJS 插件。请帮忙。

谢谢

Answer 1

这两种行为之间的差异很可能不是由于 Leaflet-search 插件本身，而是来自您在开头提到的 Google Geocoding service that is used by that plugin (see it as implemented in Google), and the one which is used internally by Google Places Search Box。

即Google 可能会提供不同的结果，无论您是使用低级地理编码服务，还是使用它自己的 Places API。

如果您不介意使用更集成的 Google 服务，您可以在 Leaflet 地图中实现 Google Places 搜索框（而不是 Leaflet-search 插件）。 =16=]

var GooglePlacesSearchBox = L.Control.extend({
  onAdd: function() {
    var element = document.createElement("input");
    element.id = "searchBox";
    return element;
  }
});
(new GooglePlacesSearchBox).addTo(map);

var input = document.getElementById("searchBox");
var searchBox = new google.maps.places.SearchBox(input);

searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  var group = L.featureGroup();

  places.forEach(function(place) {

    // Create a marker for each place.
    var marker = L.marker([
      place.geometry.location.lat(),
      place.geometry.location.lng()
    ]);
    group.addLayer(marker);
  });

  group.addTo(map);
  map.fitBounds(group.getBounds());

});

（注意：将searchBox代码推入onAdd可能会更干净，现在没有时间测试）。

演示：http://plnkr.co/edit/YjcPKL7kB1bIByu7QJ2u?p=preview

注：还有很多其他的Leaflet plugins for geocoding。那些通过 Google 服务提供搜索的服务都使用与 Leaflet-search 示例中使用的服务相同的服务。

Leaflet JS 和 Google Places 搜索框

Leaflet JS and Google Places search box

google-maps

leaflet