添加一个点来扩展多边形而不将其附加到 Google 地图中？

我正在通过标记在 Google 地图中构建一个多边形，可以拖动这些标记来重塑它的形状。因此，当有 3 个标记时，将绘制多边形，并在形状中附加更多标记，将其扩展。当用户只想遵循简单的顺时针/逆时针模式时，这很好，但是当他想要通过其边缘之一扩展多边形时，它会附加标记，并扭曲自身。

在此示例中，如果我们添加标记 1、2 和 3，则会绘制一个简单的三角形。但如果添加标记 4，多边形就会自行扭曲。

相反，我希望在添加 4 时，将其插入到标记 1 和 2 之间，如下图所示：

基本上，在多边形的顶点数组中，而不是：

[
    //marker 1 position,
    //marker 2 position,
    //marker 3 position,
    //current marker 4 position
]

我希望有：

[
    //marker 1 position,
    //desired marker 4 position
    //marker 2 position,
    //marker 3 position
]

所以多边形会膨胀而不是扭曲本身。

有办法实现这一点吗？或者我只需要告诉用户构建他的多边形时钟/逆时针？

一般解决方案（找到一个中心点，使用几何库的computeHeading方法，按照从该点开始的方向对点进行排序）。

给定一个数组 gmarkers ，其中包含表示多边形顶点的 google.maps.Marker 对象：

function sortPoints2Polygon() {
      if (polyline) polyline.setMap(null);
      points = [];
      var bounds = new google.maps.LatLngBounds(); 
      for (var i=0; i < gmarkers.length; i++) {
        points.push(gmarkers[i].getPosition());
    bounds.extend(gmarkers[i].getPosition());
      }
      var center = bounds.getCenter();
      var bearing = [];
      for (var i=0; i < points.length; i++) {
        points[i].bearing = google.maps.geometry.spherical.computeHeading(center,points[i]);
      }
      points.sort(bearingsort);
      polyline = new google.maps.Polygon({
        map: map,
        paths:points, 
        fillColor:"#FF0000",
        strokeWidth:2, 
        fillOpacity:0.5, 
        strokeColor:"#0000FF",
        strokeOpacity:0.5
      });
}

function bearingsort(a,b) {
  return (a.bearing - b.bearing);
}

工作示例（从 3 个随机点开始） http://www.geocodezip.com/v3_map-markers_sortPoints2Polygon.html