Question

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

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

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

问题是：如何在spiderfy-listener上实现回调？好吧，也许在那个上做它是愚蠢的，在这种情况下请告诉我该怎么做。谢谢:)）

我的代码在底部使用了一个糟糕的20毫秒黑客，我不想保留：

    // 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);
    });

Answer 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);
});

单张标记在spiderfy上单击回调

1 个答案: