So zeichnen Sie verschiedene farbige Polylinien mit Richtungsdienst mit Snap to Road Feature

Question

Ich versuche Buslinien von Bangalore Stadt mit Snap to Road-Funktion von Google API zur Verfügung gestellt zu machen. Wenn ich nur eine Route rendere, ist es mit der Farbe sichtbar, die ich für die Strichfarbeneigenschaft der Polylinie erwähne. Wenn die Route ziemlich lang ist, dann spalte ich die Route in mehrere Pfade für diese Route. Wenn ich jedoch die zweite Route hinzufüge, wird eine Polylinie vom Ende der ersten Route bis zum Start der zweiten Route gezeichnet. Ich kann nicht herausfinden, wo ich falsch liege. Jede Hilfe wird sehr geschätzt. Bitte finden Sie den JavaScript-Code des gleichen.

<script type="text/javascript"> 
var infoWindow = new google.maps.InfoWindow(); 
var routePath; 
var OrgDest; 
var OrgDestpoints; 
var wp; 
var waypts; 
var traceroutePath; 
var service; 
var map; 
var marker, markloc; 
var markers = []; 
var orgdest = {"1": [[12.9197565816171, 77.5923588994416,12.95719452, 77.56829549],[12.95719452, 77.56829549,12.98997477, 77.57209867],[12.98997477, 77.57209867,13.02311, 77.55029]],"KHC": [[12.97466107, 77.58199613,12.97466107, 77.58199613]]}; 
var waypoints = {"1":[[12.92268932, 77.59338455,12.92318598, 77.58877168,12.9279596, 77.58760419,12.93610683, 77.58392363,12.93672057, 77.57217014,12.93956243, 77.57215225,12.94189, 77.57358,12.94574241, 77.57070059],[12.95850855, 77.57402561,12.96161187, 77.57527904,12.96366, 77.56843,12.96811874, 77.56800682,12.97736, 77.57074,12.98997477, 77.57209867],[12.98997477, 77.57209867,12.99789013, 77.57130999,13.00908169, 77.5710476,13.01742075, 77.55707759]],"KHC": [[12.98420536, 77.59761828,12.98368012, 77.6035693]]}; 
var routeColors = {"1": "#FF00FF","KHC": "#800000"}; 
var routeNames = ["1","KHC"]; 

function initialize() { 
var mapOptions = { 
     center: new google.maps.LatLng(12.9536775, 77.5883784), 
     zoom: 12 
    }; 
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); 
    //directionsDisplay.setMap(map); 

    var routeInfoWindow = new google.maps.InfoWindow({ // this info window shows the route name when the mouse hovers over a route line 
    disableAutoPan: true 
    }); 

    for (var i = 0; i < routeNames.length; i++) { // loop over each route 
     var routeName = routeNames[i]; 
     for (var j = 0; j < orgdest[routeName].length; j++) { // loop over each path on the route    
      OrgDest = orgdest[routeName][j]; 
      OrgDestpoints = []    
      for (var k = 0; k < OrgDest.length; k += 2) { // loop over each point in the path 
       OrgDestpoints.push(new google.maps.LatLng(OrgDest[k], OrgDest[k+1])); 
      } 
      waypts = []; 
      if(waypoints[routeName].length > 0) 
      { 
       wp = waypoints[routeName][j]; 
       for (var k = 0; k < wp.length; k += 2) { // loop over each waypoints in the path 
        waypts.push(
        {location:new google.maps.LatLng(wp[k], wp[k+1]), 
        stopover:true 
        }); 
       } 
      } 

      if(j>0)// & (j!=(orgdest[routeName].length))) 
       traceroutePath.setMap(null); //clearing previously rendered map 
      if(i>0 & j==0) 
      { 
       traceroutePath.setMap(null); //clearing previously rendered map 
      } 

      routePath = OrgDestpoints;    
      traceroutePath = new google.maps.Polyline({ 
       path: routePath, 
       strokeColor: routeColors[routeName], 
       strokeOpacity: 1.0, 
       strokeWeight: 2 
       }); 
      service = new google.maps.DirectionsService(),traceroutePath,snap_path=[]; 
      traceroutePath.setMap(map);    
      for(z=0;z<routePath.length-1;z++){ 
      service.route({origin: routePath[z],destination: routePath[z+1], 
      travelMode: google.maps.DirectionsTravelMode.DRIVING, 
      waypoints: waypts}, 
      function(result, status) { 
       if(status == google.maps.DirectionsStatus.OK) { 
        snap_path = snap_path.concat(result.routes[0].overview_path); 
        alert(result.routes[0].legs[0].start_location) 
        traceroutePath.setPath(snap_path); 
       } else alert("Directions request failed: "+status);   
      }); 
      }          
     } //end of j for loop; paths to form a route 

    }//end of i for loop; all routes   
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

Sie haben zwei Probleme, die das Problem verursachen.

1. der Code die Pfade aus den Richtungen Anfragen zusammen verketten, das ist ein Problem, weil:

   ein. Der Routenplaner-Dienst ist asynchron, die Routen können in einer anderen Reihenfolge als die von Ihnen gesendeten zurückkommen (es sei denn, Sie senden sie nacheinander).

   b. Die angeforderten Routen sind nicht kontinuierlich.

for (z = 0; z < routePath.length - 1; z++) { 
    service.route({ 
     origin: routePath[z], 
     destination: routePath[z + 1], 
     travelMode: google.maps.DirectionsTravelMode.DRIVING, 
     waypoints: waypts 
    }, 
    function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     var snap_path = result.routes[0].overview_path; 
     var traceroutePath = new google.maps.Polyline({ 
      strokeColor: routeColors[routeName], 
      strokeOpacity: 1.0, 
      strokeWeight: 2, 
      map: map 
     }); 
     traceroutePath.setPath(snap_path); 
     } else alert("Directions request failed: " + status); 
    }); 

proof of concept fiddle

Code-Schnipsel:

var infoWindow = new google.maps.InfoWindow(); 
 
var routePath; 
 
var OrgDest; 
 
var OrgDestpoints; 
 
var wp; 
 
var waypts; 
 
var traceroutePath; 
 
var service; 
 
var map; 
 
var marker, markloc; 
 
var markers = []; 
 
var orgdest = { 
 
    "1": [ 
 
    [12.9197565816171, 77.5923588994416, 12.95719452, 77.56829549], 
 
    [12.95719452, 77.56829549, 12.98997477, 77.57209867], 
 
    [12.98997477, 77.57209867, 13.02311, 77.55029] 
 
    ], 
 
    "KHC": [ 
 
    [12.97466107, 77.58199613, 12.97466107, 77.58199613] 
 
    ] 
 
}; 
 
var waypoints = { 
 
    "1": [ 
 
    [12.92268932, 77.59338455, 12.92318598, 77.58877168, 12.9279596, 77.58760419, 12.93610683, 77.58392363, 12.93672057, 77.57217014, 12.93956243, 77.57215225, 12.94189, 77.57358, 12.94574241, 77.57070059], 
 
    [12.95850855, 77.57402561, 12.96161187, 77.57527904, 12.96366, 77.56843, 12.96811874, 77.56800682, 12.97736, 77.57074, 12.98997477, 77.57209867], 
 
    [12.98997477, 77.57209867, 12.99789013, 77.57130999, 13.00908169, 77.5710476, 13.01742075, 77.55707759] 
 
    ], 
 
    "KHC": [ 
 
    [12.98420536, 77.59761828, 12.98368012, 77.6035693] 
 
    ] 
 
}; 
 
var routeColors = { 
 
    "1": "#FF00FF", 
 
    "KHC": "#800000" 
 
}; 
 
var routeNames = ["1", "KHC"]; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(12.9536775, 77.5883784), 
 
    zoom: 12 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 

 
    var routeInfoWindow = new google.maps.InfoWindow({ // this info window shows the route name when the mouse hovers over a route line 
 
    disableAutoPan: true 
 
    }); 
 

 
    for (var i = 0; i < routeNames.length; i++) { // loop over each route 
 
    var routeName = routeNames[i]; 
 
    for (var j = 0; j < orgdest[routeName].length; j++) { // loop over each path on the route    
 
     OrgDest = orgdest[routeName][j]; 
 
     OrgDestpoints = [] 
 
     for (var k = 0; k < OrgDest.length; k += 2) { // loop over each point in the path 
 
     OrgDestpoints.push(new google.maps.LatLng(OrgDest[k], OrgDest[k + 1])); 
 
     } 
 
     waypts = []; 
 
     if (waypoints[routeName].length > 0) { 
 
     wp = waypoints[routeName][j]; 
 
     for (var k = 0; k < wp.length; k += 2) { // loop over each waypoints in the path 
 
      waypts.push({ 
 
      location: new google.maps.LatLng(wp[k], wp[k + 1]), 
 
      stopover: true 
 
      }); 
 
     } 
 
     } 
 

 
     if (j > 0) // & (j!=(orgdest[routeName].length))) 
 
     traceroutePath.setMap(null); //clearing previously rendered map 
 
     if (i > 0 & j == 0) { 
 
     traceroutePath.setMap(null); //clearing previously rendered map 
 
     } 
 

 
     routePath = OrgDestpoints; 
 
     traceroutePath = new google.maps.Polyline({ 
 
     path: routePath, 
 
     strokeColor: routeColors[routeName], 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 2 
 
     }); 
 
     service = new google.maps.DirectionsService(), traceroutePath, snap_path = []; 
 
     traceroutePath.setMap(map); 
 
     for (z = 0; z < routePath.length - 1; z++) { 
 
     service.route({ 
 
      origin: routePath[z], 
 
      destination: routePath[z + 1], 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING, 
 
      waypoints: waypts 
 
      }, 
 
      function(result, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
       var snap_path = result.routes[0].overview_path; 
 
       var traceroutePath = new google.maps.Polyline({ 
 
       strokeColor: routeColors[routeName], 
 
       strokeOpacity: 1.0, 
 
       strokeWeight: 2, 
 
       map: map 
 
       }); 
 
       traceroutePath.setPath(snap_path); 
 
      } else alert("Directions request failed: " + status); 
 
      }); 
 
     } 
 
    } //end of j for loop; paths to form a route 
 

 
    } //end of i for loop; all routes   
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>