我来帮你搞定这个重复标记的问题，其实有两种非常靠谱的思路，咱们一步步说：

方案一：清除历史标记后添加新标记 #

核心逻辑是保存所有已创建标记的引用，每次点击按钮时，先把之前的标记全部移除干净，再添加新的标记，彻底避免旧标记残留。

代码示例 #

// 在全局或合适的作用域里声明数组，用来存储所有标记实例
let markers = [];

// 按钮点击的处理函数
function handleGetLocation() {
  // 第一步：移除所有旧标记
  markers.forEach(marker => {
    // 注意：不同地图API的移除方法有差异，按需调整：
    // Google Maps 用 marker.setMap(null)
    // 百度/高德地图 用 marker.remove()
    marker.remove(); 
  });
  // 清空数组，避免残留无效引用
  markers = [];

  // 第二步：获取当前位置并添加新标记
  navigator.geolocation.getCurrentPosition(position => {
    const targetLatLng = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
    };

    // 创建新标记并绑定到地图
    const newMarker = new Marker({
      position: targetLatLng,
      map: yourMapInstance // 替换成你的地图实例变量名
    });

    // 将新标记存入数组，方便下次移除操作
    markers.push(newMarker);
  });
}

方案二：复用单个标记，仅更新位置 #

这个方案更高效，不需要每次创建新的Marker实例，只在第一次点击时初始化标记，之后每次获取位置后直接更新标记的坐标即可，减少DOM操作开销。

代码示例 #

// 在全局或合适的作用域里声明单个标记变量
let currentLocationMarker = null;

// 按钮点击的处理函数
function handleGetLocation() {
  navigator.geolocation.getCurrentPosition(position => {
    const targetLatLng = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
    };

    if (!currentLocationMarker) {
      // 第一次点击：创建标记并添加到地图
      currentLocationMarker = new Marker({
        position: targetLatLng,
        map: yourMapInstance // 替换成你的地图实例变量名
      });
    } else {
      // 非第一次点击：直接更新标记的位置
      // 注意：不同地图API的更新方法有差异，按需调整：
      // Google Maps 用 currentLocationMarker.setPosition(targetLatLng)
      // Mapbox 用 currentLocationMarker.setLngLat(targetLatLng)
      // 百度地图 用 currentLocationMarker.setPosition(targetLatLng)
      currentLocationMarker.setPosition(targetLatLng);
    }
  });
}

小提醒 #

不同地图API（比如Google Maps、百度地图、高德地图等）在标记的创建、移除、位置更新方法上可能略有差异，你需要根据自己使用的库调整对应的方法名，但核心逻辑是通用的。

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