Dodaj punkt, aby rozwinąć wielokąt bez dołączania go w Google Maps?

Question

Buduję wielokąt w Mapach Google za pomocą znaczników, które można przeciągać w celu zmiany kształtu. Tak więc, gdy są 3 znaczniki, wielokąt jest rysowany, a dalsze znaczniki są dołączane do kształtu, rozszerzając go. To dobrze, gdy użytkownik chce po prostu wykonać prosty wzór zgodny z ruchem wskazówek zegara/przeciwny do ruchu wskazówek zegara, ale gdy chce rozszerzyć wielokąt poprzez jedną z jego krawędzi, zamiast tego doda znacznik, obracając się.

Tu, w tym przykładzie, jeśli dodamy znaczniki 1, 2 i 3, zostanie sporządzony prostego trójkąta. Ale jeśli dodany zostanie znacznik 4, wielokąt tylko się przekręca.

Zamiast tego, chcę po 4 dodaje, jest wstawiony pomiędzy znacznikami 1 i 2, jak ten obraz:

Zasadniczo, w wierzchołku tablicy wielokąta, zamiast:

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

chcę mieć:

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

Więc wielokąt rozszerzy się zamiast obracać.

Czy istnieje sposób, aby to osiągnąć? Czy po prostu będę musiał powiedzieć użytkownikowi, aby zbudował swój zegar wieloboczny/przeciwnie do ruchu wskazówek zegara?

Answer 1

Ostatecznie rozwiązano poprzez znalezienie najbliższego brzegu i wstawienie go po pierwszym wierzchołku i przed drugim wierzchołkiem. Użyłem algorytmu stąd go używać w javascript:

Shortest distance between a point and a line segment

Answer 2

rozwiązanie ogólne (znaleźć punkt środkowy, sortowania punktów w kolejności pozycji z tego punktu, wykorzystując metodę computeHeading geometrii biblioteki).

punktację gmarkers tablicę zawierającą obiekty google.maps.Marker reprezentujące wierzchołki wielokąta:

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)