React配合react-map-gl实现点击地图添加单个标记的问题如何解决

你遇到的问题可以通过以下两步修改解决：

1. 将lngLat的默认值设为null，避免初始化就有坐标值触发标记渲染
2. 给Marker组件增加条件渲染逻辑，仅当lngLat有有效值时才渲染标记，避免空值读取数组下标报错

修改后的完整代码如下：

// 初始值设为null
const [lngLat, setLngLat] = useState(null);

function addMarker(event) {
  const coordinates = event.lngLat;
  setLngLat(coordinates);
  // 注意：state更新是异步的，直接打印lngLat拿不到最新值，需要的话可以直接打印coordinates
  console.log(coordinates);
}

return (
  <div>
    <h2>Dashboard</h2>
    <ReactMapGL
      mapboxApiAccessToken={/* 这里填入你自己的mapbox access token */}
      {...viewport}
      onViewportChange={(viewport) => setViewport(viewport)}
      mapStyle="mapbox://styles/mapbox/streets-v11"
      onClick={addMarker}
    >
      {/* 增加条件判断，只有lngLat有值时才渲染Marker */}
      {lngLat && (
        <Marker latitude={lngLat[1]} longitude={lngLat[0]}>
          <div>TEST</div>
        </Marker>
      )}
    </ReactMapGL>
  </div>
);

另外注意你原代码中useState里的0 0存在语法错误，中间缺少逗号，修改时记得修正即可。这种写法下首次加载页面不会显示标记，用户点击后才会渲染标记，每次点击新位置都会自动替换旧标记，全程地图上最多只会存在1个标记。

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