Google Maps v3 – Supprimer le sommet sur le polygone

Google Maps dispose de la bibliothèque de dessin pour dessiner des polylignes et des polygones et d'autres choses.

Exemple de cette fonctionnalité ici: http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

Je veux, lors du dessin et de l'édition du polygone, pouvoir supprimer un point / sommet sur le chemin. Les API ne semblent pas donner l'indice à quoi que ce soit.

Il s'agit actuellement d'une demande de fonctionnalité exceptionnelle (reconnue par Google), numéro 3760 .

Voici ma solution: http://jsbin.com/ajimur/10 . Il utilise une fonction qui ajoute un bouton de suppression au polygone passé (ci-dessous le bouton d'annulation).


Alternativement, quelqu'un a suggéré cette approche: cliquez avec le bouton droit de la souris pour supprimer le sommet le plus proche , ce qui fonctionne bien mais manque quelque peu de finesse UI. J'ai construit sur le code à partir du lien pour vérifier si le clic était à l'intérieur (ou dans un pixel de) le nœud – dans un JSBin ici: http://jsbin.com/ajimur/ .

EDIT: comme l'a souligné Amr Bekhit – cette approche est actuellement cassée, car les événements doivent être attachés au polygone.

Google Maps fournit maintenant un objet de rappel « PolyMouseEvent » sur les événements déclenchés à partir d'un polygone ou d'une polyligne.

Pour construire sur les autres réponses qui ont suggéré une solution impliquant un clic droit, tout ce que vous devriez faire est le suivant dans les dernières versions de l'API V3:

// this assumes `my_poly` is an normal google.maps.Polygon or Polyline var deleteNode = function(mev) { if (mev.vertex != null) { my_poly.getPath().removeAt(mev.vertex); } } google.maps.event.addListener(my_poly, 'rightclick', deleteNode); 

Vous remarquerez que tous les calculs complexes sur la question de savoir si nous sommes près du point ne sont plus nécessaires, car l'API Google Maps nous dit maintenant quel sommet nous avons cliqué.

Remarque: cela ne fonctionnera que lorsque Polyline / Polygon est en mode édition. (C'est à ce moment-là que les sommets que vous souhaitez supprimer sont visibles.)

Comme dernière pensée, vous pourriez envisager d'utiliser un clic ou un double clic à la place. "Cliquer" est assez intelligent pour ne pas déclencher sur une traînée, bien que l'utilisation d'un déclencheur à un seul clic pourrait encore surprendre certains de vos utilisateurs.

J'ai trouvé le code de Sean très simple et utile. Je viens d'ajouter un limiteur pour arrêter la suppression lorsque l'utilisateur n'a plus que 3 nœuds. Sans cela, l'utilisateur peut accéder à un seul nœud et ne plus pouvoir le modifier:

 my_poly.addListener('rightclick', function(mev){ if (mev.vertex != null && this.getPath().getLength() > 3) { this.getPath().removeAt(mev.vertex); } }); 

J'ai rencontré des situations où je devais supprimer des nœuds de polygones qui comportaient plusieurs chemins. Voici une modification du code de Sean et Evil:

 shape.addListener('rightclick', function(event){ if(event.path != null && event.vertex != null){ var path = this.getPaths().getAt(event.path); if(path.getLength() > 3){ path.removeAt(event.vertex); } } }); 

Je pensais juste que je contribuais parce que je cherchais une solution pour cela aussi, voici ma mise en œuvre:

 if (m_event.hasOwnProperty('edge') && m_event.edge >= 0 && GeofenceService.polygon.getPath().getLength() > 3) { GeofenceService.polygon.getPath().removeAt(m_event.edge); return; } if (m_event.hasOwnProperty('vertex') && m_event.vertex >= 0 && GeofenceService.polygon.getPath().getLength() > 3) { GeofenceService.polygon.getPath().removeAt(m_event.vertex); return; } 

Cela permet de gérer la suppression des nœuds de sommet ET des noeuds de bord et maintient au minimum un polygone de formation de triangle en vérifiant la longueur de chemin> 3.