为什么会出现点击标记弹出错误弹窗的问题？ #

你的问题核心出在标记图层移动导致的DOM层级混乱和MarkerCluster聚类状态未同步上：

1. 当两个标记坐标极近时，它们在地图上几乎完全重叠。你在弹窗打开时把目标标记移到unclustered图层（这个图层默认在clustered图层上方），此时该标记的DOM层级（z-index）比留在聚类组里的另一个标记更高，点击时能正确触发对应弹窗。
2. 关闭弹窗把标记移回clustered图层后，MarkerCluster会自动重新计算聚类逻辑。如果此时聚类处于展开（spiderfy）状态，移回的标记会被放到聚类标记列表的末尾，导致它的DOM层级被另一个标记覆盖。
3. 下次点击同一位置时，Leaflet会优先触发层级更高的那个标记（也就是你看到的"two"），最终弹出错误的弹窗。

另外，你直接调用m.openPopup()的时机有点早，图层切换还没完成就打开弹窗，也会加剧标记事件的混淆。

调整后的解决方案代码 #

我们需要优化图层移动时的层级控制，同时强制同步MarkerCluster的聚类状态：

// 初始化聚类组和非聚类组
const clustered = L.markerClusterGroup({
  spiderfyOnMaxZoom: true, // 开启聚类展开时的分散显示，减少重叠点击问题
  showCoverageOnHover: false
});
const unclustered = L.layerGroup().addTo(map);

// 弹窗打开事件处理
clustered.on('popupopen', function(e) { 
    console.log('open'); 
    const m = e.popup._source; 
    // 记录标记原本的层级，临时设置极高z-index确保它在最上层
    m._originalZIndex = m.options.zIndexOffset || 0;
    m.setZIndexOffset(1000);
    // 移动图层
    clustered.removeLayer(m); 
    unclustered.addLayer(m); 
    // 延迟打开弹窗，确保图层切换完成
    setTimeout(() => m.openPopup(), 10);
}); 

// 弹窗关闭事件处理
unclustered.on('popupclose', function(e) { 
    console.log('close'); 
    let m = e.popup._source; 
    // 移除并移回聚类组
    unclustered.removeLayer(m); 
    m.setZIndexOffset(m._originalZIndex); // 恢复原层级
    clustered.addLayer(m); 
    // 强制聚类组刷新状态，确保标记正确归位
    clustered.refreshClusters();
    m.closePopup(); 
});

额外优化建议 #

1. 避免依赖Leaflet私有属性：e.popup._source是Leaflet内部的私有属性（以下划线开头），未来版本可能会变化。建议创建标记时添加自定义标识，比如：

   const markerOne = L.marker([51.5, -0.09]).bindPopup('one');
   markerOne.markerId = 'one'; // 添加自定义标识
   

   后续可以通过m.markerId来确认当前操作的是哪个标记，更可靠。

2. 优化极近标记的交互体验：启用spiderfyOnMaxZoom后，聚类展开时标记会自动分散成蜘蛛状，用户能清晰区分每个标记，从根源减少点击混淆的概率。

内容的提问来源于stack exchange，提问作者pece