在微信小程序实现轨迹回放的效果
1、wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"bindcontroltap="controltap" bindmarkertap="markertap" markers="{{markers}}" polyline="{{polyline}}"bindregionchange="regionchange" show-location style="width: 100%; height:{{height}}px;" ></map><view class="padding flex flex-wrap justify-between align-center bg-white"><button class='cu-btn bg-green shadow sm' bindtap='beginTrack'> 开始 </button><button class='cu-btn bg-orange shadow sm' bindtap='pauseTrack'> 暂停 </button><button class='cu-btn bg-red shadow sm' bindtap='endTrack'> 结束 </button></view>
2、js
//index.js//获取应用实例const app = getApp()Page({data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,height: wx.getSystemInfoSync().windowHeight,latitude: 0,longitude: 0,playIndex: 0, timer: null,markers: [],polyline: [],pointsInfo:[]},regionchange(e) {//console.log(e.type) },markertap(e) {//console.log(e.markerId) },controltap(e) {//console.log(e.controlId) },beginTrack:function(e){},onLoad: function (options){var that = this;wx.request({url: 'http://**/getTrack',data: { beginTime:"开始时间",endTime:"结束时间"},method: "post",success: function (res) {that.setData({pointsInfo:res.data.pointsInfos,polyline: [{points: res.data.points,color: "#FF0000DD",width: 4,dottedLine: true}],markers: [{iconPath: '../../img/location.jpg',id: 0,latitude: res.data.points[0].latitude,longitude: res.data.points[0].longitude,width: 30,height: 30,title: that.data.brandNumber,callout: {content: that.data.brandNumber + ' \n 时间：' + res.data.pointsInfos[0].create_time + ' \n 速度：' + res.data.pointsInfos[0].speed + ' km/h',color: "#000000",fontSize: 13,borderRadius: 2,bgColor: "#fff",display: "ALWAYS",boxShadow: "5px 5px 10px #aaa"}}],latitude: res.data.points[0].latitude,longitude: res.data.points[0].longitude,})}})},/*** 开始*/beginTrack:function(){var that = this;var i = that.data.playIndex == 0 ? 0 : that.data.playIndex;that.timer = setInterval(function () {i ++that.setData({playIndex: i,latitude: that.data.polyline[0].points[i].latitude,longitude: that.data.polyline[0].points[i].longitude,markers: [{iconPath: '../../img/car/e0.png',id: 0,latitude: that.data.polyline[0].points[i].latitude,longitude: that.data.polyline[0].points[i].longitude,width: 30,height: 30,title: that.data.brandNumber,callout: {content: that.data.brandNumber + ' \n 时间：' + that.data.pointsInfo[i].create_time + ' \n 速度：' + that.data.pointsInfo[i].speed + ' km/h',color: "#000000",fontSize: 13,borderRadius: 2,bgColor: "#fff",display: "ALWAYS",boxShadow: "5px 5px 10px #aaa"}}]}) if ((i+1) >= that.data.polyline[0].points.length) { that.endTrack();}}, 500) }, /*** 暂停*/pauseTrack:function(){var that = this; clearInterval(this.timer)},/*** 结束*/endTrack:function(){var that = this; that.setData({playIndex: 0,latitude: that.data.polyline[0].points[0].latitude,longitude: that.data.polyline[0].points[0].longitude,markers: [{iconPath: '../../img/car/e0.png',id: 0,latitude: that.data.polyline[0].points[0].latitude,longitude: that.data.polyline[0].points[0].longitude,width: 30,height: 30,title: that.data.brandNumber,callout: {content: that.data.brandNumber + ' \n 时间：' + that.data.pointsInfo[0].create_time + ' \n 速度：' + that.data.pointsInfo[0].speed + ' km/h',color: "#000000",fontSize: 13,borderRadius: 2,bgColor: "#fff",display: "ALWAYS",boxShadow: "5px 5px 10px #aaa"}}]}) clearInterval(this.timer)}})
后台数据使用的是百度鹰眼的数据。最终效果：
如果觉得《微信小程序实现轨迹回放》对你有帮助，请点赞、收藏，并留下你的观点哦！
