微信小程序实现轨迹回放的示例代码微信小程序实现轨迹回放的示例代码
在微信小程序实现轨迹回放的效果
1、、wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"
bindcontroltap="controltap" bindmarkertap="markertap" markers="{{markers}}" polyline="{{polyline}}"
bindregionchange="regionchange" show-location style="width: 100%; height:{{height}}px;" ></map>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn bg-green shadow sm' bindtap='beginTrack'> 开始 </button>
<button class='cu-btn bg-orange shadow sm' bindtap='pauseTrack'> 暂停 </button>
<button class='cu-btn bg-red shadow sm' bindtap='endTrack'> 结束 </button>
</view>
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,
评论0