正在做一个项目,要用微信小程序上传自己的实时位置,然后再地图界面显示一条路径,思路是点击按钮开始上传,再点击一下按钮停止上传。位置用api获取后存到一个数组里,然后再把数组定时赋给markers,在地图上渲染出来。
wxml代码:
<view class="container">
<view >
<view >
<map
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
polyline="{{poliline}}"
>
</map>
</view>
<button catchtap="path">{{path}}</button>
<button bindtap="location">上传位置</button>
</view>
</view>
js中按钮点击事件代码:
path: function () {
var that = this
if (this.data.path == "上传路径") {
this.setData({
path: "停止上传"
})
var i = 0,
interval = setInterval(function () {
i = i + 0.001,
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
path.push({ latitude: latitude, longitude: longitude + i, iconPath:'../../images/location.png'})
that.setData({
markers:path
});
},
fail: function (res) {
console.log(res)
}
})
i=i+0.0001;
}, 5000) //循环时间 这里是5秒
} else {
this.setData({
path: "上传路径"
})
clearInterval(interval)
}
},
这里用i每次增加0.001来模拟人走路。
发现小程序的IDE有个BUG,路径的小标记物不能显示,但是在真机上可以。
界面:
点击上传路径后的效果图:
最后一个没有解决的问题,困扰了我很久,为什么取消interval总是不成功呢,点击后还是一直更新路径!