Dessiner un polygone en utilisant ngmap

Question

J'essaie de dessiner un polygone sur ma carte en utilisant ngmap. La carte est correctement affichée comme this exemple montre, mais quand je termine le tirage au sort, voici ce que je reçois:

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

J'utilise le même code de l'exemple.

Mes questions:

1- Comment puis-je résoudre cette erreur?

2- Si je veux laisser l'utilisateur dessiner seulement une forme de polygone, j'ai essayé de définir la valeur de drawingMode sur "polygone" mais j'ai toujours les autres options de dessin (cercle ...). Comment ne laisser que le polygone dessiner?

3- Comment autoriser l'utilisateur à effacer le polygone dessiné?

4- Est-il possible de détecter l'action de mettre (dessin) tous les points. Je veux dire que pour dessiner une ligne dans le polygone par exemple j'ai besoin d'au moins deux points. Puis-je détecter quand l'utilisateur dessine le premier point puis le second et obtient ses coordonnées?

Modifier

Ceci est toute erreur que je vois quand j'inclus ng-map.js au lieu de 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

Je résolu la première question:

Mon problème était que J'utilise des routes dans l'app.js. Donc, le html et le controller sont liés. Pour résoudre le problème, je mets $scope.onMapOverlayCompleted au lieu de var vm = this; vm.onMapOverlayCompleted parce que je n'écris pas le ng-controller="DrawingManagerCtrl as vm" dans mon HTML. Puis dans le HTML je mets on-overlaycomplete="onMapOverlayCompleted()" et cela fonctionne.

Je résolu aussi la deuxième question en utilisant:

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

Je suis veulent maintenant résoudre les autres problèmes.

Une aide s'il vous plaît?

Answer 1

Comme le montre example you referenced, la fonction de rappel overlaycomplete reçoit e (Event) en tant que premier paramètre. Cet objet OverlayCompleteEvent contient une référence à la superposition tracée à Event.overlay (voir docs de l'API JS d'origine de Google Maps plus d'infos, puisque ng-map est seulement l'enveloppe de l'API d'origine après tout, en particulier la section "OverlayCompleteEvent object specification").

En utilisant cela, vous pouvez obtenir la référence à la superposition créée, la stocker, puis appeler le .setMap(null) pour la supprimer de la carte. E.g:

$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 = []; 
} 

Ensuite, chaque fois que vous voulez supprimer tous les superpositions, il suffit d'appeler la fonction $scope.deleteAllDrawnOverlays (vous pouvez l'attacher à appuyer sur un bouton en utilisant ng-click ou faire ce que vous voulez avec elle).

Ce n'est pas possible à l'aide google.maps.drawing.DrawingManager qui est utilisé dans votre exemple. La raison en est que DrawingManager ne prend pas en charge les événements pour cliquer sur la carte pendant le dessin (voir docs pour les événements possibles, section "Classe DrawingManager"). Donc, sauf solutions de contournement hacky qui pourraient casser n'importe quand avec la nouvelle version de l'API, la seule solution possible est d'implémenter le dessin de polygone vous-même et ne pas utiliser DrawingManager. Vérifiez par exemple ce SO answer, plus précisément le referenced example (clic droit sur la carte). Ils n'utilisent pas ng-map, mais fondamentalement ce que vous devez faire est d'ajouter on-click="mapClickHandler" à votre ng-map, dans le mapClickHandler obtenir la position où vous avez cliqué sur la carte, dessinez Marker là qui ressemblerait à un point et si vous avez plus les points les relient aux lignes.

Ceci est toutefois trop pour une question, vous devriez probablement lire sur ng-map et les sections pertinentes de Google Maps Js Api vous-même.