Mapbox开发中marker调用setLngLat更新位置不生效问题排查

根因定位 #

• 已经成功添加到地图的Marker实例，不需要重复执行addTo(map)方法。你在点击事件中重复调用该方法会触发原有Marker的卸载重挂载逻辑，最终表现为原有标记消失、新位置没有渲染出标记。
• 额外隐患：你在React组件顶层用普通let声明marker实例，组件重渲染时该变量会被重置，可能导致后续操作找不到实例；局部声明的map实例也没有持久化存储，后续交互容易出现作用域问题。

修复代码 #

import { useEffect, useRef } from 'react'
import mapboxgl from 'mapbox-gl'

// 用useRef存储跨渲染周期的实例，避免重渲染丢失
const mapRef = useRef(null)
const markerRef = useRef(null)

useEffect(() => {
  initMap()
}, [])

const initMap = () => {
  mapboxgl.accessToken = '*******1g';
  if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {
    mapboxgl.setRTLTextPlugin(
      'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
      null,
      true
    );
  }

  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [51.446558, 33.980739],
    zoom: 12,
    textAlign: 'left'
  });
  // 存储map实例到ref
  mapRef.current = map

  map.on('click', function (e) {
    const coordinates = e.lngLat;
    // 仅调用setLngLat即可更新位置，无需重复addTo
    markerRef.current?.setLngLat(coordinates)
  });

  setTimeout(() => {
    initMapMarker(map, 51.41691337396722, 34.022980413997786)
  }, 1000);
}

const initMapMarker = (map, initLon, initLat) => {
  // 初始化marker实例存入ref，不要在顶层初始化
  markerRef.current = new mapboxgl.Marker({ color: 'red', draggable: true })
  markerRef.current
    .setLngLat([initLon, initLat])
    .addTo(map);

  markerRef.current.on('dragend', () => {
    const lngLat = markerRef.current.getLngLat();
    getFormatedAddress(lngLat)
  });
}

修改点说明 #

• 移除点击事件中多余的addTo(map)调用，已挂载的Marker调用setLngLat会自动更新渲染位置
• 用React的useRef存储map和marker实例，避免组件重渲染时实例丢失
• 将marker的初始化逻辑移到initMapMarker中，仅在需要时创建实例，避免无用实例提前创建带来的异常

内容的提问来源于stack exchange，提问作者S.M_Emamian