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:
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
mousemove
l' mousemove
mousemove de la carte, chaque fois qu'il se produit, appuyez sur le LatLng
retourné vers le chemin de la Polyline
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
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>