效果图
首先,指路api
https://lbs.amap.com/demo/javascript-api/example/driving-route/plan-route-according-to-lnglat
async initMap() {
// 基本地图加载
const map = new AMap.Map("container", {
resizeEnable: true,
center: [108.946726, 34.222857], // 地图中心点
zoom: 13, // 地图显示的缩放级别
});
// 引入很重要
AMap.plugin(
[
"AMap.ToolBar",
"AMap.Scale",
"AMap.Transfer",
"AMap.Geolocation",
"AMap.StationSearch",
],
() => {
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
map.addControl(new AMap.Transfer());
map.addControl(new AMap.Geolocation());
map.addControl(new AMap.StationSearch());
}
);
// 构造路线导航类
const driving = new AMap.Driving({
map: map,
policy: AMap.DrivingPolicy.LEAST_TIME,
// hideMarkers: true,
panel: "panel",
});
const lats = this.list.map((item) => item.lngLat);
const lagArr = (lats.length && lats[0]) || [];
const startLngLat = [lagArr.lng, lagArr.lat];
const latArr = (lats.length && lats[lats.length - 1]) || [];
const endLngLat = [latArr.lng, latArr.lat];
for (let index = 0; index < lats.length; index++) {
const lastMarkerClass =
index + 1 === lats.length ? " step-map-last" : "";
var marker = new AMap.Marker({
position: [lats[index].lng, lats[index].lat],
content: `<div class="d-step-number${lastMarkerClass}">${
index + 1
}</div>`,
offset: new AMap.Pixel(-13, -30),
});
marker.setMap(map);
}
driving.search(
new AMap.LngLat(startLngLat[0], startLngLat[1]),
new AMap.LngLat(endLngLat[0], endLngLat[1]),
function (status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === "complete") {
console.log("绘制路线完成");
} else {
console.log("获取路线失败:" + result);
}
}
);
},
// html里面
<div id="container" />
<div id="panel" /> // 必须要有,不然出来
最重要的是要在html里面引入绘制地图的js