android 高德地图删除轨迹_基于Vue的高德地图,实现车辆轨迹回放.

最新推荐文章于 2024-08-09 10:28:00 发布

知乎树洞

最新推荐文章于 2024-08-09 10:28:00 发布

阅读量731

点赞数

文章标签： android 高德地图删除轨迹

本文链接：https://blog.csdn.net/weixin_29407885/article/details/112151216

版权

本文介绍如何基于Vue.js和高德地图API实现车辆轨迹回放功能。首先，设置了车辆的初始定位标记，并通过连接所有位置点绘制出轨迹线。接着，通过定时移动标记来模拟车辆动态行驶的效果。文章还提到，地图的初始化部分建议参照高德官方文档，作者计划将来将代码开源到GitHub。

摘要由CSDN通过智能技术生成

基于Vue的高德地图轨迹回放

做之前,试过百度的地图.感觉并不是非常好实现.关于这一方面的文档有,但是都比较老.在翻看很多文档之后,用高德来实现,将官方的demo.使用vue重新开发.

地图的使用可以参考高德官方文档 :

组件 | vue-amapelemefe.github.io

先讲一讲思路,先设置车辆初始定位标记小车.定位车辆的位置,将所有的点连接在一起画出来.图上这条蓝色的路径图.就是已经规划的的线,其次再是让小车动起来.设定时间移动标记的小车,从而达到这样的一个效果.

初始化地图建议参考官方文档,因为方法比较多. 到这里基本上就完成了.后续有时间会把代码开源到github上去.

             //DoM节点
             <div id="container" class="map"></div>
 
             //创建地图
             var map = new AMap.Map("container", {
                 resizeEnable: true,
                 center: [116.478935, 39.997761],
                 zoom: 17
             });
             //标记车辆
              marker = new AMap.Marker({
                 position: [116.478935,39.997761],
                 icon: "https://webapi.amap.com/images/car.png",
                 //坐标偏移
                 offset: new AMap.Pixel(-26, -13),
                 autoRotation: true,
                 angle:-90,
                 map:map
             });
             // 绘制轨迹路线
             var polyline = new AMap.Polyline({
                 map: this.map,
                 //这里替换自己的坐标数据
                 path: lineArr,
                 showDir:true,
                 strokeColor: "#28F",  //线颜色
                 strokeOpacity: 1,     //线透明度
                 strokeWeight: 6,      //线宽
                 strokeStyle: "solid"  //线样式
             });
             
             //调用方法开启动画
             marker.moveAlong(lineArr,200);