如何在overlaycomplete函数中引用刚绘制的多边形并计算其面积？

嘿，我看你在实现多多边形面积计算功能时，遇到了overlaycomplete事件触发后无法引用刚绘制多边形的问题——其实这个问题的解法很直接，核心就藏在事件回调的参数里，咱们来一步步搞定它：

关键知识点：直接使用事件回调里的e.overlay #

在overlaycomplete的回调函数中，参数e包含了刚完成绘制的覆盖物的所有信息，其中e.overlay就是刚创建的多边形实例，你可以直接用它来做面积计算、样式修改等后续操作。

修正后的完整代码示例 #

// 初始化存储所有覆盖物的数组
const all_overlays = [];

// 监听绘制完成事件
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
  // 将当前覆盖物存入数组（方便后续管理所有绘制的图形）
  all_overlays.push(e);

  // 判断当前绘制的是否为多边形
  if (e.type === 'polygon') {
    // 直接获取刚绘制的多边形实例
    const currentPolygon = e.overlay;

    // 获取多边形的路径（简单无孔洞多边形用getPath()即可）
    const polygonPath = currentPolygon.getPath();

    // 计算面积（默认单位是平方米，可自行转换）
    const areaInSquareMeters = google.maps.geometry.spherical.computeArea(polygonPath);
    const areaInSquareKm = (areaInSquareMeters / 1000000).toFixed(2);

    // 示例：打印面积到控制台，也可以渲染到页面上
    console.log(`刚绘制的多边形面积：${areaInSquareKm} 平方千米`);

    // 额外操作：给多边形设置样式，方便区分
    currentPolygon.setOptions({
      fillColor: '#2ecc71',
      fillOpacity: 0.4,
      strokeColor: '#27ae60'
    });
  }
});

补充说明 #

1. 复杂多边形（带孔洞）的处理：如果需要支持带孔洞的多边形，要改用getPaths()遍历所有路径（外环+内环），分别计算面积后求和：

const paths = currentPolygon.getPaths();
let totalArea = 0;
paths.forEach(path => {
  totalArea += google.maps.geometry.spherical.computeArea(path);
});

2. 后续引用已绘制的多边形：存入all_overlays数组后，你可以通过索引访问任意已绘制的多边形，比如all_overlays[0].overlay就能拿到第一个绘制的多边形实例。

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