Google Maps中通过overlaycomplete回调计算绘制图形面积的问题

你遇到的getPaths is not a function错误，核心原因是不同类型的绘制图形（Circle、Rectangle、Polygon）的API方法不一样：getPaths()是Polygon专属的方法，Circle和Rectangle并没有这个方法，直接调用自然会报错。下面我会一步步给你修正代码，同时实现计算每种图形面积的功能。

关键知识点：不同图形的属性获取方式 #

首先得明确每种绘制完成的图形，怎么获取它的形状数据：

• Circle：通过overlay.getCenter()获取圆心坐标，overlay.getRadius()获取半径（单位是米）
• Rectangle：通过overlay.getBounds()获取边界范围，我们可以把这个边界转换成Polygon的路径，再用Geometry库计算面积
• Polygon：通过overlay.getPaths()获取顶点路径，直接用Geometry库计算面积

修正后的完整代码 #

我已经调整了你的代码，修复了getPaths的错误，同时添加了面积计算的逻辑：

<div id="map"></div> 
<script> 
var map; 
var allCircles = new Array(); 
var allRectangles = new Array(); 
var allPolygons = new Array(); 

function initMap() { 
  map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 13 
  }); 

  var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
    drawingControl: true, 
    drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: ['circle','polygon','rectangle'] 
    }, 
    circleOptions: { 
      fillColor: '#888888', 
      fillOpacity: 0.7, 
      strokeWeight: 2, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
    }, 
    rectangleOptions: { 
      fillColor: '#888888', 
      fillOpacity: 0.7, 
      strokeWeight: 2, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
    }, 
    polygonOptions: { 
      fillColor: '#888888', 
      fillOpacity: 0.7, 
      strokeWeight: 2, 
      clickable: false, 
      editable: true, 
      zIndex: 1 
    } 
  }); 

  drawingManager.setMap(map); 

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { 
    var overlay = event.overlay; // 获取绘制完成的图形对象
    var area;

    switch(event.type) {
      case 'circle':
        // 计算圆的面积：π * 半径²（如果需要球面精确面积，可将圆转为近似多边形后用computeArea）
        var radius = overlay.getRadius();
        area = Math.PI * radius * radius;
        allCircles.push(overlay); // 把完整的Circle对象存入数组
        console.log("Circle area: " + area + " 平方米");
        break;
      case 'rectangle':
        // 把Rectangle的Bounds转换成Polygon路径，再计算球面面积
        var bounds = overlay.getBounds();
        var path = [
          bounds.getSouthWest(),
          bounds.getNorthWest(),
          bounds.getNorthEast(),
          bounds.getSouthEast(),
          bounds.getSouthWest()
        ];
        area = google.maps.geometry.spherical.computeArea(path);
        allRectangles.push(overlay); // 存入Rectangle对象
        console.log("Rectangle area: " + area + " 平方米");
        break;
      case 'polygon':
        // Polygon直接用getPaths获取路径计算面积
        var paths = overlay.getPaths();
        area = google.maps.geometry.spherical.computeArea(paths);
        allPolygons.push(overlay); // 存入Polygon对象
        console.log("Polygon area: " + area + " 平方米");
        break;
    }
  }); 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&libraries=drawing,geometry&callback=initMap" async defer></script>

代码说明 #

1. 获取正确的overlay对象：event.overlay才是绘制完成的图形实例（Circle/Rectangle/Polygon），你之前错误地直接在event对象上调用getPaths()，这是问题的根源。
2. 分类型处理面积计算：
   • 圆形：用基础的圆面积公式计算；如果需要球面精确面积，可以把圆生成多个顶点近似成多边形，再用computeArea计算
   • 矩形：将边界的四个角点组成闭合路径，用Geometry库的spherical.computeArea计算球面面积
   • 多边形：直接用getPaths()获取路径，再调用computeArea
3. 存储完整对象：把整个overlay对象存入数组，而不是只存路径，后续编辑或删除图形时会更灵活。

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