在微信小程序实现轨迹回放的效果
创新互联建站-专业网站定制、快速模板网站建设、高性价比容城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式容城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖容城地区。费用合理售后完善，10年实体公司更值得信赖。
1、wxml
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)
}
})
后台数据使用的是百度鹰眼的数据。最终效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
