在线提供了许多使用多个航点创建Google地图的示例/代码。我已经通过排除所有标记创建了类似版本的代码，单击按钮..等等。
我使用谷歌地图V3航路点在多个目的地之间创建路线。由于我们不能使用超过8个航点，我正在使用批次处理多个航点。在下面的代码中有19个GPS位置，其中10个点位置是一批处理，另一批处理9。调用 drawRouteMap 函数来绘制10个（或更少）gps位置的路径。
问题是每个函数调用都会覆盖Google地图.Google地图的输出会显示最新处理的值。任何人都可以建议我出错的地方
<!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>
答案 0 :(得分：3)
您需要为要在地图上显示的每条路线创建一个单独的DirectionsRenderer实例。
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);
}
});
}
working fiddle (but you probably want to connect the two routes)
working fiddle with common point
工作代码段：
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>