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


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 相关文章推荐
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
浅析创建javascript对象的方法
May 13 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
技校生自我鉴定
2013/12/08 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript