前言
由于AMapUI文档早已不更新了，官方文档示例中源码也是原生js版的，近期项目中要使用相关功能，改成vue版的，摸索了一下，将官方示例修改成了vue版本简单路径-轨迹展示-示例中心-JS API UI 组件示例 | 高德地图API
这里是提供一个改成vue版本的思路，其他示例按这个方案修改即可
准备工作
申请高德地图api key，npm加载Loader，具体参考官方文档，这里不再赘述
JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0 | 高德地图API
直接使用 AMapLoader.load 创建高德地图，同时加载 AMapUI，下面放完整代码，相关注意事项都在注释中
实现效果
跟官方文档效果图一致
完整代码
<template>
<div id="map-container"></div>
</template>
<script>
let that;
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: 'Amap-container',
components: {},
props: {},
data() {
return {
map: null,
};
},
computed: {},
watch: {},
created() {
that = this;
},
mounted() {
this.initAMap();
},
beforeDestroy() {
// this.map?.destroy();
},
methods: {
initAMap() {
let key = process.env.VUE_APP_AMAP_KEY; //你申请的高德地图AMapJS key
AMapLoader.load({
key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
version: '1.1',
plugins:['misc/PathSimplifier']
//文档中用AMapUI.load加载使用的'ui/misc/PathSimplifier'，但是这里用AMapLoader.load方式加载会默认带ui这一级
}
})
.then((AMap) => {
this.map = new AMap.Map("map-container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
mapStyle: "", //设置地图的显示样式
zoom: 4, // 初始化地图级别
//center: [120.209758, 30.246809], // 初始化地图中心点位置,该坐标为杭州
});
this.map.plugin(["AMap.Scale","AMap.ToolBar"], function () {
//在回调函数中实例化插件，并使用插件功能
let toolbar = new AMap.ToolBar(); //创建工具条插件实例
that.map.addControl(toolbar); //添加工具条插件到页面
that.map.addControl(new AMap.Scale());
});
//PathSimplifier依赖Canvas进行绘制，因此不支持IE9及以下浏览器。需要做判断
if (!AMapUI.PathSimplifier.supportCanvas) {
console.log('当前环境不支持 Canvas!');
return;
}else{
this.initPathSimplifier();
}
})
.catch((e) => {
console.log(e);
});
},
initPathSimplifier() {
let pathSimplifierIns = new AMapUI.PathSimplifier({
map: this.map, //所属的地图实例
zIndex: 100, //绘制用图层的叠加顺序值。如果需要叠加在地图的最上层，可以设置一个较大的值，比如300
//data:[] , //数据源数组，每个元素即为轨迹相关的信息
//clickToSelectPath:false, //点击轨迹节点或者轨迹节点间的连线时，选中该轨迹，默认true。
//autoSetFitView:false, //是否在绘制后自动调整地图视野以适合全部轨迹，默认true。
//onTopWhenSelected:false, //置顶选中的轨迹线；置顶的含义是，将该轨迹线的zIndex设置为现存最大值+1。默认true。
/**
* @param pathData 返回轨迹数据中的路径信息/节点坐标信息
* @param {*} pathData 轨迹数据项
* @param {number} pathIndex 轨迹索引
* @return {Array.<AMap.LngLat|[number,number]>}
* 返回轨迹的节点坐标数组，数组元素可以是经纬度实例([AMap.LngLat, AMap.LngLat...])
* 或者经纬度数字组成的数组([lng, lat]/[[lng|number,lat|number],...])
*/
getPath: function(pathData, pathIndex) {
return pathData.path; //[ [lng1, lat2], [lng2,lat2]......]
},
/**
* 返回鼠标悬停时显示的Title内容
* @param {*} pathData 轨迹数据项
* @param {number} pathIndex 轨迹索引
* @param {number} pointIndex 轨迹节点索引；如果悬停在节点之间的连线区域，该值为-1
* @return {String} 返回Title内容，无内容时可以返回null
*/
getHoverTitle: function(pathData, pathIndex, pointIndex) { //返回鼠标悬停时显示的信息
if (pointIndex >= 0) {
//鼠标悬停在某个轨迹节点上
return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
}
//鼠标悬停在节点之间的连线上
return pathData.name + '，点数量' + pathData.path.length;
},
/**
* 绘制引擎的构造参数
* https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifier#t3
*/
renderOptions: { //渲染选项
renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
pathLineStyle: {//轨迹线的样式
strokeStyle: 'red',
lineWidth: 6,
dirArrowStyle: true
}
}
})
// window.pathSimplifierIns = pathSimplifierIns; //官方文档示例中有这段代码，我没懂什么意思，注释掉好像也没影响
//设置数据，构建轨迹
pathSimplifierIns.setData([{
name: '路线0',
path: [
[116.405289, 39.904987],
[113.964458, 40.54664],
[111.47836, 41.135964],
[108.949297, 41.670904],
[106.380111, 42.149509],
[103.774185, 42.56996],
[101.135432, 42.930601],
[98.46826, 43.229964],
[95.777529, 43.466798],
[93.068486, 43.64009],
[90.34669, 43.749086],
[87.61792, 43.793308]
]
}]);
/**
* createPathNavigator 创建一个轨迹巡航器
* @param {number} pathIndex 关联的轨迹索引
* @param {Object} options 巡航器的配置选项，详见轨迹巡航器 PathNavigator https://lbs.amap.com/api/amap-ui/reference-amap-ui/mass-data/pathsimplifier#t4
*/
let navg0 = pathSimplifierIns.createPathNavigator(0, {
loop: true, //循环播放
speed: 1000000 //巡航速度，单位千米/小时
});
navg0.start();
},
},
};
</script>
<style lang="scss" scoped>
#map-container {
width: 100%;
height: 800px;
}
</style>
