Google Maps API - 多次捕捉道路多段線

Question

我在道路上插入了多段線捕捉。它工作正常。 現在，我想在同一張地圖上插入另一條單獨的折線對齊道路。它不能正常工作。它系統地將第一條折線的終點連接到第二條折線的起點。

感謝您的幫助。

這裏是我的代碼

function initialize() { 

var pos = new google.maps.LatLng(-26.431228,-69.572755); 

var myOptions = { 
    zoom: 5, 
    center: pos, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map'), myOptions); 

map.setCenter(pos); 


//FIRST POLYLINE SNAP TO ROAD 

ChileTrip1 = [ 
    new google.maps.LatLng(-33.417723,-70.605018), 
    new google.maps.LatLng(-33.022446,-71.551688) 
    ]; 

var traceChileTrip1 = new google.maps.Polyline({ 
    path: ChileTrip1, 
    strokeColor: "red", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path=[]; 
traceChileTrip1.setMap(map); 
for(j=0;j<ChileTrip1.length-1;j++){ 
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      snap_path = snap_path.concat(result.routes[0].overview_path); 
      traceChileTrip1.setPath(snap_path); 
     } 
    }); 
} 

//SECOND POLYLINE SNAP TO ROAD 

ChileTrip2 = [ 
    new google.maps.LatLng(-29.959694,-71.30825), 
    new google.maps.LatLng(-32.778038,-71.181908) 
]; 

var traceChileTrip2 = new google.maps.Polyline({ 
    path: ChileTrip2, 
    strokeColor: "blue", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path=[]; 
traceChileTrip2.setMap(map); 
for(j=0;j<ChileTrip2.length-1;j++){ 
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      snap_path = snap_path.concat(result.routes[0].overview_path); 
      traceChileTrip2.setPath(snap_path); 
     } 
    }); 
} 

    }; 
    window.onload = function() { initialize();}; 

Answer 1

的爲DirectionsService是異步的。請清除回調例程內snap_path陣列使用它之前或建立2個獨立的snap_path陣列：

function initialize() { 

var pos = new google.maps.LatLng(-26.431228,-69.572755); 

var myOptions = { 
    zoom: 5, 
    center: pos, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById('map'), myOptions); 

map.setCenter(pos); 


//FIRST POLYLINE SNAP TO ROAD 

ChileTrip1 = [ 
    new google.maps.LatLng(-33.417723,-70.605018), 
    new google.maps.LatLng(-33.022446,-71.551688) 
    ]; 

var traceChileTrip1 = new google.maps.Polyline({ 
    path: ChileTrip1, 
    strokeColor: "red", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path1=[]; 
traceChileTrip1.setMap(map); 
for(j=0;j<ChileTrip1.length-1;j++){ 
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      snap_path1 = snap_path1.concat(result.routes[0].overview_path); 
      traceChileTrip1.setPath(snap_path1); 
     } else alert("Directions request failed: "+status);   
    }); 
} 

//SECOND POLYLINE SNAP TO ROAD 

ChileTrip2 = [ 
    new google.maps.LatLng(-29.959694,-71.30825), 
    new google.maps.LatLng(-32.778038,-71.181908) 
]; 

var traceChileTrip2 = new google.maps.Polyline({ 
    path: ChileTrip2, 
    strokeColor: "blue", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
}); 

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path2=[]; 
traceChileTrip2.setMap(map); 
for(j=0;j<ChileTrip2.length-1;j++){ 
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) { 
     if(status == google.maps.DirectionsStatus.OK) { 
      snap_path2 = snap_path2.concat(result.routes[0].overview_path); 
      traceChileTrip2.setPath(snap_path2); 
     } else alert("Directions request failed: "+status);   
    }); 
} 

    }; 
    window.onload = function() { initialize();}; 

working example

注意，overview_path是「簡化」並不見得會走的道路。如果你需要確切的路線，你需要處理所有的腿。