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; 
}