日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(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ù)。最終效果:

微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


本文題目:微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼
本文地址:http://www.dlmjj.cn/article/jphcio.html