Aggiungi un punto per espandere il poligono senza aggiungerlo in Google Maps?

Question

Sto costruendo un poligono in Google Maps tramite marcatori che possono essere trascinati per rimodellarlo. Quindi, quando ci sono 3 marcatori, il poligono viene disegnato e altri marcatori vengono aggiunti alla forma, espandendola. Va bene quando l'utente vuole semplicemente seguire un semplice pattern in senso orario/antiorario, ma quando vuole espandere il poligono attraverso uno dei suoi bordi, invece, aggiungerà il marker, torcendosi.

Qui, in questo esempio, se si aggiunge marcatori 1, 2 e 3, verrà tracciato un triangolo semplice. Ma se viene aggiunto il marcatore 4, il poligono si torce da solo.

Invece, voglio quando 4 è aggiunto, viene inserito tra i marcatori 1 e 2, come questa immagine:

In sostanza, nella matrice vertice del poligono, invece di:

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

voglio avere:

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

Così il poligono si espanderà invece di girare se stesso.

C'è un modo per raggiungere questo obiettivo? O dovrò solo dire all'utente di costruire il suo orologio poligonale/in senso antiorario?

Answer 1

Finalmente risolto risolvendo il bordo più vicino e inserendolo dopo il primo vertice e prima del secondo di questo bordo. Ho usato l'algoritmo da qui a utilizzarlo in javascript:

Shortest distance between a point and a line segment

Answer 2

soluzione generale (trovare un punto centrale, ordinare i punti in ordine di voce da quel punto, utilizzando la geometria metodo computeHeading biblioteca).

dato un gmarkers array che contiene oggetti google.maps.Marker che rappresentano i vertici del poligono:

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)