Question

我有一张LeafletJS地图，上面有很多的标记，其中很多都是在高缩放级别重叠。目前，当我点击几个重叠标记时，会发出多个点击事件，然后每个事件都会发出一个popupopen事件，而事件会$.getJSON()填充弹出窗口。显然，这不是理想的，所以我想知道如何让Leaflet一次只执行一次点击。

我在这里找到的其他答案谈论e.preventDefault()或e.stopPropagation()。这些似乎都不适用于Leaflet的click或popupopen事件，所以我认为必须有一种我从未听说过的更聪明的方式。< / p>

这是我的代码，为了这个问题的目的而淡化：

var geojson_options = {
    onEachFeature: function(feature, layer){
        layer.bindPopup('<img src="/spinner.gif" />');
        layer.on("popupopen", function(e){
            // e.preventDefault and e.stopPropogating don't exist
            $.getJSON("some-url.json", function(json){
               e.popup.setContent("Some processing of the json");
            });
        });
    },
    pointToLayer: function (feature, latlng) {
      // Irrelevant stuff
    }
};

L.geoJson(geojson_data, geojson_options);

我尝试过使用layer.on("click", ...)设置一个名为popping_open的变量到true的变体，以便在弹出窗口打开时保持状态，但这不起作用无论是。告诉我，有一个干净的方法来处理这个问题吗？

Answer 1

有一个名为OverlappingMarkerSpiderfier-Leaflet的插件可以在onClick事件上传播重叠标记，因此它们的识别更加容易。您可以看到演示here并从github下载。也许它对你的应用程序很有用。

Answer 2

这听起来像这里的问题，如果我正确理解，当您尝试点击标记时，点击事件由多个标记触发，而这些标记重叠而不是由预期标记触发。我知道解决这个问题的唯一方法是在触发click事件之前分离标记。您可以按照建议使用插件，或者阻止弹出窗口以特定缩放级别打开。

我建议使用名为Leaflet.markercluster（https://github.com/Leaflet/Leaflet.markercluster）的插件。它会创建重叠标记的集群，在放大时将其分开。单击集群将缩放到集群的地理边界，只要它们不重叠就会单独显示标记。你可以使用这个基本格式的插件：

var markerClusterLayer = L.markerClusterGroup();

var geojson_options = {
onEachFeature: function(feature, layer){
    layer.bindPopup(your popup content goes here);

    ... other stuff you want to do ...

    markerClusterLayer.addLayer(layer);
    }
};

如何防止LeafletJS在重叠标记上发出多个点击事件？

2 个答案: