如何使用javascript在google maps中的多个标记之间绘制路线图

我使用谷歌地图API开发了地图。标记可以通过适当的标签看到。但是如何在多个标记之间绘制路线

谷歌地图图片：

JS文件代码如下（userhistory.JS）

var标记=[]；
$（“#地图”）.show（）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（17.7254567,83.3097112），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
var infowindow=new google.maps.infowindow（）；
var i；
对于（i=0；i“+”日期和时间：“+response[i].日期+”，“+response[i].时间+”，“+”
“+”位置：“+response[i].地址）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}

您可以按照此处的示例使用标记作为生成路线的航路点

var标记=[]；
$（“#地图”）.show（）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（17.7254567,83.3097112），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var方向显示；
var directionsService=new google.maps.directionsService（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
var起始点；
var终点；
var-waypts=[]；
var infowindow=new google.maps.infowindow（）；
var i；
对于（i=0；i0）和&（i“+”日期和时间：“+response[i].日期+”，“+response[i].时间+”，“+”
“+”位置：“+response[i].地址）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}
calcRoute（起点、终点、路线点）；
//添加此功能
函数计算（开始、结束、路径）{
var请求={
来源：start，
目的地:完，
航路点：航路点，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}

谢谢您的回复。我试过了，老板。我认为这不是正确的答案。它工作得很好，但有一个标记是在我原来的标记的底部创建的。内部标记颜色为绿色，并且有自己的信息窗口。我不需要内部标记。

var marker = []; 
$("#map").show();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(17.7254567, 83.3097112),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map); 

var startPoint;
var endPoint;
var waypts = [];

var infowindow = new google.maps.InfoWindow();
var i;

for (i = 0; i < response.length; i++) {       
marker = new google.maps.Marker({
    position: new google.maps.LatLng(response[i].latitude, response[i].longitude),
    map: map,
    label: response[i].count
}); 

if (i == 0) {
    startPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude)
}

if (i == response.length - 1) {
    endPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude),
}

if ((i > 0) && (i < response.length - 1)) {
    waypts.push({
        location: ew google.maps.LatLng(response[i].latitude, response[i].longitude),
        stopover: true
    });
}

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
    infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address);
    infowindow.open(map, marker);
}
})(marker, i));  
}

calcRoute(startPoint, endPoint, waypts);

//add this function
function calcRoute(start,end,waypts) { 
var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
}
});
}