Leaflet标记缩放偏移及更新异常（疑似tooltip组件导致）

算力阿峰

2026-6-29

Leaflet标记组重新加载后缩放偏移问题修复（关联sticky Tooltip）

问题场景

初始加载标记组无异常，代码如下：

for (var i = 0; i < markers.value.length; i++) {
    new L.marker([markers.value[i].location.lat, markers.value[i].location.lon])
      .addTo(markersLayer.value)
      .bindTooltip(L.tooltip({ sticky: true, content: 'god' }));
}

但执行markersLayer.value.clearLayers()清除标记后，重新添加新标记会出现缩放时标记偏移的问题：

仅绑定sticky: true的Tooltip时复现，注释Tooltip代码则无异常
不清除图层的话，旧标记残留且新标记无法正常工作

修复方案

方案1：清除图层前手动销毁Tooltip

在调用clearLayers()前，遍历所有标记解绑并销毁Tooltip，避免残留事件监听或DOM元素：

// 遍历标记组，清理每个标记的tooltip
markersLayer.value.eachLayer(marker => {
  const tooltip = marker.getTooltip();
  if (tooltip) {
    marker.unbindTooltip();
    tooltip.remove(); // 彻底移除tooltip的DOM元素和事件
  }
});
// 再执行清除图层操作
markersLayer.value.clearLayers();

方案2：替换标记组而非清除图层

直接销毁旧的标记组，创建新的LayerGroup来承载新标记，从根源避免残留问题：

// 移除旧标记组并销毁
markersLayer.value.removeFrom(map);
// 创建新的标记组并添加到地图
markersLayer.value = L.layerGroup().addTo(map);

// 重新添加新标记
for (var i = 0; i < markers.value.length; i++) {
    new L.marker([markers.value[i].location.lat, markers.value[i].location.lon])
      .addTo(markersLayer.value)
      .bindTooltip(L.tooltip({ sticky: true, content: 'god' }));
}