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


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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
javascript常用方法总结
May 14 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
微信小程序用户授权最佳实践指南
May 08 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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
利用JS实现数字增长
2016/07/28 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
Vue.js用法详解
2017/11/13 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
python局部赋值的规则
2013/03/07 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
详解Python3 pickle模块用法
2019/09/16 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python连接mysql方法及常用参数
2020/09/01 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
行政前台岗位职责
2013/12/04 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
推销搭讪开场白
2015/05/28 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers
MySQL sql模式设置引起的问题
2022/05/15 MySQL