Google Maps Draw – tracer une ligne ou un polygone en faisant glisser

Actuellement, vous pouvez dessiner des polygones ou des polylignes sur une carte en cliquant, ce qui crée un nœud. Cependant, si vous vouliez suivre une caractéristique telle qu'une rivière ou un rivage, cela pourrait être à la fois fastidieux et innacurate.

Est-ce que quelqu'un sait d'une façon dont un chemin peut être dessiné en faisant glisser la souris ou en cliquant pour commencer, puis en faisant glisser un chemin, puis en cliquant pour arrêter?

J'ai regardé DrawingManager et MouseEvent, mais je ne vois rien de prometteur pour le moment.

Existe-t-il un moyen de filer le dessin en fonction d'événements tels que cliquer et mouseMove?

Cela permettrait des fonctionnalités beaucoup plus précises et plus rapides.

Flux de travail possible:

  1. onmousedown sur la carte définit l'option draggable de la carte sur false , crée une Polyline -Instance et définit l'option clickable de Polyline sur false

  2. mousemove l' mousemove mousemove de la carte, chaque fois qu'il se produit, appuyez sur le LatLng retourné vers le chemin de la Polyline

  3. onmouseup supprime le mousemove -listener pour la carte et définit l'élément de draggable de la carte de nouveau sur true . Votre Polyline a été terminée

  4. Lorsque vous ne devrez pas créer un Polygon , créez maintenant un Polygon -instance, définissez le chemin du Polygon sur le chemin de la Polyline et supprimez la Polyline


<edit> : Il est recommandé de dessiner uniquement avec un bouton de souris droit appuyé, sinon la carte ne serait jamais entraînable.

Demo: http://jsfiddle.net/doktormolle/YsQdh/

Extrait de code: (à partir de jsfiddle lié)

 function initialize() { var mapOptions = { zoom: 14, center: new google.maps.LatLng(52.5498783, 13.425209099999961), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) { //do it with the right mouse-button only if (e.button != 2) return; //the polygon poly = new google.maps.Polyline({ map: map, clickable: false }); //move-listener var move = google.maps.event.addListener(map, 'mousemove', function(e) { poly.getPath().push(e.latLng); }); //mouseup-listener google.maps.event.addListenerOnce(map, 'mouseup', function(e) { google.maps.event.removeListener(move); if (document.getElementById('overlay').value == 'Polygon') { var path = poly.getPath(); poly.setMap(null); poly = new google.maps.Polygon({ map: map, path: path }); } }); }); } google.maps.event.addDomListener(window, 'load', initialize); 
 html, body { height: 100%; margin: 0 } #map_canvas { height: 90%; } 
 <script src="https://maps.googleapis.com/maps/api/js"></script> Use the right mouse-button to draw an overlay <br/> <select id="overlay"> <option value="Polyline">Polyline</option> <option value="Polygon">Polygon</option> </select> <div id="map_canvas"></div>