DirectionsService未按代碼要求工作

Question

我正在嘗試使用Google地圖的DirectionsService傳遞的任意兩個位置之間的路線。這些位置正在動態地向我提供。但是我面臨的問題是，當接下來的2個座標到來時，它會刪除以前的路線並顯示新的路線和新的座標。我也不能使用航點，因爲最大值。 8個航點是允許的，我需要的不止於此。 這裏是我的代碼：

var marker; 
var map; 
var mapOptions; 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
function initialize() { 

    var rendererOptions = { 
    map : map, 
    suppressMarkers : true 
    } 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(23.53265,77.754812) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    directionsDisplay.setMap(map); 


} 
//var image = 'C:\Users\Samir\Desktop\download.jpg'; 
var start = new google.maps.LatLng(23.32654,77.32685); 

function Plot_Data(latlng){ 

    //end = new google.maps.LatLng(lat,lng); 
    marker = new google.maps.Marker({ 
    position: latlng , 
    map: map 

    }); 

    var request = { 
     origin:start, 
     destination:latlng, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 

    start = latlng; 


} 

Answer 1

一個的DirectionsRenderer將在同一時間只能顯示一個途徑。這將爲您每次調用Plot_Data函數時添加一個新的函數，但仍將受到API速率和查詢限制的約束：

var marker; 
var map; 
var mapOptions; 
var directionsDisplay = []; 
var directionsService = new google.maps.DirectionsService(); 
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
function initialize() { 

    var rendererOptions = { 
    map : map, 
    suppressMarkers : true 
    } 
    directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions)); 
    mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(23.53265,77.754812) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    directionsDisplay.setMap(map); 
} 
//var image = 'C:\Users\Samir\Desktop\download.jpg'; 
var start = new google.maps.LatLng(23.32654,77.32685); 

function Plot_Data(latlng){ 

    //end = new google.maps.LatLng(lat,lng); 
    marker = new google.maps.Marker({ 
    position: latlng , 
    map: map 

    }); 

    var request = { 
     origin:start, 
     destination:latlng, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay[directionsDisplay.length-1].setDirections(response); 
     directionsDisplay[directionsDisplay.length-1].setMap(map); 
     directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions)); 
    } else alert("directions request failed: " +status); 
    }); 
    start = latlng; 
}