Événement de redimensionnement du polygone de Google Maps

Question

J'ai un polygone modifiable, comme suit aquí .

Je veux "attraper" l'événement lorsqu'un utilisateur déplace le point sur la carte (pour redimensionner le polygone). J'ai besoin de cette fonctionnalité pour mettre en œuvre la fonction "snap to point".

Est-ce possible ?

Modifier

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var dragging = false;
google.maps.event.addListener(this.polygon, 'mousedown', function (event) {
    if (event.vertex) {
        dragging = true;
    }
});
google.maps.event.addListener(this.polygon, 'mousemove', function (event) {
    if (dragging) {
        // dragging
    }
});
google.maps.event.addListener(this.polygon, 'mouseup', function (event) {
    dragging = false;
});

Le code fonctionne, les événements sont capturés. Cependant, je n'arrive pas à accéder au point de déplacement actuel pour changer sa position.

J'ai aussi essayé à l'intérieur mousemove pour modifier l'objet latLng, mais sans effet.

Solution temporaire

Vous ne pouvez pas accéder au fantôme du polygone pendant le redimensionnement. La seule solution pour mettre en œuvre l'accrochage est donc de le faire après le redimensionnement du polygone.

this.polygon = new google.maps.Polygon({
    map: map,
    strokeWeight: 2,
    editable: true,
    path: this._path
});

var path = this.polygon.getPath();
google.maps.event.addListener(path, 'set_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

google.maps.event.addListener(path, 'insert_at', function (event) {
    // Here do the snapping, after the polygon has been resized
});

Answer 1

Oui, c'est possible, mais ce n'est pas simple.

Vous devrez utiliser une combinaison d'événements sur l'objet polygone.

A PolygonMouseEvent a trois propriétés, edge , path y vertex . Si l'événement s'est produit sur une vertex vous obtiendrez l'index de celui-ci, sinon il est indéfini.

Ainsi, si vous essayez ce qui suit, vous serez peut-être en mesure de créer la fonctionnalité que vous souhaitez :

• Écoutez le mousedown événement. Si vertex est défini, alors dragging = true .
• Écoutez le mouseup événement. Définir dragging = false
• Écoutez le mousemove événement. Si dragging = true puis obtenir la position de la souris. e.latLng et faites votre logique pour le casser.

Je n'ai pas essayé, mais avec un peu de bricolage, vous devriez arriver à le faire fonctionner en utilisant cette méthode.

Si mousemove ne fonctionne pas, essayez d'utiliser mouseover .

Si vous essayez et ne parvenez pas à le faire fonctionner, publiez votre code pour que nous puissions vous aider.

Answer 2

En fait, les arguments passés au set_at sont (index, object) . L'index correspondra au sommet modifié.

Answer 3

Développant la réponse de @SeainMalkin avec un code :

var draggingPolygonVertex = false;

google.maps.event.addListener(polygon, 'mousedown', function(mdEvent) {
    if(mdEvent.vertex || (mdEvent.vertex == 0)){
        draggingPolygonVertex = true;
    }
});

google.maps.event.addListener(polygon, 'mouseup', function(muEvent) {
        draggingPolygonVertex = false;
});

google.maps.event.addListener(polygon, 'mousemove', function(mmEvent) {
    if(draggingPolygonVertex){
        // you're now dragging a vertex of the polygon
        // insert snap to grid code
    }
});

Answer 4

J'ai résolu un problème similaire en combinant la solution suggérée par Seain Malkin et la solution proposée aquí (merci aux deux).

Au lieu d'enregistrer un "écouteur d'événement google" pour mousemove à polygon J'ai enregistré un écouteur d'événements DOM pour les cartes. div ( useCapture paramètre réglé sur true (notamment pour travailler avec Firefox) :

map.getDiv().addEventListener('mousemove', function (e) {
    if (drawing) {
        var latLng = getLatLngByOffset( map, e.clientX, e.clientY );
        // dragging
    }
}, true);

Answer 5

Je pense que la bonne réponse est la suivante :

path.addListener('bounds_changed', function (event) {
    // Here do the snapping, after the polygon has been resized
});

Un exemple complet se trouve ici : Exemple de Google Doc