uniapp(全端兼容) - 最新详细实现腾讯地图轨迹回放功能，uniapp腾讯地图点击按钮播放地图绘制的轨迹，并自定义在轨道上行驶的汽车图片图标、汽车顶部文字信息、自定义轨道样式（详细示例运行代码）

已于 2024-07-29 11:14:38 修改
阅读量4.1k 收藏 5
点赞数 9
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app 腾讯地图 轨迹回放 腾讯地图行驶轨迹api uniapp全平台端兼容 各端兼容的腾讯地图播放轨迹 详细示例代码教程demo
于 2024-05-17 12:00:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/139000307
版权
本文详述了在uni-app中实现腾讯地图的轨迹回放功能，覆盖微信小程序、H5、安卓、iOS及支付宝小程序等多个平台。通过配置、HTML布局、数据绑定及主要逻辑代码，演示了如何在地图上绘制轨迹并让定制的小车图标沿着轨迹平滑移动，同时提供按钮控制播放、暂停等操作，适用于全平台兼容的应用场景。
摘要由CSDN通过智能技术生成

效果图（录屏有点模糊，实际很流畅）

在uniapp微信小程序/手机h5网页网站/安卓app/苹果app/支付宝小程序/nvue等（全平台完美兼容）开发中，实现uniApp各端都兼容的 “腾讯地图，车辆移动轨迹回放效果”，自定义移动物体、可在上方添加数据信息进行展示。通过点击开始播放按钮，小车开始按照地图上的轨迹进行移动，运行丝滑流畅。

uniapp Vue3和Vue2都能用，详细示例代码，一键复制运行后稍微改下就能用了！

在这里插入图片描述

配置工作

首先来配置下腾讯地图，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
uniapp(全端兼容) - 详细实现腾讯地图根据当前位置获取周边示例，根据定位推荐附近的商场餐厅医院交通等百度地图POI类型分类，并在地图上悬浮周边推荐列表切换类型，获取附近地址名称及详细地址和距离
最新发布
高级前端工程师
10-21 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，腾讯地图，附近周边推荐，uniapp腾讯地图如何获取周边推荐，腾讯地图API获取当前位置对应的周边信息，uniApp微信小程序腾讯地图根据目前的定位推荐地址，腾讯地图api获取周边场所及交通信息，获取周边用什么方法，腾讯地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，将推荐的地址悬浮在地图上显示，uniapp如何根据当前定位获取附近的商场医院，用腾讯地图获取当前点的
uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色
热门推荐
Yarnk的博客
04-21 1万+
先看效果 （欢迎扫码体验） 实现效果： 根据不同速度绘制不同颜色的轨迹 根据终点起点获取地图中心点，尽可能在屏幕内完全展示轨迹 获取最快的路段并显示 自定义点图标 实现步骤： map组件 view标签部分 <template> <view> <map id="map1" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale" :poly
canvas轨迹回放功能实现
11-26
本文通过json机构，HTML代码以及JS代码详细给大家分析了canvas轨迹回放功能实现的过程，以下是全部内容。 json结构 [ { "path": [ { "x": 82, "y": 43 }, { "x": 83, "y": 43 }, { "x": 84, "y": 45 }, { "x": 86, "y": 47 }, {
百度地图运行轨迹根据车速显示不同颜色线
skywqnan的博客
07-13 1万+
最近有个需求是想根据车速划分不同的车速区间，并且在画运行轨迹的时候需要切换不同颜色的线。百度地图它有画运行轨迹的API，不过是根据一系列的经纬度来画一条线，但是只是展示一种颜色。网上百度了也没有发现有相似的，无奈就自己琢磨改写了部分。可能有不完善的地方，欢迎大家一起交流。     1.模拟后台数据，需要后台传经纬度速度，根据速度选择使用哪种颜色的线，根据经纬度画线。      现大体模拟了机组
uniapp--腾讯地图路线轨迹回放
前端叶荨，随手记
05-01 1047
uniapp--腾讯地图路线轨迹回放。
uniapp H5调起手机地图应用或跳转网页版实现地图导航功能
m0_72929120的博客
07-05 4718
【代码】uniapp H5调起手机地图应用或跳转网页版实现地图导航功能。
uni-app实现轨迹回放
qq_44910894的博客
07-10 1834
使用uni-app自带的map地图组件，实现轨迹回放功能
uniapp地图轨迹回放
weixin_53080028的博客
02-24 834
利用uniapp自带的map组件，实现小程序的轨迹回放。
uniapp实现轨迹回放
RemindingMe的博客
04-11 1843
实现效果，微信小程序上可以出现移动效果。
uniapp实现动态轨迹回放
weixin_42322886的博客
09-15 4108
实现效果如下 代码如下 <!-- 轨迹回放 --> <template> <view class="wrap" @tap="handleWrapTap"> <map style="width: 100%; height: 100vh" id="myMap" :latitude="latitude" :longitude="longitude" :include-points="points" :polyline="polyline" :markers=
基于百度地图的轨迹记录app
01-20
基于安卓平台的百度地图开发，包含了定位，地图显示，轨迹绘制，socket通信等
安卓的实现地图轨迹的回放
07-25
安卓实现用户行走的轨迹回放，有进度条回放
小车轨迹显示App
10-25
通过蓝牙和baidu地图显示小车路径
uniapp(全端兼容) - 实现地图位置标点或搜索位置名称“一键导航“功能，唤起手机导航App软件（高德地图、百度地图、腾讯地图）导航页面，如果用户手机没有安装地图app，则跳转到各家地图网页版导航
高级前端工程师
09-22 3623
uni-app，导航，唤起第三方导航软件，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，uniapp调起手机地图应用或跳转网页版实现地图导航功能，高德地图，百度地图，腾讯地图，展示标记点并实现一键导航，uniapp打开手机上的导航软件，uniApp如何打开手机自带的高德地图，如何打开唤起百度地图，调用百度地图导航功能，调起高德或百度地图手机应用，调起高德百度网页版实现导航功能，跳转系统已安装的地图app，跳转到高德网页版导航，web网页版，
uniapp(全端兼容) - 最新详细实现pdf在线预览功能，uniapp内置预览PDF文件功能，uniapp在安卓app|苹果app|h5网页网站|微信小程序中打开pdf进行在线预览（详细示例源码）
高级前端工程师
05-09 4329
uni-app，安卓Android，苹果ios，App端，H5网页，移动端网站，微信小程序，支付宝小程序，nvue，vue，pdf文档，pdf文件，office，uniapp 预览pdf，uniapp怎么做pdf预览，uniapp如何实现全平台兼容的pdf在线预览，uniapp怎么在h5打开pdf文档，实现PDF在线预览，H5移动端文件预览pdf，文件下载和预览，uniapp App端pdf文件预览，app移动端在线预览pdf文件，无法预览pdf怎么办，有没有预览pdf的插件，根本打不开咋办，uniapp使
uniapp(全端兼容)-最新详细实现接入腾讯云IM即时通讯教程，uniapp在安卓苹果app端/小程序/h5移动端等集成使用腾讯云im插件，提供消息列表与聊天对话示例，支持发图片/私聊/实时监听消息
高级前端工程师
05-13 3656
uni-app，腾讯云IM，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，im即时通讯，腾讯云IM详细教程，如何接入腾讯IM即时通讯，使用腾讯im有没有插件，怎么使用腾讯云IM插件，tim-wx-sdk，聊天sdk，即时通讯im uniapp私聊/群聊/聊天室，实现IM即时通讯仿微信聊天功能，对接腾讯云IM+音视频，调用腾讯即时通信IM的示例，卡顿很卡不流畅，音视频，全局监听，仿微信IM，uni-huanxin-im，sdk,实现多端实时通
Uniapp实现微信小程序跑步运动轨迹、历史轨迹和轨迹回放等功能
u014791094的博客
08-04 9915
“跑步运动助手”是一款基于Uniapp开发的微信小程序，主要实现了跑步轨迹记录、历史轨迹、轨迹纠偏、轨迹回放和轨迹排名等功能。室内跑步记录正在开发，还没有发布，主要利用手机加速度传感器实现计步功能。
uniapp map实现APP 车辆轨迹回放
03-25
要实现车辆轨迹回放，可以使用uniapp的map组件。以下是步骤: 1.引入map组件: 在页面的vue文件里，先引入map组件。如下： ``` <template> <view> <map :show-location="true" :markers="markers"></map> </view> </template> <script> import {uniMap} from '@dcloudio/uni-ui'; export default { components: { uniMap }, data(){ return { markers: [] } } } </script> ``` 2.设置地图样式: 在页面的style里，设置map组件的高度和宽度 ``` <style> map { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; } </style> ``` 3.加载地图: 在mounted钩子函数里调用uniMap的createMap方法，创建地图 ``` mounted(){ this.createMap(); }, methods: { createMap(){ let mapCtx = uniMap.createMapContext('myMap', { showLocation: true }) mapCtx.moveToLocation(); } } ``` 4.显示轨迹: 使用setMarkers方法，将要显示的轨迹点添加到地图上 ``` let markers = [ { id: 1, longitude: 113.324520, latitude: 23.10229, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '起点' } }, { id: 2, longitude: 113.35938, latitude: 23.09211, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '终点' } }, { id: 3, longitude: 113.331441, latitude: 23.117706, iconPath: '/static/img/car.png', width: 50, height: 50, callout: { content: '中间点' } } ] this.markers = markers; ``` 5.轨迹回放: 使用定时器和moveToLocation方法，按照轨迹点顺序将地图移动到对应的位置 ``` play(){ let mapCtx = uniMap.createMapContext('myMap', { showLocation: true }) let i = 0; let len = markers.length; let timer = setInterval(() => { if(i >= len - 1){ clearInterval(timer); return; } i++; mapCtx.moveToLocation({ longitude: markers[i].longitude, latitude: markers[i].latitude }) }, 1000) } ``` 以上就是实现车辆轨迹回放的步骤。需要注意的是，地图的显示需要设置高度和宽度，因为地图是一个fixed定位的元素。另外，回放轨迹时需要使用定时器来控制地图移动的速度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值