由于這個是官方的api,官方中也有案例，這裡就不細說了，直接上代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>途經點</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
.label {
padding: 10px 20px;
color: #fff;
font-size: 16px;
}
.label0 {
background: blueviolet;
border: 1px solid blueviolet;
}
.label1 {
background: pink;
border: 1px solid pink;
}
.label2 {
background: yellow;
border: 1px solid yellow;
}
.label3 {
background: red;
border: 1px solid red;
}
.amap-marker-label {
border: none;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
#panel .amap-lib-driving {
border-radius: 4px;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=960d4c12045ed072b809c3602ba776dd&plugin=AMap.Driving"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
let positionData = [
{ content: ['wwj', 'hhs', 'zjl'], position: [[116.388028, 39.865042],[116.579028, 39.885042], [116.427281, 40.903719],], linePoint: [[116.579028, 39.885042]] ,outlineColor:'#658'},
{ content: ['wwj', 'hhs', 'zjl', 'zmf'], position: [[115.388028, 34.865042],[116.579028, 39.185042], [116.579028, 38.885042], [116.427281, 38.903719]],
linePoint: [[116.579028, 39.185042], [116.579028, 38.885042]] ,outlineColor:'#3700ff'}
]
let position = [[116.388028, 39.865042], [116.427281, 40.903719]];
let linePoint = [[116.579028, 39.885042]]
var pos_marker = [];
var driving = [];
console.log(position)
//基本地圖加載
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地圖中心點
zoom: 13 //地圖顯示的縮放級别
});
var labelOffset = new AMap.Pixel(-23, -28);
let drivingData = {};
for (let i = 0; i < positionData.length; i++) {
for (let j = 0; j < positionData[i].content.length; j++) {
pos_marker[j] = new AMap.Marker({
position: positionData[i].position[j], // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]
label: {
content: `<div class='label${j} label'>${positionData[i].content[j]}</div>`,
offset: labelOffset
}
});
map.add(pos_marker[j])
// debugger
}
driving[i] = new AMap.Driving({
map: map,
panel: "panel",
isOutline: true,
outlineColor: positionData[i].outlineColor,
autoFitView: true,
ferry: 0.5
});
console.log( positionData[i].linePoint)
driving[i].search(positionData[i].position[0], positionData[i].position[positionData[i].position.length-1], {
waypoints:positionData[i].linePoint
}, function (status, result) {
// result 即是對應的駕車導航資訊，相關資料結構文檔請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log(result)
log.success('繪制駕車路線完成')
} else {
log.error('擷取駕車資料失敗：' + result)
}
});
}
</script>
</body>
</html>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)