vue是否可以做行车轨迹_Vue+高德地图巡航轨迹，实现轨迹回放加进度条，加减速...

weixin_39608132

于 2020-12-21 14:50:23 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue是否可以做行车轨迹

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_39608132/article/details/111796557

本文介绍了如何使用Vue和高德地图1.4实现行车轨迹回放，并添加进度条功能。通过PathSimplifier组件，实现轨迹回放的平滑效果，同时详细展示了关键代码和事件监听的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应公司业务要求，给轨迹回放加个滚动条，一开始我采用的是高德地图的折线绘制，但是如果要加上进度条并不太不合适，拖动滚动条，点位没有恢复的API，后来决定使用巡航轨迹，巡航轨迹支持更丰富的轨迹API，使用起来也更方便。

下面是做完的效果图：

使用的技术有：vue，高德地图1.4(amap)，element-UI

下面的是部分源码：

html部分

v-if="!isPlay"

class="play-icon"

type="ios-play"

@click="isPlay=true;navgControl('start')"

/>

{ {passedTime}}

倍速 { {times}}

{ {item.label}}

{ {totalTime}}

JS处理部分：

1.初始化地图：

lazyAMapApiLoaderInstance.load().then(() =>{this.map = new AMap.Map('test-map', {

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。