google-maps - Leaflet JS 和 Google Places 搜索框

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

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

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

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

谢谢

Answer 1

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

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

如果您不愿意使用更加集成的 Google 服务，您可以在 Leaflet map 中实现 Google 地方信息搜索框(而不是 Leaflet 搜索插件)。

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示例中使用的服务相同的服务。