comment créer une polyligne sur la carte google v3 et faire enableDrawing

Question

ce code est en v2:

var polyline = new GPolyline([point1,point2], "#ff0000", 5); 
map.addOverlay(polyline); 
polyline.enableDrawing(); 

et comment faire v3 ??

grâce

Answer 1

Malheureusement enableDrawing/enableEditing ne sont pas pris en charge par v3. Il est feature request for it in bugtracker.

Il est possible de l'implémenter par vous-même (voir this demo par exemple), mais le faire aussi bien que dans v2 n'est pas trivial.

Je suis actuellement à la recherche d'une solution à ce problème par moi-même. Jusqu'à présent, j'ai trouvé une seule implémentation qui semble au moins un peu prometteuse: Polyline-enableEditing-enableDrawing-for-GMaps-API-v3.

Answer 2

C'était une douleur à mettre en œuvre, mais c'est possible. J'ai utilisé un modèle d'état pour suivre le processus de numérisation. J'ai utilisé EXT JS, donc j'essaie d'inclure des choses strictement javascript. En cliquant sur un bouton, l'objet de numérisation effectue le suivi, que ce soit NUMÉRISATION ou NOT_DIGITIZING ou EDITING. L'état suivrait également le type de géométrie que je devais gérer: POINT, POLYLINE, POLYGON. Des boutons étaient disponibles pour définir l'état. Je capturerais les clics de la carte avec:

Dans l'objet numériseur, j'ai suivi le polygone et les points de numérisation. Chaque fois que l'utilisateur cliquait, j'envoyais le latLng dans l'événement à l'objet suivi.

this.digitizedGeometry.getPath().push(e.latLng); 

Cela fonctionnerait à la fois pour la polyligne et le polygone. Je n'ai suivi qu'une topologie simple, pas des beignets ou des géométries multiples pour cela.

L'édition et la suppression de points étaient plus difficiles. Je devais d'abord savoir si l'utilisateur avait sélectionné une géométrie POLYLINE ou POLYGON et placer cette géométrie dans la variable editGeometry du numériseur, et activer le bouton pour l'édition. J'ai parcouru le chemin d'accès de la géométrie d'édition et ajouté des marqueurs et des marqueurs de milieu avec des styles différents pour que les marqueurs puissent être déplacés.

var path = this.editGeometry.getPath(); 
for (var i = 0; i < path.getLength(); i++) { 
    // Add point geometry markers 
    var point = path.getAt(i); 
    var latLng = new google.maps.LatLng(point.lat(), point.lng()); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.markerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    // Used to track the latLng associated with the marker when position changes. 
    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: false 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 

    // determine the midpoint 
    var nextValue = (i+1) % path.getLength(); 
    var otherPoint = path.getAt(nextValue); 

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat())/2.0, (point.lng() + otherPoint.lng())/2.0); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: true 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 
} 

La partie clé est "dragend", et l'application de l'édition. Si c'était un point réel dans le chemin, je déplacerais le point et redéfinirais les points médians.

marker.edit.path.setAt(marker.edit.position, e.latLng); 

// Adjust midpoints 
var index = handles.indexOf(marker); 
var prev = (index - 2 + handles.length) % handles.length; 
var mpprev = (index - 1 + handles.length) % handles.length; 
var next = (index + 2) % handles.length; 
var mpnext = (index + 1) % handles.length; 
var prevMarker = handles[prev]; 
var nextMarker = handles[next]; 
var prevMpMarker = handles[mpprev]; 
var nextMpMarker = handles[mpnext]; 
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat())/2.0, (e.latLng.lng() + prevMarker.getPosition().lng())/2.0)); 
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat())/2.0, (e.latLng.lng() + nextMarker.getPosition() 

Vous pouvez voir comment cela est très impliqué. Si vous ne voulez pas les points intermédiaires, alors la première ligne sur le code ci-dessus est suffisante. L'application des points médians est plus impliquée. Vous devez ajouter le point central au chemin, et déplacer toutes les positions, et ajouter un nouveau point médian et ajuster le point milieu précédent. Si je voulais supprimer un point, je devrais supprimer ce point, décrémenter les positions des poignées, supprimer un point central et réajuster le point milieu précédent.

J'espère que cela vous donnera un aperçu de la façon de procéder. Dommage, au lieu de 2 lignes de code, 200 lignes de code, mais cela vous donne la possibilité de faire ce que vous voulez, y compris le réglage du style de marqueur.

Answer 3

Depuis Maps API v3.7 cette fonctionnalité est enfin supportée !!

http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog