leaflet location-filter example和draggable-resizeable rectangle area-select on a map

Question

我需要在地图上选择一个矩形区域，并识别属于该区域的标记。 理想情况下，矩形应该是可拖动的并且可以调整大小。 我对这种映射并不是特别关注，Google或Mapbox或Leaflet都可以正常工作。

我找到了Leaflet（https://github.com/kajic/leaflet-locationfilter/）的位置过滤器，它确实可以完成这项任务。但是，我无法找到显示如何使用它的简单示例代码。它已在tripcode.com上使用，但很难从正在发生的事情中做出任何改变。 有没有人有位置过滤器的经验？如果是这样，你能指点一下如何使用它的简单例子吗？

是否有其他地图服务的类似示例，特别是谷歌地图？

感谢。

Answer 1

对于我的bbox page我已经从 Leaflet.draw 插件中抓取了两个文件：SimpleShape，Rectangle并修复了它们以获得更好的可用性。矩形的代码很简单：

var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();

rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });

对于高级内容，例如在屏幕上居中显示矩形，请参阅页面的源代码。

Answer 2

当您将标记绘制到地图上时，您需要将它们添加到某种数组中，该数组将包含每个标记的lat / lng对。

您可以使用Leaflet.draw绘制矩形并对其进行修改，以便在鼠标向上返回左上角和右下角坐标。在鼠标上移动时，您可以查看整个列表以及哪些元素适合该边界框。

这个解决方案只是一个例子，有很多方法可以做到这一点。