一、轨迹记录功能
轨迹记录功能的实现思路相对简单，设置一个定时器，每隔1s获取一下当前位置，将当前的经纬度坐标加入到数组中。然后起点终点根据数组第一个元素和最后一个元素的经纬度坐标，经过腾讯位置服务的逆地址解析功能获得即可。
另外wx.getLocation方法可以获得当前的速度，在这也可以进行显示。
轨迹记录有暂停、继续、终止、重新记录等按钮，还可以查看轨迹，并进行保存，保存后可以在相应位置查看轨迹，即轨迹回放功能。
二、项目代码
<!--pages/guiji/guiji.wxml-->
<navBar
title-text="足迹记录"
back-icon="../../src/images/back@3x.png"
background="#f2f2f2"
bindback="back"/>
<view class="mapcontainer">
<map id="map" style="width: 100%; height: 100vh;" id="mymap"longitude="{{longitude}}" latitude="{{latitude}}" scale="18" polyline="{{polyline}}" show-location
>
<cover-view wx:if="{{ifshowstar}}" class="map-prompt3" bindtap="start">开始记录</cover-view>
<cover-view wx:if="{{ifshowgui}}" class="map-prompt3" bindtap="save_guiji">查看轨迹</cover-view>
<cover-view wx:if="{{ifshowgui}}" class="map-prompt4" bindtap="re_guiji">重新记录</cover-view>
<cover-view wx:if="{{!ifshowstar&&!ifshowgui}}" class="map-prompt" bindtap="end">暂停记录</cover-view>
<!-- <cover-view wx:if="{{!ifshowstar}}" class="map-prompt2" bindtap="save">停止记录</cover-view> -->
<cover-view wx:if="{{!ifshowstar&&ifshowzan&&!ifshowgui}}" class="map-prompt" bindtap="start">继续记录</cover-view>
<cover-view wx:if="{{!ifshowstar&&!ifshowgui}}" class="map-prompt2" bindtap="save">停止记录</cover-view>
<cover-view class="time"> \n\n耗时：{{hours}}:{{minute}}:{{second}}</cover-view>
<cover-view class="speed"> \n\n速度：{{speed}} m/s</cover-view>
</map>
</view>
/* pages/guiji/guiji.wxss */
/* .contain{
margin-top: 140rpx;
} */
.map{
margin-top: 148rpx;
}
.map-prompt {
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
color: #fff;
text-align: center;
background: rgb(154, 155, 240);
border-radius: 40rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 190rpx;
left: 100rpx;
/* transform: translate(-50%,0); */
}
.map-prompt2 {
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
color: #fff;
text-align: center;
background: rgb(154, 155, 240);
border-radius: 40rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 190rpx;
right: 100rpx;
/* transform: translate(-50%,0); */
}
.map-prompt3 {
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
color: #fff;
text-align: center;
background: rgb(154, 155, 240);
border-radius: 40rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 300rpx;
right: 270rpx;
/* transform: translate(-50%,0); */
}
.map-prompt4 {
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 34rpx;
color: #fff;
text-align: center;
background: rgb(154, 155, 240);
border-radius: 40rpx;
box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
position: absolute;
bottom: 200rpx;
right: 270rpx;
/* transform: translate(-50%,0); */
}
.mapView{
width: 100%;
height: 1210rpx;
/* align-items: center; */
}
.mile{
background-color: #909399;
color: #fff;
font-size: 40rpx;
border-radius: 40rpx;
width: 50%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 30rpx;
left: 50%;
transform: translate(-50%);
}
.time{
background-color: #909399;
font-size: 40rpx;
padding-left: 90rpx;
padding-top: 20rpx;
color: #fff;
border-radius: 40rpx;
width: 50%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50rpx;
left: 50%;
transform: translate(-50%);
}
.speed{
background-color: #909399;
font-size: 40rpx;
padding-left: 90rpx;
padding-top: 20rpx;
color: #fff;
border-radius: 40rpx;
width: 50%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 170rpx;
left: 50%;
transform: translate(-50%);
}
var point = [];
var that2;
var point2 = [{"latitude":36.66900,"longitude":117.13755},{"latitude":36.66900,"longitude":117.13755},{"latitude":36.66893,"longitude":117.13795},{"latitude":36.66711,"longitude":117.13935},{"latitude":36.66658,"longitude":117.13976},{"latitude":36.66692,"longitude":117.14051},{"latitude":36.66672,"longitude":117.14133},{"latitude":36.66675,"longitude":117.14169},{"latitude":36.66690,"longitude":117.14226},{"latitude":36.66703,"longitude":117.14252}]
var countTooGetLocation = 0;
var total_micro_second = 0;
var starRun = 0;
var totalSecond = 0;
var oriMeters = 0.0;
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var util = require('../../utils/util.js');
var qqmapsdk;
var qqmapsdk1;
function count_down(that) {
if (starRun == 0) {
return;
}
if (countTooGetLocation >= 100) {
var time = date_format(total_micro_second);
that.updateTime(time);
}
if (countTooGetLocation >= 5000) { //1000为1s
countTooGetLocation = 0;
}
setTimeout
setTimeout(function () {
countTooGetLocation += 10;
total_micro_second += 10;
count_down(that);
}
, 10
)
}
// 时间格式化输出，如03:25:19 86。每10ms都会调用一次
function date_format(micro_second) {
// 秒数
var second = Math.floor(micro_second / 1000);
// 小时位
var hr = Math.floor(second / 3600);
// 分钟位
var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
// 秒位
var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
return hr + ":" + min + ":" + sec + " ";
}
function fill_zero_prefix(num) {
return num < 10 ? "0" + num : num
}
function drawline() {
that2.setData({
polyline : [{
points : point,
// color : '#99FF00',
color : '#1E90FF',
width : 8,
dottedLine : false
}]
});
}
//获取经纬度
function getlocation(that) {
var lat, lng,speed;
wx.getLocation({
type : 'gcj02',
success : function (res) {
console.log(res)
lat = res.latitude;
lng = res.longitude;
speed = JSON.stringify(res.speed)
that.setData({
speed:JSON.stringify(res.speed).substring(0, 4)
})
point.push({latitude: lat, longitude : lng});
console.log(point);
}
});
}
Page({
data : {
ifshowstar:true,
ifshowzan:false,
ifshowgui:false,
polyline : [],
time: "00:00:00",
start:'',
end:'',
time1:'',
username:'',
speed:'0',
hours: '0' + 0, // 时
minute: '0' + 0, // 分
second: '0' + 0 , // 秒
i:'', //设置计时器
a:[]//轨迹列表
},
setInterval: function () {
const that = this
var second = that.data.second
var minute = that.data.minute
var hours = that.data.hours
var i =setInterval(function () { // 设置定时器
second++
if (second >= 60) {
second = 0 // 大于等于60秒归零
minute++
if (minute >= 60) {
minute = 0 // 大于等于60分归零
hours++
if (hours < 10) {
// 少于10补零
that.setData({
hours: '0' + hours
})
} else {
that.setData({
hours: hours
})
}
}
if (minute < 10) {
// 少于10补零
that.setData({
minute: '0' + minute
})
} else {
that.setData({
minute: minute
})
}
}
if (second < 10) {
// 少于10补零
that.setData({
second: '0' + second
})
} else {
that.setData({
second: second
})
}
}, 1000)
that.setData({
i:i
})
},
onLoad : function () {
var user = wx.getStorageSync('firstuser')
console.log(user)
that2 = this;
that2.setData({
username:user.nickName
})
count_down(this);
wx.getLocation({
type: 'gcj02',
success : function (res) {
console.log(res)
that2.setData({
longitude : res.longitude,
latitude : res.latitude,
});
}
});
},
start : function () {
var that = this
this.timer = setInterval(repeat, 500);
starRun = 1;
this.setInterval()
// count_down(that2);
this.setData({
ifshowstar:false,
ifshowzan:false
})
// this.getLocation_start(true)
function repeat() {
// console.log('re');
getlocation(that);
drawline();
}
},
end : function () {
starRun = 0;
console.log('end');
clearInterval(this.data.i)
// count_down(that2);
clearInterval(this.timer);
// this.getLocation_strat(false)
console.log(this.data.time)
this.setData({
ifshowzan:true
})
console.log(JSON.stringify(point))
},
save : function(){
console.log("点击了save")
starRun = 0;
// var that = this
var time1 = util.formatTime(new Date());
clearInterval(this.data.i)
clearInterval(this.timer);
// this.getLocation_end()
this.setData({
time1: time1,
ifshowgui:true,
// ifshowstar:true
});
var a ={
time:this.data.time1,
costtime:this.data.time,
start:this.data.start,
end:this.data.end,
point:point
}
// this.setData({
// a:a
// })
console.log(a)
},
save_guiji:function(){
var that = this
var a ={
username:this.data.username,
// time:this.data.time1,
user_time:this.data.time,
// use_time:"00:07:08",
startpoint:this.data.start,
// startpoint:"历城区伯乐路",
endpoint:this.data.end,
// endpoint:"历城区舜泰北路",
router:JSON.stringify(point2)
}
var b = {
username:this.data.username,
// time:this.data.time1,
costtime:this.data.time,
// use_time:"00:07:08",
start:this.data.start,
// startpoint:"历城区伯乐路",
end:this.data.end,
// endpoint:"历城区舜泰北路",
point:point2
}
wx.navigateTo({
// url: '/pages/guiji_index/guiji_index?costtime='+this.data.time+ '&start=' +this.data.start+ '&end=' +this.data.end+ '&point=' +JSON.stringify(point),
url: '/pages/guiji_index/guiji_index?costtime='+this.data.hours+":"+this.data.minute+":"+this.data.second+ '&point=' +JSON.stringify(point)+ '&username=' +this.data.username,
})
// this.setData({
// a:a
// })
console.log(a)
// wx.request({
// url: 'http://8.140.176.167:8800/router/addRouter',
// method:'POST',
// data:a,
// success:function(res){
// wx.showToast({
// title: "保存成功",
// duration: 1000,
// icon: "sucess",
// make: true
// });
// console.log(res)
// point = [];
// that2;
// countTooGetLocation = 0;
// total_micro_second = 0;
// starRun = 0;
// totalSecond = 0;
// oriMeters = 0.0;
// that.setData({
// ifshowstar:true,
// ifshowzan:false,
// ifshowgui:false,
// polyline : [],
// time: "00:00:00",
// start:'',
// end:'',
// time1:'',
// a:[]//轨迹列表
// })
// }
// })
// point = [];
// that2;
// countTooGetLocation = 0;
// total_micro_second = 0;
// starRun = 0;
// totalSecond = 0;
// oriMeters = 0.0;
// this.setData({
// ifshowstar:true,
// ifshowzan:false,
// ifshowgui:false,
// polyline : [],
// time: "0:00:00",
// start:'',
// end:'',
// time1:'',
// a:[]//轨迹列表
// })
},
re_guiji:function(){
point = [];
that2;
countTooGetLocation = 0;
total_micro_second = 0;
starRun = 0;
totalSecond = 0;
oriMeters = 0.0;
this.setData({
ifshowstar:true,
ifshowzan:false,
ifshowgui:false,
polyline : [],
time: "0:00:00",
start:'',
end:'',
time1:'',
speed:'0',
hours: '0' + 0, // 时
minute: '0' + 0, // 分
second: '0' + 0 , // 秒
i:'', //设置计时器
a:[]//轨迹列表
})
},
updateTime: function (time) {
var data = this.data;
data.time = time;
this.data = data;
this.setData({
time: time,
})
},
getLocation_start:function(options){
var that = this
qqmapsdk = new QQMapWX({
key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4' // 必填
});
//1、获取当前位置坐标
wx.getLocation({
type: 'wgs84',
success: function (res) {
//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) {
var address = addressRes.result.formatted_addresses.recommend;
console.log(address)
if(options){
that.setData({
start:address
})
}else{
that.setData({
end:address
})
}
}
})
}
})
},
getLocation_end:function(){
console.log("调用了end")
var that = this
qqmapsdk1 = new QQMapWX({
key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4' // 必填
});
//1、获取当前位置坐标
wx.getLocation({
type: 'wgs84',
success: function (res) {
console.log("成功了1！")
//2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
qqmapsdk1.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) {
var address = addressRes.result.formatted_addresses.recommend;
console.log(address)
that.setData({
end:address
})
},
fail : function(res){
console.log("失败了1！")
console.log(res)
}
})
},
fail:function(res){
console.log("失败了2！")
console.log(res)
}
})
},
});
三、效果展示
扫一扫
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
