案例: 运动打卡：跑步定位
来自CloudWiki
wsx
<code>var filter ={
toFix:function(value){
return value.toFixed(2) // 保留2位小数
}
}
module.exports={
toFix: filter.toFix
}
</code>
js
<code>var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
key: 'IWLBZ-CK6R4-YXDUO-DQCXK-J5H4Z-DSBCI'
});
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
latitude: 0,
longitude: 0,
target_la: 0,
target_lo: 0,
speed: 0,
accuracy: 0,
meters: app.globalData.meters,
time: app.globalData.time,
markers: [{
iconPath: "../../imgs/pic.jpg",
id: 0,
latitude: 39.9205,
longitude: 116.4605,
width: 30,
height: 30
}],
path: [],
},
geoInfo() {
var that = this
wx.getLocation({
type: 'gcj02',
success(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
speed: res.speed,
accuracy: res.accuracy,
})
}
})
console.log(this.data.latitude, this.data.longitude)
},
pickLocation() {
var that = this
wx.chooseLocation({
success: function (res) {
console.log(res)
that.setData({
target_la: res.latitude,
target_lo: res.longitude,
markers: [{
iconPath: "../../imgs/pic.jpg",
id: 0,
latitude: 39.9205,
longitude: 116.4605,
width: 30,
height: 30
}, {
iconPath: "../../imgs/blue.png",
id: 1,
latitude: res.latitude,
longitude: res.longitude,
width: 20,
height: 20
}]
})
},
})
},
routing() {
var that = this
var temp_loc = this.data.target_la + ',' + this.data.target_lo
qqmapsdk.direction({
mode: 'walking',
to: temp_loc,
success: function (res) {
console.log(res)
var ret = res;
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
console.log(pl)
//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
that.setData({
latitude: pl[0].latitude,
longitude: pl[0].longitude,
polyline: [{
points: pl,
color: '#FF0000DD',
width: 4
}]
})
}
})
},
startRun() {
clearInterval(app.globalData.interval)
this.geoInfo()
app.globalData.begin_la = this.data.latitude
app.globalData.begin_lo = this.data.longitude
app.globalData.interval = setInterval(() => {
this.running()
this.runPath()
}, 1000)
},
continueRun(){
clearInterval(app.globalData.interval)
this.setData({
latitude: app.globalData.latitude,
longitude: app.globalData.longitude,
meters: app.globalData.meters,
time: app.globalData.time,
})
app.globalData.interval = setInterval(() => {
this.running()
this.runPath()
}, 1000)
},
stopRun() {
clearInterval(app.globalData.interval)
this.geoInfo()
console.log('开始位置', app.globalData.begin_la.begin_la, app.globalData.begin_la.begin_lo)
console.log('结束位置', this.data.latitude, this.data.longitude)
},
clearRun(){
console.log('数据已清除')
app.globalData={}
},
running() {
this.setData({
latitude: this.data.latitude + 0.0002,
longitude: this.data.longitude + 0.0002,
meters: this.data.meters + 0.05,
time: this.data.time + 1,
})
app.globalData.latitude = this.data.latitude
app.globalData.longitude = this.data.longitude
app.globalData.meters = this.data.meters
app.globalData.time = this.data.time
console.log(this.data)
},
runPath() {
app.globalData.path.push({ latitude: this.data.latitude, longitude: this.data.longitude })
this.setData({
polyline: [{
points: app.globalData.path,
color: '#FF0000DD',
width: 4
}],
markers: [{
iconPath: "../../imgs/triangle.png",
id: 3,
latitude: app.globalData.begin_la,
longitude: app.globalData.begin_lo,
width: 20,
height: 20
}, {
iconPath: "../../imgs/yellow.png",
id: 4,
latitude: this.data.latitude,
longitude: this.data.longitude,
width: 20,
height: 20
}]
})
},
onReady: function () {
var that = this
wx.getLocation({
type: 'gcj02',
success(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude,
speed: res.speed,
accuracy: res.accuracy,
})
}
})
},
onLoad: function () {
}
})
</code>
json
<code>{
"usingComponents": {}
}
</code>
wxml
<code><wxs module='filter' src='fix.wxs'></wxs>
<view class='mainView'>
<view>路线规划</view>
<view class='top-buttons'>
<button class='top-btn' bindtap='pickLocation'>选择位置</button>
<button class='top-btn' bindtap='routing'>显示路线</button>
</view>
<map style="width:100%; height:350px" longitude='{{longitude}}' latitude='{{latitude}}' markers='{{markers}}' polyline="{{polyline}}">
<cover-view class="cover">
<cover-view>跑步距离:{{filter.toFix(meters)}} </cover-view>
<cover-view>跑步时长:{{filter.toFix(time)}}</cover-view>
</cover-view>
</map>
<view>跑步定位</view>
<view class='bottom-buttons'>
<button class='bottom-btn' bindtap='startRun'>跑步开始</button>
<button class="bottom-btn" bindtap="continueRun">继续跑步</button>
<button class="bottom-btn" bindtap="stopRun">结束跑步</button>
<button class="bottom-btn" bindtap="clearRun">清除路线</button>
</view>
</view>
</code>
wxss
<code>.mainView {
background-color: #5eb2df;
color: #fff;
text-align: center;
}
.top-buttons {
display: flex;
flex-direction: row;
}
.top-btn {
margin-top: 10rpx;
width: 300rpx;
margin-bottom: 10rpx;
font-size: 30rpx;
align-items: center;
}
.cover{
color: blue;
text-align: left;
}
.bottom-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bottom-btn {
margin-top: 10rpx;
width: 300rpx;
margin-bottom: 10rpx;
font-size: 30rpx;
align-items: center;
}
</code>
