Fügen Sie einen Punkt hinzu, um das Polygon zu erweitern, ohne es in Google Maps anzuhängen.

Question

Ich baue ein Polygon in Google Maps durch Markierungen, die gezogen werden können, um es neu zu gestalten. Wenn also 3 Marker vorhanden sind, wird das Polygon gezeichnet, und weitere Marker werden in der Form angehängt und erweitert. Das ist gut, wenn der Benutzer einfach einem einfachen Muster im Uhrzeigersinn/Gegenuhrzeigersinn folgen möchte, aber wenn er das Polygon durch eine seiner Kanten erweitern möchte, wird stattdessen die Markierung angehängt, die sich selbst dreht.

Hier in diesem Beispiel, wenn wir Markierungen hinzufügen 1, 2 und 3, wird es ein einfaches Dreieck gezeichnet werden. Aber wenn Marker 4 hinzugefügt wird, dreht sich das Polygon nur selbst.

Stattdessen möchte ich, wenn 4 hinzugefügt wird, ist es zwischen den Markierungen 1 und 2, wie dieses Bild eingefügt wird:

Im Wesentlichen in der Polygon-Eckpunkt-Array statt:

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

ich möchte haben:

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

das Polygon So wird expandieren statt sich zu drehen.

Gibt es einen Weg, dies zu erreichen? Oder muss ich dem Benutzer einfach sagen, dass er seine Polygonuhr gegen den Uhrzeigersinn bauen soll?

Answer 1

Schließlich löste es durch Finden der nächsten Kante und Einfügen nach dem ersten Eckpunkt und vor dem zweiten dieser Kante. Ich benutzen den Algorithmus von hier, um es in Javascript zu verwenden:

Shortest distance between a point and a line segment

Answer 2

Allgemeine Lösung (einen Mittelpunkt finden, sortieren Sie die Punkte, um von diesem Punkt der Position, Geometrie Bibliothek computeHeading Methode).

gegeben ein Array gmarkers enthält google.maps.Marker Objekte, die die Eckpunkte des Polygons darstellt:

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)