微信小程序实现轨迹回放

在微信小程序实现轨迹回放的效果

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)  }})

后台数据使用的是百度鹰眼的数据。最终效果：