Leaflet每3秒更新当前位置标记时旧标记残留重复生成问题如何解决

云原生阿岚

2026-10-10

Leaflet位置标记重复叠加问题修复方案

问题根因

每次触发locationfound定位成功事件时，代码都会创建新的L.marker实例添加到地图，没有复用已存在的标记实例，导致旧标记不会被移除，不断叠加新标记。

修复方法

你预先声明的current_position全局变量可以用来存储标记实例，仅在第一次定位时新建标记，后续定位直接更新已有标记的坐标即可，修改后的核心代码如下：

// 原有代码保持不变，仅替换onLocationFound函数
function onLocationFound(e) {
    const radius = e.accuracy / 2;
    // 处理位置标记
    if (!current_position) {
        // 首次定位：新建标记并赋值给全局变量
        current_position = L.marker(e.latlng, {icon: greenIcon}).addTo(map);
    } else {
        // 非首次定位：直接更新已有标记的坐标
        current_position.setLatLng(e.latlng);
    }
    // （可选）如果需要同步展示定位精度圈，添加以下逻辑
    if (!current_accuracy) {
        current_accuracy = L.circle(e.latlng, radius).addTo(map);
    } else {
        current_accuracy.setLatLng(e.latlng);
        current_accuracy.setRadius(radius);
    }
}