React中Google Maps可拖拽Marker的新坐标获取方法问询

推荐方案：使用官方封装库 @react-google-maps/api #

这是React生态中最常用的Google Maps封装库，符合组件化开发习惯，无需手动处理原生API的脚本加载和生命周期管理。

步骤1：安装依赖

npm install @react-google-maps/api
# 或
yarn add @react-google-maps/api

步骤2：实现可拖拽Marker并获取坐标

import { useState } from 'react';
import { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';

const DraggableMarkerMap = () => {
  // 初始化Marker坐标（示例为纽约）
  const [markerCoords, setMarkerCoords] = useState({
    lat: 40.7128,
    lng: -74.0060
  });

  // 监听拖拽结束事件，提取新坐标
  const handleDragEnd = (event) => {
    const newLat = event.latLng.lat();
    const newLng = event.latLng.lng();
    setMarkerCoords({ lat: newLat, lng: newLng });
    // 这里可添加后续逻辑，比如提交坐标到后端
    console.log('拖拽后的新坐标：', newLat, newLng);
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '450px' }}
        center={markerCoords}
        zoom={12}
      >
        <Marker
          position={markerCoords}
          draggable={true} // 开启拖拽功能
          onDragEnd={handleDragEnd} // 绑定拖拽结束事件
        />
      </GoogleMap>
    </LoadScript>
  );
};

export default DraggableMarkerMap;

备选方案：直接使用原生Google Maps JS API #

如果需要更底层的控制，可手动集成原生API：

import { useEffect, useState } from 'react';

const NativeDraggableMarkerMap = () => {
  const [markerCoords, setMarkerCoords] = useState({ lat: 40.7128, lng: -74.0060 });
  let mapInstance = null;
  let markerInstance = null;

  useEffect(() => {
    // 加载Google Maps脚本
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY`;
    script.async = true;
    script.onload = initMap;
    document.body.appendChild(script);

    function initMap() {
      // 初始化地图
      mapInstance = new window.google.maps.Map(document.getElementById('native-map'), {
        center: markerCoords,
        zoom: 12
      });

      // 创建可拖拽Marker
      markerInstance = new window.google.maps.Marker({
        position: markerCoords,
        map: mapInstance,
        draggable: true
      });

      // 绑定拖拽结束事件
      markerInstance.addListener('dragend', (event) => {
        const newLat = event.latLng.lat();
        const newLng = event.latLng.lng();
        setMarkerCoords({ lat: newLat, lng: newLng });
        console.log('新坐标：', newLat, newLng);
      });
    }

    // 组件卸载时清理资源
    return () => {
      if (markerInstance) markerInstance.setMap(null);
      if (script) document.body.removeChild(script);
    };
  }, []);

  return <div id="native-map" style={{ width: '100%', height: '450px' }} />;
};

export default NativeDraggableMarkerMap;

核心逻辑说明 #

• 开启拖拽：将Marker的 draggable 属性设为 true
• 获取新坐标：通过拖拽结束事件（onDragEnd 或原生 dragend 监听）的回调参数 event，从 event.latLng 中提取纬度（lat()方法）和经度（lng()方法）
• 状态同步：用React的状态管理（useState）保存坐标，确保UI和数据同步

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