微信小程序開發之實現一個跑步小程序
自己動手實現一個跑步小程序 用到的方法: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 }) })
以上就是微信小程序開發之實現一個跑步小程序的詳細內容,更多關於微信跑步小程序的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 詳解微信小程序軌跡回放實現及遇到的坑
- 使用微信小程序顯示用戶當前地理位置的詳細代碼
- 微信小程序實現導航功能的操作步驟
- uniapp地圖組件(map)使用與遇到的一些問題總結
- 微信小程序中正確使用地圖的方法實例