Google Maps Waypoints plus de 8 question

Il existe beaucoup d'exemples / code disponibles en ligne pour créer Google Map en utilisant plusieurs points de cheminement. J'ai créé la version similaire des codes disponibles en excluant tous les marqueurs, cliquez sur les boutons ..etc.

J'utilise les waypoints de google maps V3 pour créer des itinéraires entre plusieurs destinations. Puisque nous ne pouvons pas utiliser plus de 8 points de cheminement, je traite les points de cheminement multiples en utilisant des lots. Dans le code ci-dessous, il y a des emplacements de 19 gps dans lesquels 10 gps sont traités en un seul Lot et 9 dans un autre. La fonction drawRouteMap est appelée pour dessiner l'itinéraire pour l'ensemble des 10 (ou moins) emplacements GPS.

Le problème est que la carte Google est annulée dans chaque appel de fonction. La sortie de la carte de Google montre les dernières valeurs traitées. Tout le monde pourrait me suggérer où je vais en panne

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function calcRoute() { map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); var msg ="41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195"; var input_msg=msg.split(":"); var locations = new Array(); for (var i = 0; i < input_msg.length; i++) { var tmp_lat_lng =input_msg[i].split(","); locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); } directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { center: locations[0], zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP } directionsDisplay.setMap(map); var i =locations.length; var index =0; while(i !=0 ){ if(i<3){ var tmp_locations =new Array(); for (var j=index;j<locations.length;j++) { tmp_locations.push(locations[index]); } drawRouteMap(tmp_locations); i=0; index=locations.length; } if( i>= 3 && i<=10) { alert("before :fun < 10: i value "+i+" index value"+index); var tmp_locations =new Array(); for (var j=index;j<locations.length;j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i=0; index=locations.length; alert("after fun < 10: i value "+i+" index value"+index); } if(i > 10) { alert("before :fun > 10: i value "+i+" index value"+index); var tmp_locations =new Array(); for (var j=index;j<index+10;j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i=i-10; index =index+10; alert("after fun > 10: i value "+i+" index value"+index); } } } function drawRouteMap(locations){ var start,end; var waypts = []; for(var k =0;k<locations.length;k++){ if (k>=1 && k<=locations.length-2) { waypts.push({ location:locations[k], stopover:true}); } if(k==0) start=locations[k]; if(k==locations.length-1) end=locations[k]; } var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; console.log(request); directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { console.log(status); directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', calcRoute); </script> <div id="dvMap" style="width: 500px; height: 500px"> </div> </body> </html> 

  • Comment savoir si le panorama de la vue de la rue est à l'intérieur ou à l'extérieur
  • Google Maps MarkerClusterer Pas de clustering
  • Obtenir la position du curseur de la souris sur le passe-passeur de Google Maps V3 API Marker
  • Google Maps v3 - Comment centrer à l'aide d'une adresse sur l'initialisation?
  • Google api v3 montre les marqueurs proches sur la route du client
  • Utilisation de Longitude / Latitude comme Waypoint
  • Ajouter un marqueur de marqueur simple à Google Map
  • Détecter la limite de quota de l'API Google Maps
  • One Solution collect form web for “Google Maps Waypoints plus de 8 question”

    Vous devez créer une instance distincte de DirectionsRenderer pour chaque itinéraire que vous souhaitez afficher sur la carte.

     var directionsDisplay = []; var directionsService = []; var map = null; var bounds = null; function drawRouteMap(locations){ var start,end; var waypts = []; for(var k =0;k<locations.length;k++){ if (k>=1 && k<=locations.length-2) { waypts.push({ location:locations[k], stopover:true}); } if(k==0) start=locations[k]; if(k==locations.length-1) end=locations[k]; } var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; console.log(request); directionsService.push(new google.maps.DirectionsService()); var instance = directionsService.length-1; directionsDisplay.push(new google.maps.DirectionsRenderer({preservViewport:true})); directionsDisplay[instance].setMap(map); directionsService[instance].route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { console.log(status); if (!bounds) bounds = response.bounds; else bounds.union(response.bounds); directionsDisplay[instance].setDirections(response); if (instance > 0) map.fitBounds(bounds); } }); } 

    Travailler (mais vous voulez probablement connecter les deux itinéraires)

    Travail de violon avec point commun

    Extrait du code de fonctionnement:

     var directionsDisplay = []; var directionsService = []; var map = null; function calcRoute() { var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195"; var input_msg = msg.split(":"); var locations = new Array(); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < input_msg.length; i++) { var tmp_lat_lng = input_msg[i].split(","); locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); bounds.extend(locations[locations.length-1]); } var mapOptions = { // center: locations[0], zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); map.fitBounds(bounds); google.maps.event.addDomListener(window,'resize',function() { google.maps.event.trigger(map,'resize'); map.fitBounds(bounds); }); var i = locations.length; var index = 0; while (i != 0) { if (i < 3) { var tmp_locations = new Array(); for (var j = index; j < locations.length; j++) { tmp_locations.push(locations[index]); } drawRouteMap(tmp_locations); i = 0; index = locations.length; } if (i >= 3 && i <= 10) { console.log("before :fun < 10: i value " + i + " index value" + index); var tmp_locations = new Array(); for (var j = index; j < locations.length; j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i = 0; index = locations.length; console.log("after fun < 10: i value " + i + " index value" + index); } if (i >= 10) { console.log("before :fun > 10: i value " + i + " index value" + index); var tmp_locations = new Array(); for (var j = index; j < index + 10; j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i = i - 9; index = index + 9; console.log("after fun > 10: i value " + i + " index value" + index); } } } function drawRouteMap(locations) { var start, end; var waypts = []; for (var k = 0; k < locations.length; k++) { if (k >= 1 && k <= locations.length - 2) { waypts.push({ location: locations[k], stopover: true }); } if (k == 0) start = locations[k]; if (k == locations.length - 1) end = locations[k]; } var request = { origin: start, destination: end, waypoints: waypts, travelMode: google.maps.TravelMode.DRIVING }; console.log(request); directionsService.push(new google.maps.DirectionsService()); var instance = directionsService.length - 1; directionsDisplay.push(new google.maps.DirectionsRenderer({ preserveViewport: true })); directionsDisplay[instance].setMap(map); directionsService[instance].route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { console.log(status); directionsDisplay[instance].setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', calcRoute); 
     html, body, #dvMap { height: 100%; width: 100% } 
     <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="dvMap"></div> 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.