JavaScript/Google Maps新手求教：如何简便计算用户绘制多边形的面积？

嘿，作为Google Maps的新手，你已经迈出了很棒的第一步！要计算用户绘制的多边形面积其实很简单，Google Maps API自带了专门的几何工具库，咱们直接用它就行。我来帮你修改代码，实现这个功能：

首先，一定要记得在加载Google Maps API的时候引入geometry库，不然计算面积的方法用不了。比如你的API脚本应该像这样（替换成你的API密钥）：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing,geometry&callback=initMap" async defer></script>

接下来修改你的initMap函数，添加一个事件监听器，当用户完成多边形绘制时自动计算面积：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 53, lng: 0 },
    zoom: 13
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON, // 直接默认进入多边形绘制模式更方便
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
    polygonOptions: { // 这里要改成polygonOptions，之前你写的是circleOptions哦
      fillColor: '#ffff00',
      fillOpacity: 0.5,
      strokeWeight: 2,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  // 监听多边形绘制完成事件
  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    // 获取多边形的路径点
    var path = polygon.getPath();
    // 计算面积，默认单位是平方米
    var area = google.maps.geometry.spherical.computeArea(path);
    
    // 可以把面积转换成更易读的单位，比如平方千米或者公顷
    var areaKm2 = (area / 1000000).toFixed(2);
    var areaHectare = (area / 10000).toFixed(2);

    // 把结果显示出来，比如在页面上添加一个元素
    var areaDisplay = document.getElementById('area-display');
    areaDisplay.innerHTML = `
      多边形面积：<br>
      ${area.toFixed(0)} 平方米<br>
      ${areaKm2} 平方千米<br>
      ${areaHectare} 公顷
    `;
  });
}

然后修改你的HTML，添加一个用来显示面积的容器：

<div>
  <div id="area-display" style="padding: 10px; font-size: 16px; font-weight: bold;"></div>
  <div id="map" style="width: 100%; height: 500px;"></div>
</div>

关键说明： #

• google.maps.geometry.spherical.computeArea() 是API提供的核心方法，它接受多边形的路径（MVCArray类型）作为参数，返回的面积单位是平方米。
• 我把默认的绘制模式改成了POLYGON，这样用户打开页面就能直接画多边形，不用切换；同时修正了之前的circleOptions为polygonOptions，因为你只需要多边形功能。
• 添加了单位转换，把平方米转成平方千米和公顷，这样结果更直观。

现在当你画完多边形，页面上方就会自动显示计算好的面积啦！

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