Leaflet 实时位置追踪中更新圆形标记并清除旧标记的实现问题

• 异步竞态与时序错位：navigator.geolocation.getCurrentPosition是耗时不确定的异步方法，你把map.removeLayer(circle)写在了该方法的回调内部，但新建圆形标记的同步代码会立刻执行，且会覆盖circle变量的引用。等定位回调真正执行删除操作时，circle已经是刚生成的新标记实例，根本不是需要清理的旧标记。当多个定位请求交叉触发时，旧标记会被永久遗留在地图上，最终造成标记堆积。
• 标记类型不统一：初始化时创建的是面状的L.circle对象，后续定时更新时创建的是点状的L.circleMarker对象，即使删除逻辑正常生效，初始的面状圆形也永远不会被纳入后续的清理流程，两类标记渲染逻辑也存在差异。
• 作用域不规范：代码中用到的lat、lon没有加let/const声明，会直接挂载到全局作用域，异步定位回调里很容易读到上一次循环的旧坐标，出现标记位置错位。
• 定位方式低效：手动用setInterval每秒强制发起定位请求的方案，会频繁消耗设备定位硬件资源，浏览器自带的geolocation.watchPosition方法可以自动监听位置变化触发回调，无需手动写轮询逻辑，稳定性和精度都更高。

var zoom = 13;
let userLocationMarker = null; // 全局仅维护一个位置标记的引用，避免多实例累积

if ('geolocation' in navigator) {
    console.log('geolocation available');
    // 首次定位完成后初始化地图
    navigator.geolocation.getCurrentPosition(position => {
        const initLat = position.coords.latitude;
        const initLon = position.coords.longitude;
        console.log(initLat, initLon);

        // 初始化地图视图
        const map = L.map('mapid').setView([initLat, initLon], zoom);
        // 加载OpenStreetMap瓦片图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 生成初始位置的圆形标记，统一使用circleMarker类型
        userLocationMarker = L.circleMarker([initLat, initLon], {
            radius: 8,
            color: '#2563eb',
            fillOpacity: 0.7
        }).addTo(map);

        // 启动位置自动监听，替代原有setInterval轮询
        navigator.geolocation.watchPosition(newPosition => {
            const newLat = newPosition.coords.latitude;
            const newLon = newPosition.coords.longitude;

            // 性能优化：无需反复删除/新建标记，直接通过内置方法更新坐标
            if (userLocationMarker) {
                userLocationMarker.setLatLng([newLat, newLon]);
            } else {
                userLocationMarker = L.circleMarker([newLat, newLon], {
                    radius: 8,
                    color: '#2563eb',
                    fillOpacity: 0.7
                }).addTo(map);
            }
            // 可选配置：地图自动跟随最新位置平移
            map.panTo([newLat, newLon]);
        });
    });
} else {
    console.log('geolocation not available');
}

• 时序修正：所有位置更新的操作都放在定位成功的回调内部执行，严格遵循“拿到新坐标→更新标记位置”的执行顺序，不会出现漏删、漏更新的问题。
• 性能优化：使用Leaflet标记对象内置的setLatLng方法更新位置，跳过反复删除图层、重建图层的DOM操作，渲染流畅度会大幅提升。
• 能力替换：用系统级的位置监听接口替代手动轮询，减少设备资源消耗，当用户位置发生实际变化时才会触发更新，不会出现固定间隔请求的无效算力浪费。

注意：所有涉及地理位置的API调用都要求页面运行在HTTPS环境下，否则浏览器会直接拦截定位请求，导致功能失效。

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