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

Question

我正在谷歌地图中通过可以拖动来重塑它的标记来构建多边形.因此,当有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
]

因此多边形将扩展而不是扭曲本身.

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

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

工作实例(从3个随机点开始)

Answer 2

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

点与线段之间的最短距离