如何在react-map-gl中获取移动后Mapbox地图的中心坐标

可以实现，有两种常用实现方式：

方案一：直接使用已有的viewport状态 #

你当前代码里的viewport状态已经由onViewportChange事件实时同步地图的最新参数，其中的latitude、longitude字段就是地图当前的中心坐标，直接取值使用即可：

const [viewport, setViewport] = React.useState({
    latitude: 44.568127,
    longitude: 14.075559,
    zoom: 2,
    width: "100vw",
    height: "100vh",
});

// 直接在需要的地方取viewport.latitude、viewport.longitude即可
console.log('当前中心纬度：', viewport.latitude);
console.log('当前中心经度：', viewport.longitude);

return (
  <div>
    <h2>Dashboard</h2>
    <p>当前中心坐标：{viewport.longitude.toFixed(6)}, {viewport.latitude.toFixed(6)}</p>
    <ReactMapGL
      mapboxApiAccessToken={""}
      {...viewport}
      onViewportChange={(viewport) => setViewport(viewport)}
      mapStyle="mapbox://styles/mapbox/streets-v11"
    ></ReactMapGL>
  </div>
);

方案二：通过getMap()调用原生API实现 #

如果你需要调用Mapbox GL原生的getCenter()方法，可以通过给ReactMapGL组件绑定ref来实现：

const [viewport, setViewport] = React.useState({
    latitude: 44.568127,
    longitude: 14.075559,
    zoom: 2,
    width: "100vw",
    height: "100vh",
});
// 创建map ref
const mapRef = React.useRef(null);

// 示例：点击按钮获取原生API返回的中心坐标
const handleGetCenter = () => {
  const mapInstance = mapRef.current?.getMap();
  if (mapInstance) {
    const center = mapInstance.getCenter();
    // center是LngLat对象，包含lng、lat属性
    console.log('原生方法获取的中心坐标：', center.lng, center.lat);
  }
}

return (
  <div>
    <h2>Dashboard</h2>
    <button onClick={handleGetCenter}>获取当前中心坐标</button>
    <ReactMapGL
      ref={mapRef} // 绑定ref
      mapboxApiAccessToken={""}
      {...viewport}
      onViewportChange={(viewport) => setViewport(viewport)}
      mapStyle="mapbox://styles/mapbox/streets-v11"
    ></ReactMapGL>
  </div>
);

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