利用vue+高德地图API 实现用户的运动轨迹

高德地图网址：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

任务一：实现地图显示

先完成准备工作，这一步是后面工作的基础。准备工作部分参考了：

https://blog.csdn.net/qq_59863007/article/details/125902045

http://t.zoukankan.com/fontomas-p-13253963.html

注册，拿到key
安装：npm i @amap/amap-jsapi-loader --save

在 public/index.html 中加入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

在main.js页面中配置安全密钥

   window._AMapSecurityConfig = {securityJsCode: '你的安全密钥' //*  安全密钥}

5 .创建地图组件，后续我调用组件实现
5.1 创建组件

<template><div><!-- 用来显示地图 --><!-- 可以不写宽度，但一定要有高度 --><div id="container"  ></div><h2>{{fathermsg}}<></div>
</template>
<script>export default {name: 'Map2 ',data() {return {}},props: {fathermsg:{}}
</script>
<style scoped>#container{width: 100%;height: 500px;}
</style>

注： props: {
fathermsg:{}
} 用来接收前端传来的值；

5.2 在 main.js中注册组件

// 高德地图组件
import Map2 from "@/components/Map2"
// 全局组件挂载
Vue.component('Map2', Map2)

5.3 调用组件

<template><div><Map2 :fathermsg="pmsg" ></Map2></div></template><script>import Map2 from '../components/Map2/index.vue'export default {name: 'hw3',components:{Map2},data(){return{pmsg:"这是父组件"}}}
</script><style scoped></style>

注： <Map2> </Map2>是组件名称

想给组件传值的话，写成 <Map2 :fathermsg="pmsg" ></Map2>

pmsg会赋给 fathermsg 然后传过去，那边接受的值也是fathermsg 。

到这里：可以实现地图的显示，而且父组件的消息能够传到子组件才对

接下来的任务就不细分了，直接上代码，任务包括：

任务二：添加标记点

任务三：轨迹数据的相互传输

任务四：根据数据实现轨迹效果并沿着运动

任务五：轨迹删除，标记点删除

…/components/Map2/index.vue的代码

<template><div><!-- 用来显示地图 --><!-- 可以不写宽度，但一定要有高度 --><div id="container"  ></div><el-buttonicon="el-icon"size="mini"@click="addTrack">轨迹回放</el-button><el-buttonicon="el-icon-delete"size="mini"@click="delTrack">轨迹删除</el-button></div>
</template><script>//引入高德地图//import AMap from '@amap/amap-jsapi-loader'export default {name: 'Map2 ',data() {return {map: null,marker: null,msg:"这是子组件",temp:[],polyline:[],passedPolyline:[],startMarker:null,// 用于测试的轨迹数据，父组件传来的polylinefather也是这种格式lineArr: [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],}},props: {polylinefather:{type:[String,Number,Array],},pmsg:{}},
//mounted()负责初始化的工作包括：1.生成地图2.确定初始中心点3.生成初始标记点mounted() {//生成一个地图对象，确定初始中心点var map=new window.AMap.Map('container', { // eslint-disable-line no-unused-varszoom:10,//级别center:[116.478935,39.997761],//中心点坐标viewMode:'2D'//使用2D视图});// 生成一个标记点marker：let lng=116.38;let lat=39.90;this.marker = new window.AMap.Marker({position: new window.AMap.LngLat( lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '',});// 将创建的点标记添加到已有的地图实例：map.add(this.marker);this.map=map;console.log("marker添加成功");},
//方法调用，实现轨迹的生成和删除methods: {// 添加轨迹addTrack() {// 重新根据传来的值，选取第一个坐标，创建一个 标记点Marker实例和设置地图的中心点：var lng=this.polylinefather[0][0];var lat=this.polylinefather[0][1];// 1.重新设置地图中心点var position = new AMap.LngLat(lng, lat);  // 标准写法//2.重建一个标记点 marker// 2.1需要移除已创建的 markerthis.map.remove(this.marker);// 2.2创建新的 markerthis.marker = new window.AMap.Marker({position: new window.AMap.LngLat( lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: '',});// 2.3将创建的点标记添加到已有的地图实例：this.map.add(this.marker);// 用折线绘制轨迹this.polyline = new window.AMap.Polyline({map: this.map,path: this.polylinefather,// 添加dirImg可以自定义路线的箭头，支持Image和CanvasshowDir: true,dirImg:'https://a.amap.com/jsapi_demos/static/images/mass0.png',strokeColor: "#28F", //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 10, //线宽strokeStyle: "solid"  //线样式});// 创建了一个车辆的点用于运动this.startMarker = new AMap.Marker({map: this.map,size: new window.AMap.Size(50, 52),// 第一个点为起点position: this.polylinefather[0],icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",offset: new AMap.Pixel(-35, -20),});console.log("轨迹绘制2");this.startAnimation();console.log("运动2");},// 开始运动startAnimation() {// 加载插件MoveAnimationwindow.AMap.plugin("AMap.MoveAnimation", () => {// 运动过的轨迹样式this.passedPolyline = new window.AMap.Polyline({map: this.map,strokeColor: "#AF5", //线颜色strokeWeight: 6, //线宽});// 绑定运动事件this.startMarker.on("moving", (e) => {this.passedPolyline.setPath(e.passedPath);this.map.setCenter(e.target.getPosition(), true);});// 开始运动this.startMarker.moveAlong(this.polylinefather, {// 每段动画持续时长, 单位：msduration: 500,// 覆盖物是否沿路径旋转autoRotation: true,});});},// 删除轨迹delTrack() {// 移除已创建的 markerthis.map.remove(this.marker);console.log("轨迹删除方法开始")// 起点删除if (this.startMarker) {this.startMarker.remove();this.startMarker = null;}// 折线删除if (this.polyline) {this.polyline.setMap(null);this.polyline = null;}// 走过的折线删除if (this.passedPolyline) {this.passedPolyline.setMap(null);this.passedPolyline = null;}}}}
</script><style scoped>#container{width: 100%;height: 500px;}
</style>

views/index.vue代码

<template><div><Map2 :pmsg="pmsg" :polylinefather="polyline04" ></Map2></div></template><script>import Map2 from '../components/Map2/index.vue'export default {name: 'hw3',components:{Map2},data(){return{polyline04:[ [ 116.478935, 39.997761 ], [ 116.478939, 39.997825 ], [ 116.478912, 39.998549 ], [ 116.478912, 39.998549 ], [ 116.478998, 39.998555 ], [ 116.478998, 39.998555 ], [ 116.479282, 39.99856 ], [ 116.479658, 39.998528 ], [ 116.480151, 39.998453 ], [ 116.480784, 39.998302 ], [ 116.480784, 39.998302 ], [ 116.481149, 39.998184 ], [ 116.481573, 39.997997 ], [ 116.481863, 39.997846 ], [ 116.482072, 39.997718 ], [ 116.482362, 39.997718 ], [ 116.483633, 39.998935 ], [ 116.48367, 39.998968 ], [ 116.484648, 39.999861 ] ],pmsg:"这是父组件"}}}
</script><style scoped></style>

最终效果：

轨迹回放，标记点为轨迹的第一个点

轨迹删除，轨迹和标记点都删除了

最后总结：

刚开始用的百度地图的api，试了一下，发现传过去的值渲染有问题，最后才选了高德地图的api。

高德地图的api使用需要注意的点是Map对象生成这一步可能会存在问题，可能会报错
如： ‘map’ is assigned a value but never used 和 ‘AMap’ is not defined
解决方案见这位up主的评论区：
https://www.bilibili.com/video/BV1EZ4y1z72F/?spm_id_from=333.999.0.0&vd_source=a56e9c2852c4b906ac796aa4c61964ec
还有一点就是this.map和map的使用需要注意这点我踩了很多坑
掌握前端的 debugger 手段
https://blog.csdn.net/leaning_java/article/details/122828550
复习了下 vue 中父子组件
https://www.bilibili.com/video/BV1TW4y1r7vV/?spm_id_from=333.337.search-card.all.click&vd_source=a56e9c2852c4b906ac796aa4c61964ec
复习了父子组件之间的通信
https://www.bilibili.com/video/BV1Zy4y1W7Xo/?spm_id_from=333.337.search-card.all.click&vd_source=a56e9c2852c4b906ac796aa4c61964ec
进阶知识，以后再看vue 利用高德地图的巡航轨迹，做带进度条和倍速的轨迹回放_Jusme_wx的博客-CSDN博客_高德轨迹回放进度条