Google maps api 3 在谷歌地图上显示两点之间的多条路线

我想在谷歌地图上显示两个地点之间的多条路线。结果包含3个方向路由。DirectionsRender1.setDirections（结果）显示第一条管线。控制台打印routeindex1=0

在第15行，控制台打印routeindex2=1。但是，在第16行，DirectionsRenderR2.setDirections（结果）在第一条管线的顶部显示相同的管线。在第17行，控制台打印routeindex2=0。如何显示其他路线

 function renderDirections(result,map) {
   directionsRenderer1 = new google.maps.DirectionsRenderer({
      routeIndex: 0,
      polylineOptions: {strokeColor: "green"}
    });
   directionsRenderer1.setMap(map);
   directionsRenderer1.setDirections(result);
   console.log("routeindex1 = ",directionsRenderer1.getRouteIndex());

   directionsRenderer2 = new google.maps.DirectionsRenderer({
      routeIndex: 1,
      polylineOptions: {strokeColor: "blue"}
    });
   directionsRenderer2.setMap(map);
   console.log("routeindex2 = ",directionsRenderer2.getRouteIndex()); //line 15
   directionsRenderer2.setDirections(result);  //line 16 
   console.log("routeindex2 = ",directionsRenderer2.getRouteIndex()); //line 17
 }

---

默认情况下，DirectionsRenderer渲染路由0。似乎不管routeIndex的初始设置值如何，都会这样做。如果将路线索引与方向一起设置，它将起作用

var directionsRenderer1 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 0,
  map: map,
  polylineOptions: {
    strokeColor: "green"
  }
});

var directionsRenderer2 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 1,
  map: map,
  polylineOptions: {
    strokeColor: "blue"
  }
});

代码片段：

函数渲染方向（结果、映射）{
var directionsRenderer1=新的google.maps.directionsrender({
方向：结果，
路由索引：0，
地图：地图，
多段线选项：{
strokeColor：“绿色”
}
});
log（“routeindex1=，DirectionsRender1.getRouteIndex（））；
var directionsRenderer2=新的google.maps.directionsrender({
方向：结果，
路线索引：1，
地图：地图，
多段线选项：{
strokeColor：“蓝色”
}
});
console.log（“routeindex2=，DirectionsRender2.getRouteIndex（））；//第17行
}
函数calculateAndDisplayRoute（起点、终点、方向服务、方向显示、地图）{
方向服务.路线({
来源:来源,，
目的地：目的地，
travelMode:google.maps.travelMode.DRIVING，
ProviderRouteAlternatives:true
}，功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
渲染方向（响应、地图）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
函数初始化（）{
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
计算显示路线（新google.maps.LatLng（51.61793418642200，-0.13678550737318）、新google.maps.LatLng（51.157888846699750，-0.1636453269）、方向服务、方向显示、地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
默认情况下，DirectionsRenderer渲染路由0。似乎不管routeIndex的初始设置值如何，都会这样做。如果将路线索引与方向一起设置，它将起作用

var directionsRenderer1 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 0,
  map: map,
  polylineOptions: {
    strokeColor: "green"
  }
});

var directionsRenderer2 = new google.maps.DirectionsRenderer({
  directions: result,
  routeIndex: 1,
  map: map,
  polylineOptions: {
    strokeColor: "blue"
  }
});


代码片段：


函数渲染方向（结果、映射）{
var directionsRenderer1=新的google.maps.directionsrender({
方向：结果，
路由索引：0，
地图：地图，
多段线选项：{
strokeColor：“绿色”
}
});
log（“routeindex1=，DirectionsRender1.getRouteIndex（））；
var directionsRenderer2=新的google.maps.directionsrender({
方向：结果，
路线索引：1，
地图：地图，
多段线选项：{
strokeColor：“蓝色”
}
});
console.log（“routeindex2=，DirectionsRender2.getRouteIndex（））；//第17行
}
函数calculateAndDisplayRoute（起点、终点、方向服务、方向显示、地图）{
方向服务.路线({
来源:来源,，
目的地：目的地，
travelMode:google.maps.travelMode.DRIVING，
ProviderRouteAlternatives:true
}，功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
渲染方向（响应、地图）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
函数初始化（）{
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
计算显示路线（新google.maps.LatLng（51.61793418642200，-0.13678550737318）、新google.maps.LatLng（51.157888846699750，-0.1636453269）、方向服务、方向显示、地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

请提供一个演示问题的示例。请提供一个演示问题的示例。，