利用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-button
icon="el-icon"
size="mini"
@click="addTrack"
>轨迹回放</el-button>
<el-button
icon="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-vars
zoom: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需要移除已创建的 marker
this.map.remove(this.marker);
// 2.2创建新的 marker
this.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和Canvas
showDir: 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() {
// 加载插件MoveAnimation
window.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, {
// 每段动画持续时长, 单位：ms
duration: 500,
// 覆盖物是否沿路径旋转
autoRotation: true,
});
});
},
// 删除轨迹
delTrack() {
// 移除已创建的 marker
this.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>
最终效果：
轨迹回放，标记点为轨迹的第一个点
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZS0DWnxl-1664959308957)(D:/GitCode/tuchuang/img/image-20221005163109129.png)]](https://i-blog.csdnimg.cn/blog_migrate/86385af98a7f462ca1f795902902b226.png)
轨迹删除，轨迹和标记点都删除了
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAU6VF9I-1664959308959)(D:/GitCode/tuchuang/img/image-20221005163125930.png)]](https://i-blog.csdnimg.cn/blog_migrate/38a5faba025efbf106e35dcc55d6ced4.png)
最后总结：
刚开始用的百度地图的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博客_高德轨迹回放进度条
扫一扫
1684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
