参照高德官网api,首先我们要先创建一个地图才能创建地图巡航器。
//地图
loadMap() {
const V = this;
V.map = new AMap.Map('map', {
resizeEnable: true,
});
},
再根据官网,我们需要先进行判断
AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!');
return;
}
});
然后可以设置路线的样式、起点和终点的样式
let defaultRenderOptions = {
pathLineStyle: { //路线样式设置
lineWidth: 5,
strokeStyle: '#CDCDB4',
dirArrowStyle: false
},
startPointStyle: { //起点
radius: 5,
fillStyle: '#109618',
lineWidth: 1,
strokeStyle: '#eeeeee'
},
endPointStyle: { //终点
radius: 5,
fillStyle: '#dc3912',
lineWidth: 1,
strokeStyle: '#eeeeee'
},
};
接下来就是绘制路线
pathSimplifierIns = new PathSimplifier({
map: V.map,
name: name,
zIndex: 100,
autoSetFitView: false,
data: pathlist,
// 获取巡航路径中的路径坐标数组
getPath: (pathData, pathIndex) => {
return pathData.path;
},
getHoverTitle: function (pathData, pathIndex, pointIndex) {
return pathData.name;
},
});
最后是创建巡航器
pathNavigator = pathSimplifierIns.createPathNavigator(0, {
loop: false, // 是否循环
speed: 50, // 速度(km/h)
pathNavigatorStyle: {
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 5,
strokeStyle: red,
},
}
});
// 启动巡航器
pathNavigator.start();