微信小程序实现轨迹回放的示例代码微信小程序实现轨迹回放的示例代码
主要介绍了微信小程序实现轨迹回放的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作
具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在微信小程序实现轨迹回放的效果
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,
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 + ' 速度：' + res.data.pointsInfos[0].speed + ' km/h',
评论0