Zeichnen Sie Polygon mit ngmap

Question

Ich versuche, Polygon auf meiner Karte mit ngmap zu zeichnen. Die Karte wird korrekt angezeigt, wie this Beispiel zeigt, aber wenn ich die Auslosung zu beenden, das ist, was ich bekomme:

ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined 

habe ich den gleichen Code des Beispiels.

Meine Fragen:

1- Wie kann ich diesen Fehler beheben?

2- Wenn ich den Benutzer nur Polygonform zeichnen lassen möchte, habe ich versucht, den Wert drawingMode auf "Polygon" zu setzen, aber ich habe immer die anderen Zeichenoptionen (Kreis ...). Wie kann nur das Polygon gezeichnet werden?

3- Wie kann ich den Benutzer das gezeichnete Polygon löschen lassen?

4- Ist es möglich, die Aktion des Puttens (Zeichnens) jedes Punktes zu erkennen? Ich meine, dass zum Zeichnen einer Linie im Polygon zum Beispiel ich mindestens zwei Punkte brauche. Kann ich erkennen, wenn der Benutzer den ersten Punkt und dann den zweiten Punkt zeichnet und seine Koordinaten erhält?

bearbeiten

Das ist der ganze Fehler, den ich sehe, wenn ich schließen ng-map.js statt ng-map.min.js:

Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined 
    at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44) 
    at Array.reduce (native) 
    at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39) 
    at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81) 
    at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81) 
    at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121) 
    at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70) 
    at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249) 

Edit 2

ich die erste Frage gelöst:

Mein Problem war das Ich verwende Routen in der App.js. So sind die html und die controller darin verlinkt. Um das Problem zu lösen, setze ich $scope.onMapOverlayCompleted anstelle von var vm = this; vm.onMapOverlayCompleted weil ich die ng-controller="DrawingManagerCtrl as vm" in meinem HTML nicht schreibe. Dann in der HTML stelle ich on-overlaycomplete="onMapOverlayCompleted()" und es funktioniert.

Ich löste auch die zweite Frage mit:

drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}" 

ich jetzt die anderen Probleme lösen wollen.

Irgendwelche Hilfe bitte?

Answer 1

Als example you referenced zeigt, ist die Rückruffunktion overlaycomplete empfängt e (Ereignis) als der erste Parameter. Dieses OverlayCompleteEvent Objekt enthält einen Verweis auf das gezeichnete Overlay unter Event.overlay (siehe docs der ursprünglichen Google Maps JS API mehr Info, da ng-map schließlich nur Wrapper der ursprünglichen API ist, speziell "OverlayCompleteEvent Objektspezifikation" Abschnitt).

Mit diesem können Sie den Verweis auf das erstellte Overlay erhalten, speichern Sie es und rufen Sie später .setMap(null) darauf, um es aus der Karte zu löschen. E.g: Dann

$scope.myDrawnOverlays = []; //array where you store drawn overlays 
$scope.onMapOverlayCompleted(e){ 
    ... 
    myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn 
} 
$scope.deleteAllDrawnOverlays(){ 
    for(var i = 0; i < myDrawnOverlays.length; i++){ 
     myDrawnOverlays[i].setMap(null); //remove overlays from map one by one 
    } 
    myDrawnOverlays = []; 
} 

, wenn Sie alle Overlays löschen möchten, rufen Sie einfach die Funktion $scope.deleteAllDrawnOverlays (Sie können es bis zu einem gewissen Knopf binden kann mit ng-click oder tun, was man will).

Dies ist möglich, NICHT google.maps.drawing.DrawingManager verwendet, die in Ihrem Beispiel verwendet wird. Der Grund dafür ist, dass der DrawingManager keine Ereignisse unterstützt, mit denen während des Zeichnens auf die Karte geklickt werden kann (weitere Informationen finden Sie unter docs, Abschnitt "DrawingManager-Klasse").

Also außer hacky Workarounds, die jederzeit mit neuen API-Release brechen könnte, ist die einzige mögliche Lösung, das Zeichnen von Polygon selbst zu implementieren und nicht DrawingManager verwenden. Überprüfen Sie zum Beispiel diese SO answer, speziell die referenced example (Rechtsklick auf Karte). Sie verwenden nicht ng-map, aber im Grunde müssten Sie on-click="mapClickHandler" zu Ihrem ng-map hinzufügen, in der mapClickHandler Position, wo Sie auf die Karte geklickt haben, Marker dort zeichnen, die wie ein Punkt aussehen würde und wenn Sie mehr haben Punkte verbinden sie mit Linien.

Dies ist jedoch zu viel für eine Frage, müssten Sie wahrscheinlich auf ng-map und relevante Abschnitte von Google Maps Js Api selbst nachlesen.