@react-google-maps/api中无法获取Polygon组件paths的问题求助

问题根源 #

你遇到的差异是因为Polygon和Circle的Google Maps原生对象属性结构不同：

• Circle的center、radius是基础类型或简单对象，直接通过ref访问就能拿到最新值；
• Polygon的paths是**google.maps.MVCArray类型**，这是Google Maps的响应式数组结构，直接访问polygonRef.current.paths可能拿到旧的引用，尤其是在拖拽、编辑操作后，MVCArray内部值更新但外部引用未同步。

解决方案 #

以下是TS环境下的完整修复方案，核心是正确读取MVCArray并转换成普通数组，同时监听正确的事件触发更新：

1. 正确定义Ref类型

确保ref指向Google Maps原生的Polygon实例，避免any类型导致的类型错误：

const polygonRef = useRef<google.maps.Polygon>(null);

2. 编写路径转换逻辑

通过getPaths()方法获取最新的MVCArray，再转换成可直接使用的普通数组：

const getUpdatedPaths = () => {
  if (!polygonRef.current) return [];
  
  // 获取最新的paths集合（MVCArray）
  const pathsMVCArray = polygonRef.current.getPaths();
  // 转换为普通数组：MVCArray -> 数组，LatLng对象 -> {lat, lng}
  return pathsMVCArray.getArray().map(path => 
    path.getArray().map(latLng => ({
      lat: latLng.lat(),
      lng: latLng.lng()
    }))
  );
};

3. 监听操作结束事件

监听Polygon的dragend（整体拖拽结束）和mouseup（顶点编辑结束）事件，确保在操作完成后获取最新路径：

useEffect(() => {
  const polygon = polygonRef.current;
  if (!polygon) return;

  // 绑定事件监听
  const dragendHandler = polygon.addListener('dragend', () => {
    const updatedPaths = getUpdatedPaths();
    console.log('拖拽后路径：', updatedPaths);
    // 这里可将路径存入状态或进行其他业务处理
  });

  const mouseupHandler = polygon.addListener('mouseup', () => {
    const updatedPaths = getUpdatedPaths();
    console.log('编辑顶点后路径：', updatedPaths);
  });

  // 组件卸载时清理监听
  return () => {
    dragendHandler.remove();
    mouseupHandler.remove();
  };
}, []);

完整TS组件示例

import { GoogleMap, Polygon, useLoadScript } from '@react-google-maps/api';
import { useRef, useEffect } from 'react';

const PolygonMap = () => {
  const { isLoaded } = useLoadScript({ googleMapsApiKey: '你的API密钥' });
  const polygonRef = useRef<google.maps.Polygon>(null);

  const getUpdatedPaths = () => {
    if (!polygonRef.current) return [];
    
    const pathsMVCArray = polygonRef.current.getPaths();
    return pathsMVCArray.getArray().map(path => 
      path.getArray().map(latLng => ({
        lat: latLng.lat(),
        lng: latLng.lng()
      }))
    );
  };

  useEffect(() => {
    const polygon = polygonRef.current;
    if (!polygon) return;

    const dragendHandler = polygon.addListener('dragend', () => {
      const paths = getUpdatedPaths();
      // 处理更新后的路径
      console.log('拖拽完成：', paths);
    });

    const mouseupHandler = polygon.addListener('mouseup', () => {
      const paths = getUpdatedPaths();
      // 处理更新后的路径
      console.log('顶点编辑完成：', paths);
    });

    return () => {
      dragendHandler.remove();
      mouseupHandler.remove();
    };
  }, []);

  if (!isLoaded) return <div>地图加载中...</div>;

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '500px' }}
      center={{ lat: 40.7128, lng: -74.0060 }}
      zoom={12}
    >
      <Polygon
        ref={polygonRef}
        paths={[
          [{ lat: 40.7128, lng: -74.0060 }, { lat: 40.7328, lng: -74.0060 }, { lat: 40.7328, lng: -73.9860 }]
        ]}
        editable={true}
        draggable={true}
        strokeColor="#FF0000"
        strokeOpacity={0.8}
        strokeWeight={2}
        fillColor="#FF0000"
        fillOpacity={0.35}
      />
    </GoogleMap>
  );
};

export default PolygonMap;

关键注意事项 #

• 必须使用getPaths()而非直接访问polygonRef.current.paths：MVCArray的内部更新不会同步到外部直接访问的引用，getPaths()会返回最新的响应式数组实例。
• 复杂多边形（带孔洞）的处理：getPaths()返回的MVCArray中每个元素对应一个多边形环（外框或孔洞），所以需要两层getArray()转换，示例代码已兼容这种场景。
• 避免在渲染阶段访问ref：确保ref已挂载完成后再调用getUpdatedPaths()，事件回调或useEffect是安全的时机。

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