taro开发微信小程序-播放轨迹(十一)

taro集成了地图后如何实现轨迹播放,暂停,停止呢？本身地图并不具备轨迹播放的能力，但是基于地图api可以实现轨迹播放的效果

思路如下：

1.获取所有的轨迹坐标点-最好是数组格式的json

2.定义一个定时任务动态将数组传递给wxml的polyline

3.定义三个按钮来触发定时任务

实现过程如下：

<Map polyline={{polyline}}></Map>construcure(){this.timer = null;this.polyline ={ points:[] };this._polyline =[{},{},{}];//查询的坐标集合this.speed=1000;
}
start(){if(this.timer){return false;}let speed = this.speed;let _this =thisthis.timer = setInterval(function(){//将 _polyline push 到 polyline的points 注意this对象 也可以使用es6 =>_this.setState({polyline:_polyline})},speed)
}
pause(){//对比polyline.points  _polyline的长度 将剩余的项push到polyline.pointsthis.setState({polyline:_polyline})
}
stop(){//清除定时器clearInterval(this.timer);_this.setState({timer:null,_polyline:[]})
}

taro开发微信小程序-初始化项目(一)

taro开发微信小程序-了解项目结构(二)

taro开发微信小程序-使用Taro ui(三)

taro开发微信小程序-路由传参(四)

taro开发微信小程序-页面开发规范(五)

taro开发微信小程序-配置tab页面(六)

taro开发微信小程序-使用websocket(七)

taro开发微信小程序-网络请求(八)

taro开发微信小程序-解决编译报错Error: EISDIR: illegal operation on a directory（九）

taro开发微信小程序-加载腾讯地图(十)

taro开发微信小程序-播放轨迹(十一)

taro开发微信小程序-在地图页面添加搜索框(十二)

taro开发微信小程序-列表下拉刷新,上拉加载(十三)

taro开发微信小程序-添加开发者预览,上传测试版本(十四)

taro开发微信小程序-数据共享于缓存使用Redux(十五)

errMsg:getLocation:fail:require permission desc-小程序无法定位[解决](十六)

taro开发微信小程序-播放轨迹(十一)相关推荐

taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
Taro开发微信小程序（一）
Taro开发微信小程序(一) 技术栈框架:Taro v3.5.1 + React 数据流:redux CSS预处理: SASS 其他库:Taro-UI(目前用到的) 项目初始化 Taro框架搭建参 ...
Taro开发微信小程序实现简单的登录退出功能
Taro是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,还有我发现从某度上搜索的结果首页居然看不到Taro框架的任何信息,但是谷歌首页就直接给出了结果,Taro使用文档.我是准备 ...
taro开发微信小程序
在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例猫眼电影已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. ...
Taro 开发微信小程序入门与实战
目前比较流行的小程序开发框架主要有 WePY.Mpvue.Taro. WePY,Mpvue 是完全用 Vue 的开发方式来开发小程序,WePY 是比较早的小程序开发框架了,相对而言 Mpvue 的开发 ...
Taro开发微信小程序保持登录状态(本地存储)
Taro 一.Taro官网链接 Taro是由凹凸实验室倾力打造的一个开放式跨端跨框架解决方案,支持使用React.Vue.js.Nerv等框架来开发小程序.H5.react Native等应用. ...
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
一.问题描述最近用tarojs在做一个小程序项目时,首页需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全 ...
基于taro开发微信小程序
taro基于nodeJS 安装参考安装及使用 | Taro 文档 cli工具安装 npm install -g @tarojs/cli如果安装过程出现sass错误先安装 npm install -g ...

taro开发微信小程序-播放轨迹(十一)

taro开发微信小程序-播放轨迹(十一)相关推荐

最新文章

热门文章