如何通过预定义坐标在Google DrawingManager中预加载多边形

核心思路 #

利用Google Maps原生的Polygon类创建预定义坐标的多边形实例，将其添加到DrawingManager的drawnItems集合中，同时开启多边形的可编辑状态，就能让预加载的图形纳入DrawingManager的编辑体系。

实现步骤与代码示例 #

1. 基础准备

确保你已安装@react-google-maps/api，并且Map组件能正常加载（配置好Google Maps API密钥）。

2. 定义预加载坐标

提前准备好多边形的经纬度数组，格式如下：

const PREDEFINED_POLYGON_COORDS = [
  { lat: 37.772, lng: -122.214 },
  { lat: 21.291, lng: -157.821 },
  { lat: -18.142, lng: 178.431 },
  { lat: -27.467, lng: 153.027 },
];

3. 组件实现逻辑

使用useRef保存Map和DrawingManager实例，在Map加载完成的回调中创建并挂载预加载多边形：

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

const MapWithPreloadedPolygon = () => {
  const mapRef = useRef(null);
  const drawingManagerRef = useRef(null);

  const handleMapLoad = (map) => {
    mapRef.current = map;

    // 确保DrawingManager已初始化
    if (!drawingManagerRef.current) return;

    // 创建预加载多边形
    const preloadedPolygon = new window.google.maps.Polygon({
      path: PREDEFINED_POLYGON_COORDS,
      editable: true, // 开启可编辑
      draggable: true, // 允许拖动
      map: map, // 关联到当前地图
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    });

    // 将多边形添加到DrawingManager的已绘制集合中
    drawingManagerRef.current.drawnItems.push(preloadedPolygon);
  };

  const handleDrawingManagerLoad = (manager) => {
    drawingManagerRef.current = manager;
  };

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '600px' }}
      center={{ lat: 0, lng: 0 }}
      zoom={2}
      onLoad={handleMapLoad}
    >
      <DrawingManager
        onLoad={handleDrawingManagerLoad}
        drawingMode={null} // 初始不进入绘制模式，可根据需求调整
        drawingControl={true}
        drawingControlOptions={{
          position: window.google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [
            window.google.maps.drawing.OverlayType.POLYGON,
          ],
        }}
        polygonOptions={{
          editable: true,
          draggable: true,
        }}
      />
    </GoogleMap>
  );
};

export default MapWithPreloadedPolygon;

关键注意事项 #

• 时机把控：必须在Map和DrawingManager都完成加载后再创建多边形，所以要通过各自的onLoad回调保存实例，确保操作时实例已存在。
• 可编辑状态：创建Polygon时必须设置editable: true，否则无法被DrawingManager编辑。
• drawnItems集合：DrawingManager的drawnItems是一个MVCArray，调用push方法即可将预加载多边形加入可编辑队列。

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