Add a point to expand polygon without appending it in Google Maps?

问题

I'm building a polygon in Google Maps through markers that can be dragged to reshape it. So, when there are 3 markers, the polygon is drawn, and further markers are appended in the shape, expanding it. That's fine when the user just want to follow a simple clockwise/counterclockwise pattern, but when he wants to expand the polygon through one of its edges, instead it will append the marker, twisting itself.

Here in this example, if we add markers 1, 2 and 3, it will be drawn a simple triangle. But if marker 4 is added, the polygon just twists itself.

Instead, I want when 4 is added, it's inserted between markers 1 and 2, like this image:

Basically, in the polygon's vertex array, instead of:

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

I want to have:

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

So the polygon will expand instead of twist itself.

Is there a way to achieve this? Or I just will have to tell the user to build his polygon clock/counterclockwise?

回答1:

General solution (find a center point, sort the points in order of heading from that point, using geometry library computeHeading method).

given an array gmarkers containing google.maps.Marker objects representing the vertices of the polygon:

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)

回答2:

Finally solved it via finding the nearest edge and inserting it after the first vertex and before the second one of this edge. I used the algorithm from here to use it in javascript:

Shortest distance between a point and a line segment

来源：https://stackoverflow.com/questions/24047932/add-a-point-to-expand-polygon-without-appending-it-in-google-maps