Flutter中如何获取用户绘制的地图区域并在地图上展示

核心实现思路 #

你已经实现了固定区域绘制的基础能力，要支持用户手绘专属区域、且能在任意地图实例上复现，本质是把「绘制交互」和「区域数据」解耦：用官方绘图组件承接用户手绘操作，提取纯结构化的区域地理数据做持久化，需要展示的时候再用数据在目标地图上重新渲染对应形状即可，不需要绑定某一个特定的地图实例。

1. 接入用户手绘能力 #

加载Google Maps JS API时追加drawing库参数，不需要从零手写鼠标绘制、拖拽节点的交互逻辑，直接用内置的DrawingManager组件即可完成全流程交互。
关键实现代码：

// 初始化绘图管理器，配置支持的绘制类型和样式
const drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.RECTANGLE,
      google.maps.drawing.OverlayType.CIRCLE
    ]
  },
  polygonOptions: {
    fillColor: '#4285F4',
    fillOpacity: 0.3,
    strokeWeight: 2,
    editable: true, // 支持绘制完成后拖拽节点调整形状
    zIndex: 1
  }
});
// 把绘图工具挂载到当前地图实例
drawingManager.setMap(map);

// 监听绘制完成事件，提取可复用的区域数据
google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
  // 绘制完成后退出绘制模式，避免用户误操作连续绘图
  drawingManager.setDrawingMode(null);
  let areaData = {};
  // 根据绘制的形状类型提取纯地理数据，不要存overlay实例本身
  switch(e.type) {
    case google.maps.drawing.OverlayType.POLYGON:
      const path = e.overlay.getPath().getArray();
      areaData = {
        type: 'polygon',
        coordinates: path.map(point => ({lat: point.lat(), lng: point.lng()}))
      };
      break;
    case google.maps.drawing.OverlayType.RECTANGLE:
      const bounds = e.overlay.getBounds();
      areaData = {
        type: 'rectangle',
        bounds: {
          north: bounds.getNorthEast().lat(),
          east: bounds.getNorthEast().lng(),
          south: bounds.getSouthWest().lat(),
          west: bounds.getSouthWest().lng()
        }
      };
      break;
    case google.maps.drawing.OverlayType.CIRCLE:
      areaData = {
        type: 'circle',
        center: {lat: e.overlay.getCenter().lat(), lng: e.overlay.getCenter().lng()},
        radius: e.overlay.getRadius()
      };
      break;
  }
  // 持久化areaData即可，本地用存localStorage，跨端用存后端数据库
  console.log('提取的可复用区域数据：', areaData);
});

2. 跨地图实例渲染已保存的区域 #

因为你存的是纯经纬度、边界、半径这类通用地理数据，和具体地图实例没有绑定关系，只要初始化了任意Google Maps实例，把数据传入就能渲染出和用户手绘完全一致的区域：

/**
 * 在指定地图上渲染已保存的自定义区域
 * @param {Object} targetMap 目标Google Maps实例
 * @param {Object} savedAreaData 之前持久化存储的区域数据
 */
function renderCustomArea(targetMap, savedAreaData) {
  let areaOverlay;
  switch(savedAreaData.type) {
    case 'polygon':
      areaOverlay = new google.maps.Polygon({
        paths: savedAreaData.coordinates,
        fillColor: '#4285F4',
        fillOpacity: 0.3,
        strokeWeight: 2,
        editable: false // 如果需要二次编辑可以设为true
      });
      break;
    case 'rectangle':
      areaOverlay = new google.maps.Rectangle({
        bounds: savedAreaData.bounds,
        fillColor: '#4285F4',
        fillOpacity: 0.3,
        strokeWeight: 2
      });
      break;
    case 'circle':
      areaOverlay = new google.maps.Circle({
        center: savedAreaData.center,
        radius: savedAreaData.radius,
        fillColor: '#4285F4',
        fillOpacity: 0.3,
        strokeWeight: 2
      });
      break;
  }
  if (areaOverlay) areaOverlay.setMap(targetMap);
}

避坑提示 #

• 持久化时不要直接存储Google Maps生成的Overlay实例或者LatLng类对象，这类对象绑定了当前地图上下文，换实例后无法直接使用，一定要提取成纯数值的经纬度、半径、边界数据
• 如果需要支持用户后续修改已绘制的区域，可以给渲染后的Overlay绑定编辑事件，节点调整后重新提取坐标更新存储的数据即可
• 如果需要在非Google Maps的其他地图平台展示该区域，只需要把存储的经纬度数据按照对应平台的图形API传入即可，WGS84坐标系的经纬度数据是通用的，不需要额外做复杂转换

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