新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼
在微信小程序?qū)崿F(xiàn)軌跡回放的效果
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比容城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式容城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋容城地區(qū)。費用合理售后完善,10年實體公司更值得信賴。
1、wxml
2、js
//index.js //獲取應(yīng)用實例 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:"結(jié)束時間" }, 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 + ' \n 速度:' + res.data.pointsInfos[0].speed + ' km/h', color: "#000000", fontSize: 13, borderRadius: 2, bgColor: "#fff", display: "ALWAYS", boxShadow: "5px 5px 10px #aaa" } }], latitude: res.data.points[0].latitude, longitude: res.data.points[0].longitude, }) } }) }, /** * 開始 */ beginTrack:function(){ var that = this; var i = that.data.playIndex == 0 ? 0 : that.data.playIndex; that.timer = setInterval(function () { i ++ that.setData({ playIndex: i, latitude: that.data.polyline[0].points[i].latitude, longitude: that.data.polyline[0].points[i].longitude, markers: [{ iconPath: '../../img/car/e0.png', id: 0, latitude: that.data.polyline[0].points[i].latitude, longitude: that.data.polyline[0].points[i].longitude, width: 30, height: 30, title: that.data.brandNumber, callout: { content: that.data.brandNumber + ' \n 時間:' + that.data.pointsInfo[i].create_time + ' \n 速度:' + that.data.pointsInfo[i].speed + ' km/h', color: "#000000", fontSize: 13, borderRadius: 2, bgColor: "#fff", display: "ALWAYS", boxShadow: "5px 5px 10px #aaa" } }] }) if ((i+1) >= that.data.polyline[0].points.length) { that.endTrack(); } }, 500) }, /** * 暫停 */ pauseTrack:function(){ var that = this; clearInterval(this.timer) }, /** * 結(jié)束 */ endTrack:function(){ var that = this; that.setData({ playIndex: 0, latitude: that.data.polyline[0].points[0].latitude, longitude: that.data.polyline[0].points[0].longitude, markers: [{ iconPath: '../../img/car/e0.png', id: 0, latitude: that.data.polyline[0].points[0].latitude, longitude: that.data.polyline[0].points[0].longitude, width: 30, height: 30, title: that.data.brandNumber, callout: { content: that.data.brandNumber + ' \n 時間:' + that.data.pointsInfo[0].create_time + ' \n 速度:' + that.data.pointsInfo[0].speed + ' km/h', color: "#000000", fontSize: 13, borderRadius: 2, bgColor: "#fff", display: "ALWAYS", boxShadow: "5px 5px 10px #aaa" } }] }) clearInterval(this.timer) } })
后臺數(shù)據(jù)使用的是百度鷹眼的數(shù)據(jù)。最終效果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目:微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼
本文地址:http://www.dlmjj.cn/article/jphcio.html