微信小程序开发之实现一个跑步小程序

目录

地图组件

当前位置

开始跑步按钮

GPS定位

设置前后台允许获取定位

开启前后台定位

绘制路线

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

地图组件

定义一个全屏的地图,地图配置项经纬度(longitudelatitude),缩放(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 }) })

以上就是微信小程序开发之实现一个跑步小程序的详细内容,更多关于微信跑步小程序的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读