标记单击时打开错误的弹出窗口

Question

我有很多标记，所以我将它们聚集在一起。当用户从集群中缩小时，我想在弹出窗口保持打开状态时遇到问题，我找到了这个解决方案

https://jsfiddle.net/sghL4z96/65/

Leaflet Markercluster: Exempt marker from clustering

它工作正常。但问题是当标记离集群本身太近时 当我尝试使用相同的解决方案时，我得到了这个结果

https://jsfiddle.net/s2mnvL5w/3/

当我点击集群时会出现两个标记。例如，如果我点击左边的一个，我会弹出一个文本。当我关闭这个弹出窗口时，我再次尝试打开左边的标记，然后我得到弹出两个错误的文本。相反我得到一个。我的错误在哪里，并且可以将解决方案调整为坐标非常接近的标记。

clustered.on('popupopen', function(e) {
    console.log('open');
    const m = e.popup._source;
    clustered.removeLayer(m);
    unclustered.addLayer(m);
    m.openPopup();
});
unclustered.on('popupclose', function(e) {
    console.log('close');
    let m = e.popup._source;
    unclustered.removeLayer(m);
    clustered.addLayer(m);
    m.closePopup();
});

更新 - 完整解决方案

https://jsfiddle.net/s2mnvL5w/24/

Answer 1

这是因为您从clustered 组中删除了该层。再次将其添加到组后，它有一个新订单。

你可以这样做：

let popup;
const mkMarker = function(lat, lng, txt) {
    const m = L.marker(L.latLng(lat, lng));
    m.addTo(clustered);
  m.popupText = txt;
  m.on('click',(e)=>{
    var marker = e.target;
    var latlng = marker.getLatLng();
    var offset = [0,0];
    if(marker._preSpiderfyLatlng){
        latlng = marker._preSpiderfyLatlng;
    }else{
      offset= marker.options.icon.options.popupAnchor;
    }
    
    popup = L.popup({offset: offset}).setContent(marker.popupText).setLatLng(latlng).addTo(map)
  })
    return m;
};

并移除popupopen/close监听函数