J'ai une exigence où, sur le clic, je dois tracer un itinéraire entre deux marqueurs lorsque je sélectionne. J'ai bien téléchargé un fichier KML sur Google MAPS API, de sorte que les marqueurs sont clairement visibles sur Google MAPS API.
Lorsque je sélectionne un clic sur deux marqueurs, il doit y avoir une route tracée entre les marqueurs sélectionnés. J'ai pu tracer une route statique entre les deux points, mais la ligne qui se dessinait ne suivait pas l'itinéraire. Veuillez vous guider. Aussi, recherchez le code que j'ai essayé. Merci d'avance.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Transit layer</title> <style> html,body,#map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> <script> function initialize() { var myLatlng = new google.maps.LatLng(0, -180); var mapOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var transitLayer = new google.maps.TransitLayer(); transitLayer.setMap(map); var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true}); geoXml.parse('kmload.kml'); var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true}); geoXml1.parse('lines.kml'); var coordinates = [ new google.maps.LatLng(18.9800, 73.1000), new google.maps.LatLng(19.0361, 73.0617)]; google.maps.event.addListener(map, "click", function (e) { var trainpath = new google.maps.Polyline({ path: coordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); trainpath.setMap(map); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
Exemple
Ajoutez une fonction "createMarker" personnalisée à geoxml3 qui ajoute une fonction à l'auditeur de clic du marqueur pour déclencher le service des instructions.
// global variables var directions = {}; var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); // geoxml3 configuration var geoXml = new geoXML3.parser({ map: map, createMarker: createMarker, singleInfoWindow: true }); // handle the directions service function processMarkerClick(latLng) { if (!directions.start) { directions.start = latLng; } else if (!directions.end) { directions.end = latLng; directionsService.route({ origin:directions.start, destination: directions.end, travelMode: google.maps.TravelMode.DRIVING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); directionsDisplay.setMap(map); } else { alert("Directions Request failed:" +status); } directions.start = null; directions.end = null; }); } } // custom createMarker function to add hook for the directions service // (modified from the version in the geoxml3 source) var createMarker = function (placemark, doc) { // create a Marker to the map from a placemark KML object // Load basic marker properties var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, { map: geoXml.options.map, position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng), title: placemark.name, zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5, icon: placemark.style.icon, shadow: placemark.style.shadow }); // Create the marker on the map var marker = new google.maps.Marker(markerOptions); if (!!doc) { doc.markers.push(marker); } // Set up and create the infowindow if it is not suppressed if (!geoXml.options.suppressInfoWindows) { var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, { content: '<div class="geoxml3_infowindow"><h3>' + placemark.name + '</h3><div>' + placemark.description + '</div></div>', pixelOffset: new google.maps.Size(0, 2) }); if (geoXml.options.infoWindow) { marker.infoWindow = geoXml.options.infoWindow; } else { marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions); } marker.infoWindowOptions = infoWindowOptions; // Infowindow-opening event handler google.maps.event.addListener(marker, 'click', function() { processMarkerClick(marker.getPosition()); this.infoWindow.close(); marker.infoWindow.setOptions(this.infoWindowOptions); this.infoWindow.open(this.map, this); }); } placemark.marker = marker; return marker; };
Je pense que vous devez obtenir et définir de nouvelles coordonnées lorsque vous faites un événement de glisser. Vous manquez donc ce gestionnaire d'événements dans votre code dans un événement de clic, tel que cet exemple:
google.maps.event.addListener(trainpath, 'drag',function(event) { // set new coordinates for event, event.latLng.lat() and event.latLng.lng() }); google.maps.event.addListener(trainpath, 'dragend',function(event) { // set new coordinates for event, event.latLng.lat() and event.latLng.lng() });
Voir également dans ce fil: Google Maps glisse et traîne les auditeurs d'événements ne fonctionneront pas si le marqueur créé par l'écouteur d'événement de clic
Désolé si cela ne pouvait pas être utile.