Google Maps v3-supprimer le Sommet sur le polygone
Google Maps a 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 documents API n'ont pas semblé faire allusion à quoi que ce soit.
5 réponses
Il s'agit actuellement d'une demande de fonctionnalité en suspens (reconnue par Google), numéro 3760.
Voici ma solution: http://jsbin.com/ajimur/10 . il utilise une fonction qui ajoute un bouton Supprimer au polygone passé (en dessous du bouton Annuler).
Alternativement, quelqu'un a suggéré cette approche: faites un clic droit pour supprimer le Sommet le plus proche, qui fonctionne bien mais manque quelque peu de finesse de L'interface utilisateur. J'ai construit sur le code du lien pour vérifier si le clic était à l'intérieur (ou à moins de 1 pixel du nœud) - dans un JSBin ici: http://jsbin.com/ajimur/.
EDIT: commeAmr Bekhit l'a souligné-cette approche est actuellement interrompue, car les événements doivent être attachés au polygone.
Google Maps fournit désormais 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 devez faire est ce qui suit 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 si oui ou non nous sommes près du point ne sont plus nécessaires, car L'API Google Maps nous dit Maintenant quel sommet nous avons cliqué sur.
Remarque: cela ne fonctionne que lorsque la Polyligne/Polygone est en mode édition. (c'est-à-dire lorsque les sommets que vous souhaitez supprimer sont visibles.)
En guise de dernière pensée, vous pouvez envisager d'utiliser un événement click ou double click à la place. "Click" est assez intelligent pour ne pas déclencher un glisser, bien que l'utilisation d'un seul déclencheur de clic puisse 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 descendre à un seul nœud, et ne peut plus éditer:
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ù j'avais besoin de supprimer des nœuds de polygones contenant plusieurs chemins. Voici une modification du code de Sean et du mal:
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);
}
}
});
Juste pensé que je contribuerais parce que je cherchais une solution pour cela aussi, Voici mon implémentation:
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 nœuds de bord, et maintient un minimum d'un polygone de formation de triangle à tout moment en vérifiant la longueur du chemin > 3.