Google Maps API：watchPosition更新位置重复加标记，如何保留单个标记并更新

你的问题核心是每次GPS位置更新时，都会在回调函数里重新创建新的Marker实例，导致地图上不断添加重复标记。要实现单标记位置更新，只需把标记变量提升到回调外部，复用同一个实例即可：

修改后的代码 #

// 将标记变量放在函数外部，初始化null，确保全局/闭包内唯一
let locs = null;

function getLocation1(){
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(
            (position) => {
                const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };

                // 检查标记是否已存在
                if (!locs) {
                    // 首次定位：创建标记并关联到地图
                    locs = new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: "你的位置",
                    });
                } else {
                    // 后续更新：直接修改已有标记的位置
                    locs.setPosition(pos);
                }

                map.setCenter(pos);
                map.setZoom(17);
            },
            () => {
                handleLocationError(true, infoWindow, map.getCenter());
            }
        );
    } else {
        handleLocationError(false, infoWindow, map.getCenter());
    }
}

关键改动说明 #

• 标记变量全局化/闭包化：把locs移到getLocation1函数外部，避免每次回调执行时重新初始化，保证整个追踪过程只有一个Marker实例。
• 分情况处理标记逻辑：首次定位时创建标记，后续位置更新直接调用setPosition修改坐标，彻底避免重复创建。
• 移除冗余代码：原代码中if (locs == null) { locs.setMap(map); }完全多余——刚创建的Marker不可能为null，且创建时已经通过map参数关联了地图。

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