下面是一個簡單的微信小程序GPS測速功能的實現代碼,包括前端頁面和后端邏輯。
1. 頁面結構 (index.wxml)
<view class="container"><view class="speed-display"><text class="speed-value">{{speed}}</text><text class="speed-unit">km/h</text></view><view class="info-section"><view class="info-item"><text>經度:</text><text>{{longitude}}</text></view><view class="info-item"><text>緯度:</text><text>{{latitude}}</text></view><view class="info-item"><text>精度:</text><text>{{accuracy}}米</text></view></view><button bindtap="startGPS" type="primary" disabled="{{isRunning}}">開始測速</button><button bindtap="stopGPS" type="warn" disabled="{{!isRunning}}">停止測速</button>
</view>
2. 頁面樣式 (index.wxss)
.container {display: flex;flex-direction: column;align-items: center;padding: 20px;
}.speed-display {display: flex;align-items: baseline;margin: 40px 0;
}.speed-value {font-size: 60px;font-weight: bold;
}.speed-unit {font-size: 20px;margin-left: 5px;
}.info-section {width: 100%;margin: 30px 0;
}.info-item {display: flex;justify-content: space-between;margin: 10px 0;padding: 10px;background-color: #f5f5f5;border-radius: 5px;
}button {width: 80%;margin: 10px 0;
}
3. 頁面邏輯 (index.js)
Page({data: {speed: '0.00',longitude: '--',latitude: '--',accuracy: '--',isRunning: false,gpsWatchId: null,lastPosition: null,lastUpdateTime: null},startGPS: function() {const that = this;// 檢查是否已經授權wx.getSetting({success(res) {if (!res.authSetting['scope.userLocation']) {// 未授權,請求授權wx.authorize({scope: 'scope.userLocation',success() {that._startWatching();},fail() {wx.showToast({title: '需要位置權限',icon: 'none'});}});} else {// 已授權,開始監聽that._startWatching();}}});},_startWatching: function() {const that = this;this.setData({isRunning: true,speed: '0.00'});// 開始監聽位置變化const watchId = wx.startLocationUpdate({type: 'gcj02',success: () => {wx.onLocationChange(function(res) {that._updatePosition(res);});},fail(err) {console.error('啟動位置監聽失敗', err);wx.showToast({title: '啟動失敗',icon: 'none'});that.setData({ isRunning: false });}});this.setData({ gpsWatchId: watchId });},_updatePosition: function(position) {const now = Date.now();let speed = 0;if (this.data.lastPosition && this.data.lastUpdateTime) {// 計算距離(米)const distance = this._calculateDistance(this.data.lastPosition.latitude, this.data.lastPosition.longitude,position.latitude,position.longitude);// 計算時間差(小時)const timeDiff = (now - this.data.lastUpdateTime) / 1000 / 3600;// 計算速度(公里/小時)if (timeDiff > 0) {speed = distance / 1000 / timeDiff;}}this.setData({speed: speed.toFixed(2),longitude: position.longitude.toFixed(6),latitude: position.latitude.toFixed(6),accuracy: position.accuracy.toFixed(0),lastPosition: position,lastUpdateTime: now});},// 計算兩個坐標點之間的距離(米)_calculateDistance: function(lat1, lon1, lat2, lon2) {const R = 6371000; // 地球半徑,單位米const dLat = (lat2 - lat1) * Math.PI / 180;const dLon = (lon2 - lon1) * Math.PI / 180;const a = Math.sin(dLat/2) * Math.sin(dLat/2) +Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));return R * c;},stopGPS: function() {if (this.data.gpsWatchId) {wx.stopLocationUpdate({success: () => {wx.offLocationChange();this.setData({ isRunning: false,gpsWatchId: null});},fail(err) {console.error('停止位置監聽失敗', err);}});}},onUnload: function() {// 頁面卸載時停止監聽this.stopGPS();}
});
4. 配置文件 (app.json)
確保在app.json中聲明了位置權限:
{"pages": ["pages/index/index"],"permission": {"scope.userLocation": {"desc": "你的位置信息將用于測速功能"}},"requiredPrivateInfos": ["getLocation", "onLocationChange", "startLocationUpdate"]
}