J'essaie d'afficher plusieurs itinéraires sur Google Map, mais il ne montre qu'un seul. Pouvez-vous s'il vous plaît ce que je fais mal?
var map = null;
var markerPoints = [];
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById("map"), {scrollwheel:false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, center:new google.maps.LatLng(19.0759837, 72.87765590000004), zoom:13});
directionsDisplay.setMap(map);
}
function calcRoute(flat, flng, tlat, tlng)
{
var start = new google.maps.LatLng(flat, flng);
var end = new google.maps.LatLng(tlat, tlng);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
directionsService.route(request, function(result, status) {
console.log(result);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
calcRoute("19.210430", "72.843422", "19.109858", "72.878433");
calcRoute("19.228977", "72.856812", "19.117302", "72.884041");
5 Réponses :
Votre directionsDisplay code> variable est une instance de
google.maps.directionsRenderer () code> et qui ne peut contenir qu'un ensemble d'instructions à la fois. Si vous souhaitez afficher plusieurs itinéraires, vous avez besoin de plusieurs
google.maps.directionsRenderer () code>. P>
Pouvez-vous s'il vous plaît élaborer plus? Je ne comprends pas .. Comment puis-je m'attaquer à ce problème?
![In image u can see 2 routes with direction arrow][1] <style> html, body, #map_canvas { margin: 0; padding: 0; height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> var directionsService; var stepDisplay; var position; var marker = []; var polyline = []; var poly2 = []; var poly = null; var startLocation = []; var endLocation = []; var timerHandle = []; var stops_data = [[ {"Geometry":{"Latitude":23.05242,"Longitude":72.53375}}, {"Geometry":{"Latitude":23.03007,"Longitude":72.59664}} ] ,[ {"Geometry":{"Latitude":23.00959,"Longitude":72.56189}}, {"Geometry":{"Latitude":23.05754,"Longitude":72.55302}} ]]; var a,z,b; var add; var speed = 0.000005, wait = 1; var infowindow = null; infowindow = new google.maps.InfoWindow(); var myPano; var panoClient; var nextPanoId; var directionsDisplay = []; directionsDisplay[0] = new window.google.maps.DirectionsRenderer({ suppressMarkers: true }); directionsDisplay[1] = new window.google.maps.DirectionsRenderer({ suppressMarkers: true }); var map; var mapOptions = { center: new google.maps.LatLng(42.5584308, -70.8597732), zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }; function initialize() { map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsService = new google.maps.DirectionsService(); // Setroute(locations[0],locations[1],directionsDisplay[0]); // Setroute(locations2[0],locations2[1],directionsDisplay[1]); Tour_startUp(stops_data[0]); window.tour.loadMap(map, directionsDisplay[0]); window.tour.fitBounds(stops_data[0],map); if (stops_data[0].length > 1) window.tour.calcRoute(stops_data[0],directionsService, directionsDisplay[0]); Tour_startUp(stops_data[1]); window.tour.loadMap(map, directionsDisplay[1]); window.tour.calcRoute(stops_data[1],directionsService, directionsDisplay[1]); window.tour.fitBounds(stops_data[1],map); } function fx(o) { if(o && o.legs) { for(l=0;l<o.legs.length;l++) { var leg=o.legs[l]; for(var s=0;s<leg.steps.length;++s) { var step=leg.steps[s], a=(step.lat_lngs.length)?step.lat_lngs[0]:step.start_point, z=(step.lat_lngs.length)?step.lat_lngs[1]:step.end_point, dir=((Math.atan2(z.lng()-a.lng(),z.lat()-a.lat())*180)/Math.PI)+360, ico=((dir-(dir%3))%120); new google.maps.Marker({ position: a, icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/dir_'+ico+'.png', new google.maps.Size(24,24), new google.maps.Point(0,0), new google.maps.Point(12,12) ), map: map, title: Math.round((dir>360)?dir-360:dir)+'°' }); } } } } function Tour_startUp(stops) { // alert('first'+stops.length); if (!window.tour) window.tour = { updateStops: function (newStops) { stops = newStops; }, // map: google map object // directionsDisplay: google directionsDisplay object (comes in empty) loadMap: function (map, dirdis) { var myOptions = { zoom: 15, center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London mapTypeId: window.google.maps.MapTypeId.ROADMAP }; map.setOptions(myOptions); dirdis.setMap(map); }, fitBounds: function (stops_data,map) { var bounds = new window.google.maps.LatLngBounds(); // extend bounds for each record for( var x in stops_data) { var myLatlng = new window.google.maps.LatLng(stops_data[x].Geometry.Latitude, stops_data[x].Geometry.Longitude); bounds.extend(myLatlng); } map.fitBounds(bounds); }, calcRoute: function (stops_new,directionsService, dirdis) { var batches = []; var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints var itemsCounter = 0; var wayptsExist = stops_new.length > 0; var time= []; while (wayptsExist) { var subBatch = []; var subitemsCounter = 0; // alert('second'+stops_new.length); //alert(stops_new[0].Geometry.Latitude +' ===== ' +stops_new[0].Geometry.Longitude); for (var j = itemsCounter; j < stops_new.length; j++) { subitemsCounter++; //alert(stops[j].Geometry.Time); subBatch.push({ location: new window.google.maps.LatLng(stops_new[j].Geometry.Latitude, stops_new[j].Geometry.Longitude), stopover: true }); //time.push(stops[j].Geometry.Time); if (subitemsCounter == itemsPerBatch) break; } itemsCounter += subitemsCounter; batches.push(subBatch); wayptsExist = itemsCounter < stops_new.length; // If it runs again there are still points. Minus 1 before continuing to // start up with end of previous tour leg itemsCounter--; } // now we should have a 2 dimensional array with a list of a list of waypoints var combinedResults; var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort var directionsResultsReturned = 0; for (var k = 0; k < batches.length; k++) { var lastIndex = batches[k].length - 1; var start = batches[k][0].location; var end = batches[k][lastIndex].location; // trim first and last entry from array var waypts = []; waypts = batches[k]; waypts.splice(0, 1); waypts.splice(waypts.length - 1, 1); var request = { origin: start, destination: end, waypoints: waypts, travelMode: window.google.maps.TravelMode.WALKING }; // alert('start'+start); // alert('end'+end); (function (kk) { directionsService.route(request, function (result, status) { if (status == window.google.maps.DirectionsStatus.OK) { fx(result.routes[0]); polyline[0] = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); poly2[0] = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); var unsortedResult = { order: kk, result: result }; unsortedResults.push(unsortedResult); directionsResultsReturned++; if (directionsResultsReturned == batches.length) // we've received all the results. put to map { // sort the returned values into their correct order unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); }); var count = 0; for (var key in unsortedResults) { if (unsortedResults[key].result != null) { if (unsortedResults.hasOwnProperty(key)) { if (count == 0) // first results. new up the combinedResults object combinedResults = unsortedResults[key].result; else { // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete // directionResults object, but enough to draw a path on the map, which is all I need combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs); combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path); combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast()); combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest()); } count++; } } } dirdis.setDirections(combinedResults); var legs = combinedResults.routes[0].legs; var path = combinedResults.routes[0].overview_path; //alert(path.length); // alert(legs.length); //setRoutes(legs[0].start_location,legs[legs.length-1].end_location); for (var i=0; i < legs.length;i++) { var markerletter = "A".charCodeAt(0); markerletter += i; markerletter = String.fromCharCode(markerletter); if (i == 0) { //marker[0] = createMarker2(legs[i].start_location,"start",legs[i].start_address,"green"); } var steps = legs[i].steps; // alert('arrival time : '+legs[i].arrival_time.text); // var duration = steps.duration_in_traffic; // alert(duration.text); for (j=0;j<steps.length;j++) { var nextSegment = steps[j].path; for (k=0;k<nextSegment.length;k++) { polyline[0].getPath().push(nextSegment[k]); //bounds.extend(nextSegment[k]); } } // createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter); } // Marker for start point createMarker(dirdis.getMap(),legs[0].start_location,"marker"+0,"Start Point<br>"+legs[0].start_address,'A'); var i=legs.length; var markerletter = "A".charCodeAt(0); markerletter += i; markerletter = String.fromCharCode(markerletter); // marker for End Point createMarker(dirdis.getMap(),legs[legs.length-1].end_location,"marker"+i,"End Point <br>"+legs[legs.length-1].end_address,'B'); polyline[0].setMap(map); //startAnimation(0); } } }); })(k); } } }; } var icons = new Array(); icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0,0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); function getMarkerImage(iconStr) { //alert(iconStr); if ((typeof(iconStr)=="undefined") || (iconStr==null)) { iconStr = "red"; } if(iconStr == 'A') { // for start point if (!icons[iconStr]) { icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-start.png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0,0), // The anchor for this image is at 6,20. new google.maps.Point(9, 34)); } } if (iconStr == 'B') { // for end point if (!icons[iconStr]) { icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-end.png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0,0), // The anchor for this image is at 6,20. new google.maps.Point(9, 34)); } } return icons[iconStr]; } // Marker sizes are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the Y direction down. var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png', // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0,0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', // The shadow image is larger in the horizontal dimension // while the position and offset are the same as for the main image. new google.maps.Size(37, 34), new google.maps.Point(0,0), new google.maps.Point(9, 34)); // Shapes define the clickable region of the icon. // The type defines an HTML <area> element 'poly' which // traces out a polygon as a series of X,Y points. The final // coordinate closes the poly by connecting to the first // coordinate. var iconShape = { coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], type: 'poly' }; function createMarker(map, latlng, label, html, color) { //alert(color); // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = '<b>'+label+'</b><br>'+html; // alert('creatMarker'+contentString); var marker = new google.maps.Marker({ position: latlng, map: map, shadow: iconShadow, icon: getMarkerImage(color), shape: iconShape, title: label, zIndex: Math.round(latlng.lat()*-100000)<<5 }); marker.myname = label; google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); return marker; } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map_canvas"></div> [1]: http://i.stack.imgur.com/yB4Tw.png
Voici le code de multiples itinéraires sur la même carte Google. Si vous souhaitez afficher plusieurs itinéraires, vous avez besoin de plusieurs Google.maps.DirectionsRenderer (). J'ai créé un tableau de directionsDisacly [] b> objets
Ici vous allez .. L'explication complète , le crédit va à L'auteur Vous devez créer une instance de google.maps.directionsRenderer (); code> chaque fois que vous dessinez l'itinéraire pour le rendre visible;) p> p>
Veuillez envisager de cibler les parties importantes de l'explication dans la réponse au contexte.
Je suis désolé @Nickudell, je pensais que le lien explique ma réponse. Mais je viens de réaliser qu'il était cassé. ;) Merci pour la correction.
Pour obtenir de multiples itinéraires, nous pouvons ajouter Cette méthode retournera une gamme d'itinéraires si disponible avec leur nom dans Maintenant, nous pouvons afficher ces itinéraires sur la vue et le clic de chaque route, nous pouvons passer l'objet de la route et peut rendre la direction par fournisseurOutEnternatives = true code> à l'intérieur de la demande lors de l'appelant
itinéraire () code> de
itinéraireservice code> objet. Voir Demandes de directions . P>
Résumé de la clé code>. p>
setDirections () code> de
itinéraireRenderer code>. Voir Affichage des directionsRésults P>
Essayez ce code
<!DOCTYPE html> <html> <head> <title>Waypoints in Directions</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=your-key&callback=initMap&libraries=&v=weekly" defer ></script> <style type="text/css"> html, body { height: 99%; margin: 0; padding: 0; } #map { height: 100%; float: left; width: 99%; height: 100%; } </style> <script> "use strict"; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 6, center: { lat: 19.8762, lng: 75.3433 } }); const directionsService = new google.maps.DirectionsService(); let points = [ { origin: { lat: 19.9974533, lng: 73.78980229999999 }, destination: { lat: 19.0759837, lng: 72.8776559 }, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }, { origin: { lat: 21.1458, lng: 79.0882 }, destination: { lat: 18.5204, lng: 73.8567 }, // waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING } ] for (var i = 0; i < points.length; i++) { calculateAndDisplayRoute(directionsService,points[i]) } function calculateAndDisplayRoute(directionsService,points) { let directionsRenderer = new google.maps.DirectionsRenderer(); // const waypts = [{ // location: { // lat: 19.8762, // lng: 75.3433 // }, // }, // ]; directionsService.route( points, (response, status) => { console.log(response); if (status === "OK") { directionsRenderer.setDirections(response); directionsRenderer.setMap(map); } else { window.alert("Directions request failed due to " + status); } } ); } } </script> </head> <body> <div id="map"></div> </body> </html>
Dupliqué possible de Dessiner plusieurs itinéraires Google Map