Wrong pop up gets opened on marker click

问题

I have a lot of markers so i cluster them. I got problem where i want to remain my pop up open when user zoom out from the cluster and i found this solution

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

Leaflet Markercluster: Exempt marker from clustering

it works fine. But the problem is when the markers are too close on the cluster itself and when i try with this same solution i got this result

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

where when i click on the cluster two markers show up.For example if i click on the left one i get pop up with text one.When i close this popup,i try again to open the left marker and then i get pop up with text two which is wrong.Instead i get one.Where is my mistake and hopw the solution can be adjusted to the markers with very near coordinates.

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

UPDATED - THE FULL SOLUTION

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

回答1:

This is because you remove the layer from the clustered group. After adding it again to the group it has a new order.

You can do something like this:

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

And remove the popupopen / close listener function

来源：https://stackoverflow.com/questions/65215536/wrong-pop-up-gets-opened-on-marker-click

标签

javascript

leaflet

leaflet.markercluster