Leaflet JS和Google Places搜索框

Question

我希望在此demo中进行类似的搜索。这是我正在寻找的

我能够使用leaflet-search设置搜索，但搜索功能并不强大，与谷歌提供的地方搜索框相比较慢。

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

由于

Answer 1

这两种行为之间的差异很可能不是由于Leaflet-search插件本身，而是来自该插件使用的Google Geocoding service（请参阅as implemented in Google），以及你在开头提到的Google Places Search Box内部使用的那个。

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

如果您不愿意使用更集成的Google服务，则可以在传单地图（而不是传单搜索插件）中实施Google地方信息搜索框。

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服务提供搜索的服务都使用与传单搜索示例中使用的服务相同的服务。