解决Mapbox地理编码查询时重复添加可拖拽标记的问题

问题根源在于每次触发result事件时，你都会创建一个全新的Marker实例并添加到地图，导致标记不断累积。只需通过复用同一个标记实例即可解决，修改后的代码如下：

// 声明外部作用域的变量，用于保存当前标记
let currentMarker = null;

const geocoder = new MapboxGeocoder({
      mapboxgl: mapboxgl,
      accessToken: mapboxgl.accessToken,
      marker: false
    })

geocoder.on('result', e => {
  if (currentMarker) {
    // 已有标记时，直接更新其位置
    currentMarker.setLngLat(e.result.center);
  } else {
    // 无标记时，创建新标记并添加到地图
    currentMarker = new mapboxgl.Marker({
      draggable: true
    })
    .setLngLat(e.result.center)
    .addTo(map);
    
    // 仅绑定一次拖拽结束事件
    currentMarker.on('dragend', () => {
      // 可在此添加拖拽结束后的逻辑，比如获取最新坐标
      const newLngLat = currentMarker.getLngLat();
      console.log('拖拽后坐标：', newLngLat.lng, newLngLat.lat);
    });
  }
})

map.addControl(geocoder);

关键修改说明 #

• 将标记变量currentMarker提升到事件回调外部，确保每次查询都能访问到同一个实例
• 触发result事件时先检查标记是否存在：存在则更新位置，不存在才创建新标记
• dragend事件仅在首次创建标记时绑定一次，避免重复绑定导致的冗余逻辑

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