微信小程序实现轨迹回放的示例代码

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。