如何在javascript google map API中显示多个坐标之间的路径

我想在多个坐标之间创建一条路径，这些坐标来自一个阵列，通过方向服务，我想渲染这些坐标之间的路径。如果您在此处查看坐标阵列：

var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319},  
"destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, 
"lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}];

我试图用下面的代码生成代码，但它只提供了最后一组源代码和目标代码之间的路径

var directionsService = new google.maps.DirectionsService();

var indiaLatlng = {lat: 28.6139, lng : 77.2090};
map = new google.maps.Map(document.getElementById("map"), {
    center : indiaLatlng,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var rendererOptions = {
preserveViewport: true,         
suppressMarkers:true
};
var requestResource = [{"origin": {"lat": 26.4499, "lng": 80.3319}, "destination": {"lat": 28.6139, "lng": 77.2090}}, {"origin": {"lat": 28.6139, "lng": 77.2090},"destination": {"lat": 28.9845, "lng": 77.7064}}];
for(var r in requestResource) {
    var resource = requestResource[r];
    var mapRequest = {
        origin : resource["origin"],
        destination : resource["destination"],
        travelMode: google.maps.TravelMode.DRIVING
    }
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);
    directionsService.route(mapRequest, function(result, status) {
        console.log(result);
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    }); 
}

---

您的代码中只有一个

google.maps.DirectionsRenderer

对象。每次设置方向时，都会覆盖上一次显示。为要显示的每条管线创建新的DirectionsRenderer

代码片段：

var映射；
函数初始化（）{
var directionsService=new google.maps.directionsService（）；
风险指数={
拉脱维亚：28.6139，
液化天然气：77.2090
};
map=new google.maps.map（document.getElementById（“map”）{
中心：印度，
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var renderoptions={
对,，
真的吗
};
var requestResource=[{
“起源”：{
“lat”：26.4499，
“液化天然气”：80.3319
},
“目的地”：{
“lat”：28.6139，
“液化天然气”：77.2090
}
}, {
“起源”：{
“lat”：28.6139，
“液化天然气”：77.2090
},
“目的地”：{
“lat”：28.9845，
“液化天然气”：77.7064
}
}];
var bounds=new google.maps.LatLngBounds（）；
for（requestResource中的var r）{
var-resource=requestResource[r]；
变量映射请求={
来源：资源[“来源”]，
目的地：资源[“目的地”]，
travelMode:google.maps.travelMode.DRIVING
}
extend（新的google.maps.LatLng（resource[“origin”].lat，resource[“origin”].lng））；
extend（新的google.maps.LatLng（resource[“destination”].lat，resource[“destination”].lng））；
映射边界（bounds）；
路由（映射请求、函数（结果、状态）{
控制台日志（结果）；
if（status==google.maps.directionstatus.OK）{
var directionsDisplay=new google.maps.directionsrender（renderoptions）；
方向显示.setMap（地图）；
方向显示。设置方向（结果）；
}else警报（“指示请求失败，状态：+状态”）
});
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}