嗨，我来帮你搞定这个需求！Google Maps API完全支持创建多个自定义多边形区域，你只需要调整代码逻辑，让用户能完成一个区域的绘制后无缝启动新的绘制流程。下面是具体的实现方案和代码示例：

核心思路 #

• 维护一个数组存储所有已完成的多边形区域，方便后续计算总面积和费用
• 提供用户交互（按钮或双击）来结束当前区域的绘制，并初始化新的多边形
• 区分正在绘制和已完成的区域样式，提升用户体验

完整代码示例 #

// 存储所有已完成的多边形区域
let polygons = [];
let currentPoly;
let map;

function initMap() {
  // 初始化地图（补全你的中心坐标）
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    mapTypeId: 'satellite',
    center: { lat: 52.486, lng: -1.890 }
  });

  // 启动第一个区域的绘制
  startNewPolygon();

  // 添加"完成当前区域"按钮，放在地图左上角
  const finishBtn = document.createElement('button');
  finishBtn.textContent = '完成当前区域，开始新区域';
  finishBtn.style.cssText = 'position:absolute; top:10px; left:100px; padding:8px 12px; z-index:1000; cursor:pointer;';
  document.getElementById('map').appendChild(finishBtn);

  // 按钮点击事件：完成当前区域并启动新绘制
  finishBtn.addEventListener('click', () => {
    const path = currentPoly.getPath();
    // 确保当前区域至少有3个顶点（形成闭合多边形）
    if (path.getLength() >= 3) {
      polygons.push(currentPoly);
      // 给已完成的区域设置不同样式，和正在绘制的区分开
      currentPoly.setOptions({ 
        fillColor: '#808080', 
        strokeColor: '#333333',
        editable: false // 可选：完成后禁止编辑
      });
      startNewPolygon();
    } else {
      alert('请至少绘制3个顶点来形成闭合区域哦！');
    }
  });
}

// 初始化新的多边形绘制流程
function startNewPolygon() {
  // 创建新的多边形，设置绘制中的样式
  currentPoly = new google.maps.Polygon({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    editable: true, // 允许用户拖拽调整顶点
    map: map
  });

  // 监听地图点击事件，给当前多边形添加顶点
  const addVertexListener = google.maps.event.addListener(map, 'click', (event) => {
    const path = currentPoly.getPath();
    path.push(event.latLng);

    // 当有3个及以上顶点时，允许双击闭合当前区域
    if (path.getLength() >= 3) {
      google.maps.event.addListenerOnce(currentPoly, 'dblclick', () => {
        // 双击后自动完成当前区域
        polygons.push(currentPoly);
        currentPoly.setOptions({ 
          fillColor: '#808080', 
          strokeColor: '#333333',
          editable: false
        });
        // 移除当前的点击监听，避免影响新多边形
        google.maps.event.removeListener(addVertexListener);
        // 启动新区域绘制
        startNewPolygon();
      });
    }
  });
}

// 计算所有区域的总费用示例函数
function calculateTotalCost() {
  if (polygons.length === 0) {
    alert('请先绘制至少一个区域！');
    return;
  }

  let totalArea = 0;
  polygons.forEach(poly => {
    // 使用Google Maps几何库计算面积（需要加载geometry库）
    const area = google.maps.geometry.spherical.computeArea(poly.getPath());
    totalArea += area;
  });

  // 转换单位并计算费用（示例：平方米转平方英尺，每平方英尺0.005美元）
  const squareFeet = totalArea * 10.7639;
  const cost = squareFeet * 0.005;
  alert(`草坪修剪总费用约为：$${cost.toFixed(2)}`);
}

关键注意事项 #

1. 加载几何库：要计算区域面积，你需要在Google Maps API的请求URL中添加几何库参数，示例：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=geometry&callback=initMap" async defer></script>

2. 用户体验优化：可以给已完成的区域添加删除功能（比如右键菜单），方便用户修正错误的区域。
3. 单位转换：computeArea返回的是平方米，你需要根据你的收费标准转换为对应的单位（比如平方英尺、亩等）。

这样调整后，用户就可以依次绘制前花园、后花园等多个区域，然后通过calculateTotalCost函数计算总费用啦！

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