Vue项目中基于vue2-google-maps实现Google Maps多边形绘制问题求助

看起来你已经成功加载了地图，但<gmap-polygon>组件默认只是静态展示多边形，要实现用户交互绘制并保存区域边界的功能，你需要借助Google Maps的DrawingManager工具（vue2-google-maps没有直接封装这个组件，需要手动集成）。下面是一步步的解决方案：

1. 确保引入Drawing库 #

首先检查你的main.js（或项目入口文件）中vue2-google-maps的配置，必须添加drawing库，这是绘制功能的核心依赖：

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: '你的Google Maps API密钥', // 替换成你的密钥
    libraries: 'places,drawing' // 必须包含drawing！
  }
})

另外要确认你的API密钥在Google Cloud控制台中已经启用了Maps JavaScript API和Drawing API，否则会出现权限问题。

2. 修改组件代码实现绘制功能 #

下面是完整的组件代码，包含绘制多边形、捕获路径、保存边界的逻辑：

<template>
  <div>
    <gmap-map 
      ref="map" 
      :center="myCoordinates" 
      :zoom="13" 
      style="width:100%; height: 400px;"
    >
      <!-- 展示已绘制的多边形 -->
      <gmap-polygon 
        v-for="(polygon, index) in savedPolygons" 
        :key="index"
        :paths="polygon.paths"
        :fillColor="'#FF0000'"
        :fillOpacity="0.3"
        :strokeColor="'#FF0000'"
        :strokeOpacity="0.8"
        :strokeWeight="2"
      ></gmap-polygon>
    </gmap-map>
    <div style="margin-top:10px;">
      <button @click="enablePolygonDrawing">开始绘制多边形</button>
      <button @click="clearDrawings">清除已绘制图形</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GeoMap',
  data() {
    return {
      myCoordinates: { lat: 10.3157, lng: 123.8854 },
      map: null,
      drawingManager: null,
      savedPolygons: [] // 保存已绘制的多边形数据
    };
  },
  created() {
    this.$getLocation({})
      .then(coordinates => {
        this.myCoordinates = coordinates;
        console.log(coordinates);
      }).catch(error => {
        alert(error);
      });
  },
  mounted() {
    // 等待地图加载完成后初始化DrawingManager
    this.$refs.map.$mapPromise.then(map => {
      this.map = map;
      this.initDrawingManager();
    });
  },
  methods: {
    initDrawingManager() {
      // 创建DrawingManager实例
      this.drawingManager = new window.google.maps.drawing.DrawingManager({
        drawingMode: null, // 默认不开启绘制
        drawingControl: true,
        drawingControlOptions: {
          position: window.google.maps.ControlPosition.TOP_CENTER,
          drawingModes: [window.google.maps.drawing.OverlayType.POLYGON]
        },
        polygonOptions: {
          fillColor: '#FF0000',
          fillOpacity: 0.3,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          editable: true // 允许用户编辑已绘制的多边形
        }
      });

      // 将DrawingManager绑定到地图上
      this.drawingManager.setMap(this.map);

      // 监听多边形绘制完成事件
      window.google.maps.event.addListener(
        this.drawingManager,
        'polygoncomplete',
        (polygon) => {
          // 提取多边形的路径数据，转换为可保存的格式
          const pathArray = polygon.getPath().getArray().map(latLng => ({
            lat: latLng.lat(),
            lng: latLng.lng()
          }));

          // 保存多边形数据到数组
          this.savedPolygons.push({
            paths: pathArray,
            id: Date.now() // 给每个多边形加唯一标识
          });

          // 关闭绘制模式
          this.drawingManager.setDrawingMode(null);
          console.log('已绘制的多边形路径:', pathArray);
          // 这里可以添加保存到后端的逻辑
        }
      );
    },
    enablePolygonDrawing() {
      // 开启多边形绘制模式
      this.drawingManager.setDrawingMode(window.google.maps.drawing.OverlayType.POLYGON);
    },
    clearDrawings() {
      // 清除所有已绘制的多边形
      this.savedPolygons = [];
      // 重置DrawingManager
      this.drawingManager.setDrawingMode(null);
    }
  }
};
</script>

关键说明 #

• 你之前的代码只使用了静态的<gmap-polygon>，没有实现交互绘制的逻辑，而DrawingManager是Google Maps官方提供的绘制工具，必须手动集成。
• 当用户完成多边形绘制后，polygoncomplete事件会返回绘制好的多边形对象，我们通过getPath().getArray()提取路径坐标，转换为普通的{lat, lng}对象，方便后续保存到后端或本地存储。
• 代码中添加了控制按钮，让用户可以手动开启/关闭绘制模式，以及清除已绘制的图形，提升交互体验。

内容的提问来源于stack exchange，提问作者Mpwanyi Samuel