微信小程序实现轨迹回放的示例代码


Posted in Javascript onDecember 13, 2019

在微信小程序实现轨迹回放的效果

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 + ' \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)
 },
 /**
  * 结束
  */
 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)
 }
})

后台数据使用的是百度鹰眼的数据。最终效果:

微信小程序实现轨迹回放的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
微信小程序关键字变色实现代码实例
Dec 13 #Javascript
Servlet返回的数据js解析2种方法
Dec 12 #Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
第五节 克隆 [5]
2006/10/09 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
js 小数取整的函数
2010/05/10 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python发送邮件实现基础解析
2020/08/14 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
安全教育主题班会总结
2015/08/14 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang