如何监听Google Maps Drawing Manager用户完成多边形绘制的触发事件

你需要为DrawingManager绑定overlaycomplete事件，该事件会在用户完成任意覆盖物绘制时自动触发，当你设置绘制模式为多边形时，用户点击第一个点位完成闭合的瞬间就会触发这个事件，你可以在回调中过滤多边形类型后执行自定义逻辑。

修改后的完整代码如下：

handleCreate() {
    const { google } = this.props;
    const { maps } = google;

    const drawingManager = new maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: false,
      polygonOptions: { ...EDITABLE_YARD_BOUNDS_STYLE },
    });

    drawingManager.setMap(this.map);

    // 新增绘制完成监听逻辑
    google.maps.event.addListener(drawingManager, 'overlaycomplete', (event) => {
      // 只处理多边形绘制完成的场景
      if (event.type === google.maps.drawing.OverlayType.POLYGON) {
        const completedPolygon = event.overlay;
        // 此处填写你需要执行的自定义逻辑
        // 示例：获取多边形所有顶点坐标 completedPolygon.getPath().getArray()
        console.log('多边形已闭合，绘制完成', completedPolygon.getPath().getArray());

        // 若不需要继续绘制，可手动关闭绘制模式
        drawingManager.setDrawingMode(null);
      }
    });
  }

补充说明 #

• 回调中获取的event.overlay就是刚绘制完成的多边形实例，可直接调用多边形类的所有官方API，比如修改样式、绑定交互事件、提取顶点坐标等。
• 如果需要用户绘制完成后还能调整多边形形状，可给生成的多边形实例添加editable: true属性即可支持拖拽顶点调整。

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