Spiderfy上的传单标记点击回调答案

【问题标题】：Leaflet marker click callback on spiderfySpiderfy上的传单标记点击回调
【发布时间】：2015-11-27 03:16:29
【问题描述】：

使用 George MacKerron 的伟大蜘蛛侠https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet 有问题。

当点击一个图钉时，它的弹出窗口就会出现。这很酷，只要我没有重叠的针脚，我会蜘蛛侠。 spiderfied pin 的问题是弹出窗口，它也会在第一次点击时打开，而它与 spiderfied 集合的某些其他 pin 重叠。

因此，我需要在 spiderfy-listener 上进行点击回调，它允许我在 spiderfy 之后立即关闭弹出窗口。或者甚至更好，直接在蜘蛛化之前。

问题是：如何实现对 spiderfy-listener 的回调？好吧，也许在那个上做这件事很愚蠢，在这种情况下，请告诉我还能做什么。谢谢:)

我的代码在底部使用了一个奇怪的 20 毫秒 hack，我不想保留：

    // Kartendarstellung mit Spiderfier
    var map = L.map('basicMap').setView(new L.LatLng(position[0][0], position[0][1]), 13);
    map.doubleClickZoom.disable(); 
    var oms = new OverlappingMarkerSpiderfier(map, {
        keepSpiderfied: true,
        nearbyDistance: 25,
        legWeight: 2
    });

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Kartendaten &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> und Mitwirkende, Lizenz: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Bilddaten © <a href="http://cloudmade.com">CloudMade</a>'
    }).addTo(map);    

    for (var i = 1; i < <?php echo count($pos);?>; i++){
        switch(position[i][3]){
            case "B":
                marker = L.marker([position[i][0], position[i][1]],{icon: BIcon}).addTo(map);
                break;
            case "S":
                marker = L.marker([position[i][0], position[i][1]],{icon: SIcon}).addTo(map);
                break;    
        }
        // Marker ungeöffnet auf Karte setzen
        var popup = new L.popup();
        var content = position[i][2];
        // Marker-Inhalt zuweisen
        marker.bindPopup(content);
        // Spiderfier Marker setzen
        oms.addMarker(marker);
    }

    oms.addListener('spiderfy', function() {
        // Hack als Ersatz zu fehlendem Spiderfy-Marker-Click-Callback
        setTimeout( function() {
            map.closePopup();
        }, 20);
    });

【问题讨论】：

标签： callback openstreetmap leaflet

【解决方案1】：

我认为问题在于您在创建它时将弹出窗口直接绑定到标记，而不是在单击 oms 层时动态绑定它。这是 oms 文档中推荐的方法https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet

我没有对此进行测试，但您的代码应该如下所示：

for (var i = 1; i < <?php echo count($pos);?>; i++){
    switch(position[i][3]){
        case "B":
            marker = L.marker([position[i][0], position[i][1]],{icon: BIcon}).addTo(map);
            break;
        case "S":
            marker = L.marker([position[i][0], position[i][1]],{icon: SIcon}).addTo(map);
            break;    
    }

    // In your loop, store the popup content as a property of the marker
    marker.desc = position[i][2];  

    // Spiderfier Marker setzen
    oms.addMarker(marker);
}

// Delegate the click to the oms layer and dynamically create the popup based on the 
var popup = new L.Popup();
oms.addListener('click', function(marker) {
  // Set the popup content using the marker property set in the loop
  popup.setContent(marker.desc);
  popup.setLatLng(marker.getLatLng());
  map.openPopup(popup);
});

【讨论】：