Javascript 添加一个点来展开多边形，而不在谷歌地图中添加它？

我正在谷歌地图中通过可以拖动的标记构建一个多边形。因此，当有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
]

因此多边形将展开而不是扭曲自身

---

有没有办法做到这一点？或者我只需要告诉用户建立多边形时钟/逆时针？

通过找到最近的边并将其插入第一个顶点之后和该边的第二个顶点之前，最终解决了这个问题。我使用这里的算法在javascript中使用它：

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

给定包含代表多边形顶点的google.maps.Marker对象的gmarkers数组：

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);
}

函数sortPoints2Polygon（）{
if（polyline）polyline.setMap（null）；
点数=[]；
var bounds=new google.maps.LatLngBounds（）；
对于（变量i=0；i

---

您为什么不使用绘图库？可能是@Dr.Molle的副本。嗯，在您提到之前，我不知道该库。