自己动手实现一个跑步小程序用到的方法：wx.onLocationChange，监听实时地理位置变化事件，需结合 wx.startLocationUpdateBackground，wx.startLocationUpdate使用。

地图组件

定义一个全屏的地图，地图配置项经纬度（longitude，latitude），缩放（scale），标记点（markers），路线（polyline）等

<view class="map"><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"polyline="{{polyline}}" style="width: 100%; height: 100%"></map>
</view>

地图配置项字段

data: {latitude: '',longitude: '',scale: 16,markers: [],polyline: [{points: [],color: '#FB8337',width: 5}]
},

当前位置

用wx.getLocation获取当前位置，

// 获取当前位置
getNowLocation() {wx.getLocation({type: 'gcj02',isHighAccuracy: true,success: (res) => {this.setData({latitude: res.latitude,longitude: res.longitude,})}})
},

效果如图：

需在app.json中配置

 "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},"requiredBackgroundModes": ["location"],"requiredPrivateInfos": ["getLocation","onLocationChange","startLocationUpdate","startLocationUpdateBackground"]

效果如下：

开始跑步按钮

添加一个开始跑步按钮

<button bindtap="startRun" class="btn" type="primary">开始跑步</button>

.map {width: 100%;height: 100vh;
}.btn {position: absolute;bottom: 100rpx;left: 0;right: 0;z-index: 1000;
}

GPS定位

点击开始跑步的时候，我们需要获取手机的GPS定位是否开启，开启后才能获取地图返回我们的坐标

// 判断手机定位是否开启
checkGPS() {wx.getSystemInfo({success: (res) => {if (!res.locationEnabled) {wx.showModal({title: '提示',content: '请先开启手机GPS定位',showCancel: false})return;}}})
},

开发者工具获取不到，只能用手机测试

设置前后台允许获取定位

wx.startLocationUpdate({success: () => {wx.onLocationChange((res) => {this.setData({latitude: res.latitude,longitude: res.longitude})wx.getSetting({success: (res) => {wx.hideLoading()if (!res.authSetting['scope.userLocationBackground']) {wx.showModal({title: '提示',content: '为确保后台定位精确，请先设置 "使用小程序时和离开后允许" 再进行跑步',showCancel: false,success: function (res) {if (res.confirm) {wx.openSetting()}}})} else {this.running();}}})wx.offLocationChange();wx.stopLocationUpdate();})},
})

开启前后台定位

// 开始前后台定位
wx.startLocationUpdateBackground({success: () => {draw();time();},fail: () => {wx.showToast({title: '后台定位开启失败',icon: 'none'})}
})

绘制路线

 let arr = this.data.polyline[0].points;wx.onLocationChange((res) => {if (dis > 0) {arr.push({latitude: res.latitude,longitude: res.longitude})totalDistance = Number(((totalDistance + dis) * 100).toFixed(2)) / 100;}}this.setData({'polyline[0].points': arr})
})

以上就是一个跑步小程序的简单实现了。

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

动手实现一个跑步小程序相关推荐

如何快速开发一个古诗词小程序？
前言: github日常淘宝,看到的项目可能因为历史原因已经不维护了,跑步起来,那么我们就让他跑起来吧! 本篇以一个古诗词小程序为例,大概花了一天的时间,给想学习的小白或者业余你想整一个玩玩的时候能有 ...
手机的小窗口怎么弄_做一个表白小程序
双十一刚过,不知道你是不是和我一样是一个人来庆祝这个节日的.今年的双十一已经过去了,明年的双十一你是不是还是想一个人过莫慌,我这里演示一个表白小程序. 程序的灵感来自于我曾经某天刷腾讯小视频,发现一 ...
python制作超炫流星雨表白_做一个表白小程序
双十一刚过,不知道你是不是和我一样是一个人来庆祝这个节日的.今年的双十一已经过去了,明年的双十一你是不是还是想一个人过莫慌,我这里演示一个表白小程序. 程序的灵感来自于我曾经某天刷腾讯小视频,发现一 ...
微信小程序是什么？如何快速搭建一个微信小程序？
目录一.微信小程序是什么二.安全管理三.微信小程序的功能四.快速开发一个微信小程序APP 1.集成即构实时音视频SDK 2.初始化SDK引擎 3.创建房间与登录房间 4.房主创建房间 5.推流 ...
开源一个golang小程序商城后台系统（moshopserver）
开源一个golang小程序商城后台系统(moshopserver) 开源一个golang小程序商城后台(moshopserver) golang和c/c++比起来是一门新的语言,一直想学,网上搜集了一 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
python socket能做什么_用python写一个聊天小程序！和女朋友的专属聊天工具！
原标题:用python写一个聊天小程序!和女朋友的专属聊天工具! 1.UDP简介 Internet协议集支持一个无连接的传输协议,该协议称为用户数据报协议(UDP).UDP为应用程序提供了无需建立就可 ...
mqtt与硬件交互_一个关于小程序Iot的具体实现（MQTT版）
原标题:一个关于小程序Iot的具体实现(MQTT版) Iot,这个名词应该很多人都听过了吧,即大数据.Ai等兴起后也紧跟着研发大潮流的到来,即物联网.传统简单的说就是智能化.程序化的控制硬件设施,大家 ...
今晚被两个bug 困扰---第一个，小程序数组传递到PHP后台变成了字符串，导致解析失败
1.今晚被两个bug 困扰-第一个,小程序数组传递到PHP后台变成了字符串,导致解析失败 2.解决方法小程序部分: var that = this; console.log(this.data.co ...

动手实现一个跑步小程序