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

2023-08-04 14:05:04 229

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

1、wxml




开始
暂停
结束

2、js

//index.js
//获取应用实例
constapp=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){
varthat=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:"5px5px10px#aaa"
}
}],
latitude:res.data.points[0].latitude,
longitude:res.data.points[0].longitude,
})
}
})
},
/**
*开始
*/
beginTrack:function(){
varthat=this;
vari=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:"5px5px10px#aaa"
}
}]
})
if((i+1)>=that.data.polyline[0].points.length){
that.endTrack();
}
},500)
},
/**
*暂停
*/
pauseTrack:function(){
varthat=this;
clearInterval(this.timer)
},
/**
*结束
*/
endTrack:function(){
varthat=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:"5px5px10px#aaa"
}
}]
})
clearInterval(this.timer)
}
})

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐