利用vue+高德地图API 实现用户的运动轨迹 |
您所在的位置：网站首页 › 高德地图查看患者轨迹怎么查的 › 利用vue+高德地图API 实现用户的运动轨迹 |
利用vue+高德地图API 实现用户的运动轨迹
|
利用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 中加入： 在main.js页面中配置安全密钥 window._AMapSecurityConfig = { securityJsCode: '你的安全密钥' //* 安全密钥 }5 .创建地图组件，后续我调用组件实现 5.1 创建组件 {{fathermsg}} export default { name: 'Map2 ', data() { return { } }, props: { fathermsg:{} } #container{ width: 100%; height: 500px; }注： props: { fathermsg:{} } 用来接收前端传来的值 ； 5.2 在 main.js中注册组件 // 高德地图组件 import Map2 from "@/components/Map2" // 全局组件挂载 Vue.component('Map2', Map2)5.3 调用组件 import Map2 from '../components/Map2/index.vue' export default { name: 'hw3', components:{ Map2 }, data(){ return{ pmsg:"这是父组件" } } }注： 是组件名称 想给组件传值的话，写成 pmsg会赋给 fathermsg 然后传过去，那边接受的值也是fathermsg 。 到这里：可以实现地图的显示，而且父组件的消息能够传到子组件才对 接下来的任务就不细分了，直接上代码，任务包括：任务二：添加标记点 任务三：轨迹数据的相互传输 任务四：根据数据实现轨迹效果并沿着运动 任务五：轨迹删除，标记点删除 …/components/Map2/index.vue的代码 轨迹回放 轨迹删除 //引入高德地图 //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; } } } } #container{ width: 100%; height: 500px; }views/index.vue代码 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:"这是父组件" } } } 最终效果：轨迹回放，标记点为轨迹的第一个点
轨迹删除，轨迹和标记点都删除了
刚开始用的百度地图的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博客_高德轨迹回放进度条 |
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZS0DWnxl-1664959308957)(D:/GitCode/tuchuang/img/image-20221005163109129.png)]](https://img-blog.csdnimg.cn/44106e8681c849afa9ca855295cb60c8.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAU6VF9I-1664959308959)(D:/GitCode/tuchuang/img/image-20221005163125930.png)]](https://img-blog.csdnimg.cn/f4724c54956743a1bc658b090d6eef25.png)
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |