javascript - 添加一个点以扩展多边形而不将其附加到 Google map 中？

Question

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

在此示例中，如果我们添加标记 1、2 和 3，它将绘制一个简单的三 Angular 形。但是，如果添加标记 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
]

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

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

Answer 1

一般解决方案(找到一个中心点，使用几何库 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);
}

working example (starts with 3 random points)