Uniapp实现微信小程序跑步运动轨迹、历史轨迹和轨迹回放等功能

一、先看效果

跑步运动助手微信小程序

二、实现功能

        “跑步运动助手”是一款基于Uniapp开发的微信小程序，主要实现了跑步轨迹记录、历史轨迹、轨迹纠偏、轨迹回放和轨迹排名等功能。室内跑步记录正在开发，还没有发布，主要利用手机加速度传感器实现计步功能。

1、轨迹记录

        轨迹记录主要用到微信小程序的startLocationUpdateBackground和onLocationChange两个API接口，该接口实现了前后台GPS定位，连续采集用户的跑步定位信息，然后通过map组件把轨迹绘制出来。

//前后台定位接口
wx.startLocationUpdateBackground(callback) {var that = this;success(res) {//开始监听GPS数据that.onLocationChange();},fail(res) {//授权失败后引导用户打开定位信息...				}
})//监听GPS数据的变化
onLocationChange() {var that = this;var points = [];var paths = [];wx.onLocationChange(function(res) {res.time = Date.now();points.push(res);that.latitude = res.latitude;that.longitude = res.longitude;if (that.scale = 3) {that.scale = 18;}paths = filterGPSPoints(points);paths = douglasPeucker(paths, 3);that.playRunAudio();uni.setStorage({key: 'gps',data: JSON.stringify(paths),success: function(e) {//console.log(e);},fail: function(e) {console.log(e)}});});
}//绘制跑步轨迹
addLine(points) {var that = this;//计算距离function calculationDistance(ps) {var LC = 0;ps.forEach(function(f, index) {let lng1 = f.longitude;let lat1 = f.latitude;let lng2 = f.longitude;let lat2 = f.latitude;if (ps[index + 1]) {lng2 = ps[index + 1].longitude;;lat2 = ps[index + 1].latitude;}let radLat1 = lat1 * Math.PI / 180.0;let radLat2 = lat2 * Math.PI / 180.0;let a = radLat1 - radLat2;let b = (lng1 * Math.PI / 180.0) - (lng2 * Math.PI / 180.0);let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));LC = LC + s * 6370996.81})that.LC = (LC / 1000).toFixed(3);that.SD = (LC * 3.6 / (that.time)).toFixed(2);};calculationDistance(points);const taskLine = { //路线points: points, //经纬度数组color: '#00ff00', //线的颜色width: 5, //线的宽度borderWidth: 1, //线的厚度dottedLine: false, //是否虚线arrowLine: true //带箭头的线 开发者工具暂不支持该属性}this.polyline[0] = taskLine;
}

其中：filterGPSPoints方法用于过滤GPS飘逸点数据，douglasPeucker方法用于抽稀GPS数据，addLine方法绘制跑步轨迹。

2、轨迹回放

轨迹回放功能的实现主要通过moveAlong方法实现，设置的参数包括marker点的ID，轨迹线路和动画长度。本文实现了在轨迹回放时候切换三维场景，然后自动旋转等特效。

moveAlong() {var that = this;var duration = 10000;var durationMove = 50;var markerId = 10;var js = TimeTotimestamp(that.JS);var sd = that.SD;var lc = that.LC;that.startNum = 2;that.isShowMyRunRecord = false;that.isShowMyWeRun = false;if (this.MapContext) {this.MapContext.moveAlong({markerId: markerId,autoRotate: false,path: this.polyline[0].points,duration: duration, //假设动画执行5秒success(res) { // ios是开始动画就会执行，安卓手机是在动画结束后执行success that.removeAlong();that.startName = "开始";that.startNum = 0;that.isShowMyRunRecord = true;that.isShowMyWeRun = true;that.isShowShare = true;}});var i = 0;var tt = 10;that.startName = tt;that.endS = setInterval(function() {tt--;that.startName = tt;}, 1000);var durationZH = duration / durationMove;that.rotateDH = setInterval(function() {i++;if (i < 40) {that.skew = i;}that.rotate = (270 / durationZH) * i;that.startName = tt;that.LC = ((js / durationZH) * i * (sd / 3600)).toFixed(3);that.JS = TimeToHFS((js / durationZH) * i);}, durationMove);}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！