首先上效果圖
Html源碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>運輸軌跡圖</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:1000px;height:800px;border:1px solid gray" id="container"></div>
<script type="text/javascript">
window.onload = function(){
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.clearOverlays(); //清除地圖上所有的覆蓋物
var driving = new BMap.DrivingRoute(map); //創建駕車實例
// 座標點數據
var pointArr = [{lng: 120.37330074071, lat: 31.498294737149},{lng: 120.57330074071, lat: 31.498294737149},{lng: 120.87330074071, lat: 31.498294737149},{lng: 121.37330074071, lat: 31.498294737149}];
// 生成座標點
var trackPoint = [];
for (var i = 0, j = pointArr.length; i < j; i++) {
trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
}
for (var i = 0; i < trackPoint.length; i++) {
if(i != trackPoint.length -1 ){
driving.search(trackPoint[i], trackPoint[i+1]);
}
}
driving.setSearchCompleteCallback(function(){
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
// 畫圖標、想要展示的起點終點途經點
for (var i = 0; i < trackPoint.length; i++) {
var lab;
if(i == 0){
lab = new BMap.Label("起點",{position:trackPoint[i]});
}else if(i == trackPoint.length - 1){
lab = new BMap.Label("終點",{position:trackPoint[i]});
}else{
/* lab = new BMap.Label("途徑點",{position:trackPoint[i]}) */
}
var marker = new BMap.Marker(trackPoint[i])
map.addOverlay(marker);
map.addOverlay(lab);
}
map.setViewport(trackPoint);
});
}
</script>
</body>
</html>
</body>
</html>
參考文章：
https://cshbbrain.iteye.com/blog/1858954
https://blog.csdn.net/ZYD45/article/details/87545988