如何在Google Maps中连接外部点生成餐厅配送费层级Polygon

你现在遇到的问题其实很典型：单纯按经纬度排序坐标点，根本没法保证它们能连成规整的多边形——因为这种排序逻辑完全没考虑点相对于餐厅中心的环形位置关系。我给你分享个实战验证过的思路，能直接解决这个问题：

核心解决思路：按「相对于中心的方位角」排序点 #

要画出规整的闭合多边形，关键是让所有点按照环绕餐厅中心的顺时针/逆时针顺序排列，而不是孤立地按lat或lon排序。具体可以分这几步操作：

1. 确定区域中心锚点
   先把餐厅的经纬度作为整个配送区域的中心，比如从你的数据里提取出餐厅的坐标（格式类似{ lat: 餐厅纬度值, lon: 餐厅经度值 }）。

2. 计算每个点的方位角
   对每个配送区域的坐标点，计算它相对于餐厅中心的方位角（简单说就是从中心看向这个点的方向角度）。用这个角度来排序，就能让点自动按环形顺序排列。
   角度计算的代码可以这么写：

   // 计算单个点相对于中心的方位角（从正东开始逆时针计数，范围0-360度）
   function calculatePointAngle(center, point) {
     const deltaLon = point.lon - center.lon;
     const deltaLat = point.lat - center.lat;
     // 用atan2计算弧度，转成角度后调整为非负数
     let angle = Math.atan2(deltaLat, deltaLon) * (180 / Math.PI);
     return angle < 0 ? angle + 360 : angle;
   }
   

3. 按角度排序点数组
   拿到每个点的角度后，对当前配送区域的点数组按角度从小到大排序，这样点的顺序就会是围绕中心的环形顺序，连接起来就不会出现交叉混乱的情况了。
   排序逻辑示例：

   // center是餐厅坐标对象，zonePoints是当前配送区域的所有点数组
   const sortedPoints = zonePoints.sort((pointA, pointB) => {
     const angleA = calculatePointAngle(center, pointA);
     const angleB = calculatePointAngle(center, pointB);
     return angleA - angleB;
   });
   

4. 确保多边形闭合
   排序完成后，记得把数组的第一个点再添加到数组末尾，这样生成的Polygon才是完整的闭合图形。

适配你的现有代码 #

你可以把这段排序逻辑替换掉原来按lat/lon排序的代码——原来的排序方式只适合矩形等规则图形，对不规则的配送区域完全不适用。替换后生成的Polygon应该就能和示例图一样规整了。

额外注意事项 #

• 如果你的点数据里有重复坐标，记得先去重再排序，避免图形出现异常；
• 要确保所有点都是区域的外围点，没有误混入内部点，否则排序后还是可能出现奇怪的交叉。

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