React Map GL获取viewport中心坐标 实现标记点默认定位屏幕中心

核心实现逻辑 #

React Map GL 本身提供了直接获取视口中心坐标的能力，根据你使用的版本不同，对应两种获取方式：

• 受控Viewport模式（v6及更早版本通用）：你维护的viewport状态对象的longitude、latitude属性就是当前视口的中心坐标，直接读取即可。
• 非受控/useMap模式（v7+推荐）：通过useMap()钩子获取地图实例后，调用map.getCenter().lng、map.getCenter().lat即可获取实时中心坐标。

完整实现示例 #

以下是可直接运行的代码示例，满足「创建告警时标记默认在视口中心、支持拖拽调整」的需求：

import { useState, useCallback } from 'react';
import Map, { Marker } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

function AlertMap() {
  // 存储视口状态
  const [viewport, setViewport] = useState({
    longitude: 116.4074,
    latitude: 39.9042,
    zoom: 10
  });
  // 存储告警标记坐标，初始为null时隐藏标记
  const [alertMarker, setAlertMarker] = useState(null);

  // 创建告警的触发函数
  const handleCreateAlert = useCallback(() => {
    // 取点击瞬间的视口中心作为标记初始坐标
    setAlertMarker({
      lng: viewport.longitude,
      lat: viewport.latitude
    });
  }, [viewport]);

  // 拖拽结束后更新标记坐标
  const handleMarkerDragEnd = useCallback((e) => {
    setAlertMarker({
      lng: e.lngLat.lng,
      lat: e.lngLat.lat
    });
  }, []);

  return (
    <div>
      <button onClick={handleCreateAlert}>创建告警</button>
      <Map
        {...viewport}
        onMove={evt => setViewport(evt.viewState)}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={替换为你自己的Mapbox密钥}
      >
        {alertMarker && (
          <Marker
            longitude={alertMarker.lng}
            latitude={alertMarker.lat}
            draggable
            onDragEnd={handleMarkerDragEnd}
          >
            {/* 可自定义标记样式 */}
            <div style={{color: 'red', fontSize: '24px'}}>📍</div>
          </Marker>
        )}
      </Map>
    </div>
  );
}

注意事项 #

• 不要将标记坐标与viewport状态实时绑定，仅在创建告警的瞬间读取一次当前视口中心即可，避免用户移动地图时标记同步位移。
• 若使用v7+非受控地图模式，仅需替换handleCreateAlert的坐标获取逻辑为从map实例取值即可，无需维护全量viewport状态。
• Marker组件开启draggable属性后默认支持拖拽操作，无需额外监听触摸、鼠标事件。

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