先看效果图

html

<map id='map' :latitude="addressInfo.latitude" :longitude="addressInfo.longitude" :markers="covers"style="height:100vh" :showLocation="showLocation" :includePoints="true":polyline="polyline">
</map>

<script>
//我这里用的高德
import amapFile from '@/common/map/amap-wx.130.js'
var myAmapFun = new amapFile.AMapWX({key: '你自己申请的高德key'
});
export default {data() {return {showLocation: true,userInfo: {},addressInfo: {},covers: [{id: 1,width: 42,height: 42,rotate: 0,latitude: 34.74821,longitude: 113.61332,iconPath: '/static/image/tram.png',anchor: {x: 0.5,y: 0.5,},}],polyline: [{"points": [{"longitude": 113.619996,"latitude": 34.74989}, {"longitude": 113.62002,"latitude": 34.749889}, {"longitude": 113.620186,"latitude": 34.749889}, {"longitude": 113.620605,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.749889}, {"longitude": 113.620782,"latitude": 34.750442}, {"longitude": 113.620782,"latitude": 34.750919}, {"longitude": 113.620782,"latitude": 34.751241}, {"longitude": 113.620787,"latitude": 34.75152}, {"longitude": 113.620787,"latitude": 34.75188}, {"longitude": 113.620782,"latitude": 34.752464}, {"longitude": 113.620787,"latitude": 34.753419}, {"longitude": 113.620782,"latitude": 34.753854}, {"longitude": 113.620782,"latitude": 34.755163}, {"longitude": 113.620803,"latitude": 34.755377}, {"longitude": 113.620605,"latitude": 34.755388}, {"longitude": 113.619865,"latitude": 34.755436}, {"longitude": 113.61737,"latitude": 34.755613}, {"longitude": 113.61686,"latitude": 34.755651}, {"longitude": 113.616485,"latitude": 34.755683}, {"longitude": 113.615959,"latitude": 34.75572}, {"longitude": 113.61546,"latitude": 34.755758}, {"longitude": 113.614559,"latitude": 34.755822}, {"longitude": 113.614463,"latitude": 34.755828}, {"longitude": 113.613653,"latitude": 34.755892}, {"longitude": 113.613486,"latitude": 34.755898}, {"longitude": 113.613079,"latitude": 34.75593}, {"longitude": 113.61259,"latitude": 34.755967}, {"longitude": 113.611689,"latitude": 34.756032}, {"longitude": 113.611083,"latitude": 34.756075}, {"longitude": 113.610584,"latitude": 34.756107}, {"longitude": 113.610128,"latitude": 34.756133}, {"longitude": 113.609393,"latitude": 34.756203}, {"longitude": 113.60831,"latitude": 34.756278}, {"longitude": 113.607044,"latitude": 34.756375}, {"longitude": 113.606175,"latitude": 34.756541}, {"longitude": 113.605397,"latitude": 34.756675}, {"longitude": 113.60463,"latitude": 34.756756}, {"longitude": 113.603439,"latitude": 34.756852}, {"longitude": 113.60331,"latitude": 34.756863}, {"longitude": 113.602478,"latitude": 34.756954}, {"longitude": 113.602183,"latitude": 34.757003}, {"longitude": 113.601926,"latitude": 34.75704}, {"longitude": 113.600885,"latitude": 34.757233}, {"longitude": 113.599839,"latitude": 34.757426}, {"longitude": 113.599753,"latitude": 34.757448}, {"longitude": 113.599169,"latitude": 34.75755}, {"longitude": 113.598632,"latitude": 34.757652}, {"longitude": 113.59831,"latitude": 34.757711}, {"longitude": 113.597613,"latitude": 34.757845}, {"longitude": 113.596749,"latitude": 34.758006}, {"longitude": 113.595988,"latitude": 34.758151}, {"longitude": 113.595097,"latitude": 34.758317}, {"longitude": 113.593488,"latitude": 34.758606}, {"longitude": 113.592914,"latitude": 34.758708}, {"longitude": 113.591251,"latitude": 34.758982}, {"longitude": 113.589395,"latitude": 34.759341}, {"longitude": 113.588987,"latitude": 34.759427}, {"longitude": 113.588579,"latitude": 34.759513}, {"longitude": 113.588579,"latitude": 34.759513}, {"longitude": 113.588359,"latitude": 34.759631}, {"longitude": 113.588091,"latitude": 34.759733}, {"longitude": 113.587812,"latitude": 34.759862}, {"longitude": 113.587458,"latitude": 34.760093}, {"longitude": 113.587308,"latitude": 34.76021}, {"longitude": 113.587088,"latitude": 34.76042}, {"longitude": 113.586943,"latitude": 34.760575}, {"longitude": 113.586814,"latitude": 34.760741}, {"longitude": 113.586793,"latitude": 34.760768}, {"longitude": 113.586621,"latitude": 34.761042}, {"longitude": 113.586519,"latitude": 34.761267}, {"longitude": 113.58645,"latitude": 34.76146}, {"longitude": 113.586385,"latitude": 34.761675}, {"longitude": 113.586353,"latitude": 34.761841}, {"longitude": 113.586337,"latitude": 34.76197}, {"longitude": 113.58631,"latitude": 34.762539}, {"longitude": 113.586337,"latitude": 34.762716}, {"longitude": 113.586439,"latitude": 34.763172}, {"longitude": 113.586509,"latitude": 34.763381}, {"longitude": 113.586659,"latitude": 34.763719}, {"longitude": 113.586782,"latitude": 34.764035}, {"longitude": 113.586804,"latitude": 34.764105}, {"longitude": 113.586804,"latitude": 34.764196}, {"longitude": 113.587458,"latitude": 34.765323}, {"longitude": 113.58756,"latitude": 34.7655}, {"longitude": 113.587785,"latitude": 34.765881}, {"longitude": 113.589175,"latitude": 34.7683}, {"longitude": 113.589658,"latitude": 34.769126}, {"longitude": 113.590103,"latitude": 34.769829}, {"longitude": 113.590296,"latitude": 34.770124}, {"longitude": 113.591363,"latitude": 34.771728}, {"longitude": 113.591734,"latitude": 34.77228}, {"longitude": 113.591996,"latitude": 34.772763}, {"longitude": 113.592265,"latitude": 34.77337}, {"longitude": 113.59249,"latitude": 34.774029}, {"longitude": 113.592517,"latitude": 34.774136}, {"longitude": 113.592538,"latitude": 34.774222}, {"longitude": 113.592871,"latitude": 34.775623}, {"longitude": 113.592919,"latitude": 34.775842}, {"longitude": 113.593016,"latitude": 34.776234}, {"longitude": 113.59337,"latitude": 34.777747}, {"longitude": 113.593735,"latitude": 34.779265}, {"longitude": 113.593858,"latitude": 34.779753}, {"longitude": 113.594153,"latitude": 34.781035}, {"longitude": 113.594528,"latitude": 34.782596}, {"longitude": 113.594561,"latitude": 34.782714}, {"longitude": 113.594571,"latitude": 34.782763}, {"longitude": 113.594663,"latitude": 34.783181}, {"longitude": 113.594748,"latitude": 34.78354}, {"longitude": 113.594931,"latitude": 34.784265}, {"longitude": 113.594931,"latitude": 34.784265}, {"longitude": 113.595236,"latitude": 34.785547}, {"longitude": 113.595531,"latitude": 34.786807}, {"longitude": 113.595816,"latitude": 34.787971}, {"longitude": 113.595945,"latitude": 34.788422}, {"longitude": 113.596122,"latitude": 34.788975}, {"longitude": 113.596368,"latitude": 34.789581}, {"longitude": 113.596572,"latitude": 34.790042}, {"longitude": 113.597329,"latitude": 34.79148}, {"longitude": 113.598096,"latitude": 34.792966}, {"longitude": 113.598241,"latitude": 34.793282}, {"longitude": 113.598359,"latitude": 34.793588}, {"longitude": 113.598396,"latitude": 34.793701}, {"longitude": 113.598434,"latitude": 34.793824}, {"longitude": 113.59852,"latitude": 34.794178}, {"longitude": 113.5986,"latitude": 34.794602}, {"longitude": 113.598632,"latitude": 34.794838}, {"longitude": 113.598638,"latitude": 34.794913}, {"longitude": 113.598675,"latitude": 34.79531}, {"longitude": 113.59867,"latitude": 34.795605}, {"longitude": 113.598664,"latitude": 34.795701}, {"longitude": 113.598664,"latitude": 34.795701}, {"longitude": 113.598632,"latitude": 34.795932}, {"longitude": 113.598579,"latitude": 34.796318}, {"longitude": 113.598466,"latitude": 34.796844}, {"longitude": 113.598326,"latitude": 34.797381}, {"longitude": 113.598214,"latitude": 34.797815}, {"longitude": 113.598026,"latitude": 34.798684}, {"longitude": 113.598069,"latitude": 34.798947}, {"longitude": 113.598031,"latitude": 34.799215}, {"longitude": 113.598031,"latitude": 34.799215}, {"longitude": 113.597946,"latitude": 34.79988}, {"longitude": 113.597913,"latitude": 34.800277}, {"longitude": 113.597886,"latitude": 34.801216}, {"longitude": 113.597881,"latitude": 34.802273}, {"longitude": 113.597865,"latitude": 34.803158}, {"longitude": 113.597865,"latitude": 34.803158}, {"longitude": 113.597924,"latitude": 34.80326}, {"longitude": 113.597946,"latitude": 34.80334}, {"longitude": 113.597956,"latitude": 34.803523}, {"longitude": 113.597983,"latitude": 34.803984}, {"longitude": 113.597983,"latitude": 34.804242}, {"longitude": 113.597962,"latitude": 34.804478}, {"longitude": 113.59793,"latitude": 34.804687}, {"longitude": 113.59793,"latitude": 34.804692}, {"longitude": 113.597886,"latitude": 34.80488}, {"longitude": 113.597817,"latitude": 34.805089}, {"longitude": 113.597693,"latitude": 34.805363}, {"longitude": 113.597586,"latitude": 34.805556}, {"longitude": 113.597415,"latitude": 34.805824}, {"longitude": 113.597232,"latitude": 34.806066}, {"longitude": 113.596942,"latitude": 34.80643}, {"longitude": 113.596588,"latitude": 34.806897}, {"longitude": 113.596379,"latitude": 34.807208}, {"longitude": 113.596213,"latitude": 34.807514}, {"longitude": 113.596122,"latitude": 34.807745}, {"longitude": 113.595891,"latitude": 34.808201}, {"longitude": 113.595682,"latitude": 34.808667}, {"longitude": 113.595612,"latitude": 34.808903}, {"longitude": 113.595569,"latitude": 34.809075}, {"longitude": 113.595473,"latitude": 34.809499}, {"longitude": 113.595398,"latitude": 34.80989}, {"longitude": 113.59528,"latitude": 34.810572}, {"longitude": 113.594534,"latitude": 34.814793}, {"longitude": 113.594389,"latitude": 34.815673}, {"longitude": 113.594185,"latitude": 34.816891}, {"longitude": 113.593783,"latitude": 34.816998}, {"longitude": 113.588054,"latitude": 34.817079}, {"longitude": 113.584824,"latitude": 34.817143}, {"longitude": 113.583687,"latitude": 34.817111}, {"longitude": 113.581391,"latitude": 34.817106}, {"longitude": 113.57909,"latitude": 34.817106}, {"longitude": 113.578575,"latitude": 34.817121}, {"longitude": 113.5785,"latitude": 34.817095}, {"longitude": 113.578038,"latitude": 34.817293}, {"longitude": 113.576788,"latitude": 34.817964}, {"longitude": 113.57666,"latitude": 34.818034}, {"longitude": 113.569439,"latitude": 34.821853}, {"longitude": 113.568656,"latitude": 34.822266}, {"longitude": 113.568291,"latitude": 34.822459}, {"longitude": 113.568221,"latitude": 34.822497}, {"longitude": 113.566575,"latitude": 34.822143}, {"longitude": 113.566381,"latitude": 34.822025}, {"longitude": 113.566494,"latitude": 34.821719}, {"longitude": 113.566703,"latitude": 34.821156}, {"longitude": 113.566725,"latitude": 34.821086}, {"longitude": 113.567325,"latitude": 34.819423}, {"longitude": 113.567159,"latitude": 34.819418}, {"longitude": 113.566392,"latitude": 34.819423}, {"longitude": 113.565636,"latitude": 34.819418}, {"longitude": 113.565636,"latitude": 34.819418}, {"longitude": 113.565609,"latitude": 34.819562}, {"longitude": 113.565561,"latitude": 34.81975}, {"longitude": 113.565561,"latitude": 34.81975}, {"longitude": 113.56629,"latitude": 34.819761}, {"longitude": 113.566322,"latitude": 34.819772}, {"longitude": 113.566344,"latitude": 34.819798}, {"longitude": 113.566344,"latitude": 34.819852}, {"longitude": 113.565813,"latitude": 34.821295}, {"longitude": 113.565714,"latitude": 34.821566}],"color": "#0091ff","width": 6,"arrowLine": true}],map: '',};},onReady() {this.map = uni.createMapContext('map', this);//必不可少},methods:{//此方法就是轨迹运动rewindTracks() {console.log("正在飙车中......")this.map.moveAlong({markerId: 1,path: this.polyline[0].points,autoRotate: true,duration: 10000,success: (e) => {console.log('成功', e)uni.showToast({title: '播放完成',duration: 2000,icon: 'none'});},fail: (e) => {console.log('失败', e)},complete: (e) => {console.log('ok', e)},})},}
}
</script>

主要使用的就是moveAlong方法

小程序历史轨迹回放地图播放历史轨迹相关推荐

微信小程序接入腾讯地图sdk地图用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序实现长文本分段播放
微信小程序实现长文本分段播放接上篇微信小程序实现语音合成功能解决腾讯智能语音插件中文最大支持100个汉字的问题场景:需要合成100汉字以上的文本进行语音播报注意:本文示例代码是在上篇基础上进 ...
微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
[微信小程序]小程序引入腾讯地图选点插件出现：未取得授权
问题:小程序引入腾讯地图选点插件出现:未取得授权在微信小程序引入腾讯地图选点插件:官方文档 1.微信小程序接入腾讯地图服务,申请Key 2.在 app.json 中添加 "plugins& ...
微信小程序使用腾讯地图SDK详解及实现步骤
信小程序使用腾讯地图SDK详解及实现步骤微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1.申请 ...
微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...

小程序历史轨迹回放地图播放历史轨迹

html

小程序历史轨迹回放地图播放历史轨迹相关推荐

最新文章

热门文章

小程序 历史轨迹回放 地图播放历史轨迹

html

小程序 历史轨迹回放 地图播放历史轨迹相关推荐

最新文章

热门文章

小程序历史轨迹回放地图播放历史轨迹

小程序历史轨迹回放地图播放历史轨迹相关推荐