<template> <view> <custom-tab-bar> <view class="container"> <map id="map" :longitude="longitude" :latitude="latitude" :scale="17" :style="{ width: '100%', height: mapHeight + 'px' }" show-location :polyline="polyline" :markers="markers" @regionchange="regionChange"></map> <view class="toggle-info" @click="toggleInfo"> <image v-if="showInfo" src="@/static/collapse.png" /> <image v-else src="@/static/expand.png" /> </view> <view class="banner"> <view class="info"> <text>轨迹距离: {{ (distance / 1000).toFixed(2) }} 公里</text> <text>海拔高度: {{ altitude }} 米</text> </view> <view class="controls" v-show="showInfo"> <image v-if="!tracking && !paused" src="@/static/start.png" @click="startTracking" /> <image v-if="paused" src="@/static/continue.png" @click="resumeTracking" /> <image v-if="tracking" src="@/static/stop.png" @click="stopTracking" /> <image v-if="paused" src="@/static/pause.png" @click="confirmTerminateTracking" /> </view> <!-- <text v-if="elapsedTime">经过时间: {{ Math.floor(elapsedTime / 60) }} 分 {{ elapsedTime % 60 }} 秒</text> --> </view> </view> </custom-tab-bar> </view> </template> <script> import { startInspection, endInspection } from '@/api/track.js' import { getFormattedDate, } from '@/utils/common.js' import CustomTabBar from '@/pages/components/customTabbar.vue'; export default { components: { CustomTabBar }, data() { return { longitude: 0, latitude: 0, altitude: 0, distance: 0, tracking: false, paused: false, path: [], // 存储移动轨迹 polyline: [], // 生成移动轨迹 lastLocation: null, // 存储上一个有效位置 isStart: false, // 是否满足调用开始接口 isEnd: false, // 是否满足调用结束接口 startId: null, // ID获取 startTime: 0, // 记录开始时间 // elapsedTime: 0, // 添加经过时间字段，以秒为单位 // timerId: null // 定时器ID locationChangeHandler: null, inspectionSortKey: 0, showInfo: true, mapHeight: 520, systemInfo: null, markers: [], }; }, mounted() { this.systemInfo = uni.getSystemInfoSync(); this.mapHeight = this.systemInfo.platform === 'ios' ? 520 : 480; // 根据需要调整高度 }, onLoad() { this.restoreState(); this.requestLocationPermission(); }, onUnload() { // this.saveState(); }, onHide() { this.saveState(); }, methods: { requestLocationPermission() { uni.authorize({ scope: 'scope.userLocationBackground', success: () => { this.getCurrentLocation(); }, fail: () => { uni.showModal({ title: '提示', content: '请授权获取位置信息，否则无法使用该功能', showCancel: false }); } }); }, getCurrentLocation() { uni.getLocation({ type: 'gcj02', altitude: true, success: (res) => { if (res && res.longitude !== undefined && res.latitude !== undefined) { this.longitude = res.longitude; this.latitude = res.latitude; this.altitude = (res.altitude || 0).toFixed(2); this.lastLocation = { longitude: res.longitude, latitude: res.latitude }; } else { console.error("获取位置返回值不正确", res); } }, fail: (err) => { console.error("获取位置失败", err); } }); }, startTracking() { wx.startLocationUpdateBackground({ type: 'wgs84', success: (res) => { // console.log(res, 'startLocationUpdateBackgroundstartLocationUpdateBackground') if (this.tracking) return; this.isStart = true; this.tracking = true; this.paused = false; this.path = []; this.polyline = []; this.getLocationAndUpdate(); // this.timerId = setInterval(() => { // this.elapsedTime++; // }, 1000); }, fail: (err) => { console.error('开始后台定位失败', err); } }); }, getLocationAndUpdate() { this.locationChangeHandler = async (res) => { const { longitude, latitude, altitude, accuracy, } = res; console.log(res, 'resresresres') this.altitude = (altitude || 0).toFixed(2); if (this.isSignificantChange(longitude, latitude) && this.startId !== null && accuracy < 40) { this.inspectionSortKey++ this.path.push({ longitude, latitude, height: (altitude || 0).toFixed(2), inspectionSortKey: this.inspectionSortKey }); this.updatePolyline(); this.calculateDistance(); this.longitude = longitude; this.latitude = latitude; this.lastLocation = { longitude, latitude }; // 更新上一个位置 } else if (this.startId === null) { if (this.isStart) { await this.reverseGeocode(longitude, latitude, res); } } }; wx.onLocationChange(this.locationChangeHandler); }, async stopTracking() { if (!this.tracking) return; this.tracking = false; this.paused = true; // if (this.timerId !== null) { // clearInterval(this.timerId); // this.timerId = null; // } await this.getLocationAndUpdate(); if (this.locationChangeHandler) { wx.offLocationChange(this.locationChangeHandler); this.locationChangeHandler = null; // 清空引用 } }, resumeTracking() { wx.startLocationUpdateBackground({ type: 'wgs84', success: (res) => { if (this.tracking) return; this.tracking = true; this.paused = false; this.getLocationAndUpdate(); }, fail: (err) => { console.error('开始后台定位失败', err); } }); // this.timerId = setInterval(() => { // this.elapsedTime++; // }, 1000); }, confirmTerminateTracking() { uni.showModal({ title: '确认终止', content: '请确认本次轨迹定位是否结束', success: (res) => { if (res.confirm) { this.isEnd = true; this.isStart = false; uni.getLocation({ type: 'gcj02', altitude: true, success: async (res) => { const { longitude, latitude, altitude } = res; await this.reverseGeocode(longitude, latitude, res); this.markers.push({ id: 2, latitude, longitude, iconPath: '/static/road-stop.png', // 开始图标路径 width: 60, height: 60, }); setTimeout(() => { this.markers = []; }, 2000) }, fail: (err) => { console.error("获取位置失败", err) } }); } } }); }, updatePolyline() { this.polyline = [{ points: this.path, color: "#FF0000DD", width: 5, dottedLine: false }]; }, calculateDistance() { if (this.path.length < 2) return; const lastPoint = this.path[this.path.length - 2]; const currentPoint = this.path[this.path.length - 1]; const distance = this.getDistance(lastPoint, currentPoint); this.distance += distance; }, getDistance(point1, point2) { const radLat1 = (point1.latitude * Math.PI) / 180.0; const radLat2 = (point2.latitude * Math.PI) / 180.0; const a = radLat1 - radLat2; const b = (point1.longitude * Math.PI) / 180.0 - (point2.longitude * 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) ) ); s = s * 6378137.0; // 地球半径 s = Math.round(s * 10000) / 10000.0; return s; }, isSignificantChange(longitude, latitude) { if (!this.lastLocation) return true; const deltaLongitude = Math.abs(longitude - this.lastLocation.longitude); const deltaLatitude = Math.abs(latitude - this.lastLocation.latitude); return deltaLongitude > 0 || deltaLatitude > 0; }, regionChange(e) { // console.log('region change', e); }, async reverseGeocode(longitude, latitude, data) { // const key = '6b7fd0d3e900c4be1279cb705e103953'; const key = '2f2f22f5109d0b452c754da47fd45f6d'; const url = `https://restapi.amap.com/v3/geocode/regeo?location=${longitude},${latitude}&key=${key}`; // const url = `https://restapi.amap.com/v3/geocode/regeo?location=119.146617,33.618107&key=${key}`; try { let params; const res = await new Promise((resolve, reject) => { uni.request({ url: url, success: (res) => { resolve(res); }, fail: (err) => { reject(err); } }); }); if (this.isStart) { const formattedDate = getFormattedDate(); if (!this.startId) this.startTime = formattedDate; const { city, province, district, township } = res.data.regeocode.addressComponent; params = { id: this.startId, longitude, latitude, city: Array.isArray(city) ? null : city, province, district, township, address: res.data.regeocode.formatted_address, height: (data.altitude || 0).toFixed(2), inspectionSortKey: this.inspectionSortKey, inspectionStartTime: formattedDate }; const startRes = await startInspection(params); this.startId = startRes.data; this.markers.push({ id: 1, latitude, longitude, iconPath: '/static/road-start.png', // 开始图标路径 width: 60, height: 60, }); if (this.path.length === 0) { this.inspectionSortKey++; this.path.push({ longitude, latitude, height: (data.altitude || 0).toFixed(2), inspectionSortKey: this.inspectionSortKey }); } this.isStart = false; } if (this.isEnd) { params = { id: this.startId, userInspectionDtoList: this.path, totalDistance: this.distance.toFixed(2), } await endInspection(params); this.paused = false; this.tracking = false; this.isEnd = false; this.distance = 0; this.altitude = 0; this.startId = null; this.path = []; this.polyline = []; this.inspectionSortKey = 0; uni.removeStorageSync('trackingState'); wx.stopLocationUpdate({ success: () => { console.log('成功停止后台定位'); if (this.locationChangeHandler) { wx.offLocationChange(this.locationChangeHandler); this.locationChangeHandler = null; // 清空引用 } }, fail: (err) => { console.error('停止后台定位失败', err); } }); } } catch (e) { console.error("反向地理编码请求失败", e); } }, saveState() { const state = { startId: this.startId, // 开始运动ID startTime: this.startTime, // 开始日期 isStart: this.isStart, // 开始状态 tracking: this.tracking, // 按钮显示状态 paused: this.paused, // 按钮显示状态 isEnd: this.isEnd, // 是否满足结束状态 lastLocation: this.lastLocation, // 存储上一个有效位置 path: this.path, hideTime: getFormattedDate(), inspectionSortKey: this.inspectionSortKey, // distance: this.distance, // polyline: this.polyline, }; uni.setStorageSync('trackingState', state); }, restoreState() { this.constructor(); const state = uni.getStorageSync('trackingState'); if (state) { if (state.startId) { const currentDate = new Date(); const pastDateObj = new Date(state.hideTime); const timeDifference = currentDate - pastDateObj; if (timeDifference > 240000) { uni.showModal({ title: '提示', content: '检测到您上次的跑步还没有结束，是否继续？', success: (res) => { if (res.confirm) { const { startId, startTime, isStart, tracking, paused, isEnd, lastLocation, path, inspectionSortKey } = state; this.startId = startId; // 开始运动ID this.startTime = startTime; // 开始日期 this.isStart = isStart; // 开始状态 this.tracking = tracking; // 按钮显示状态 this.paused = paused; // 按钮显示状态 this.isEnd = isEnd; // 是否满足结束状态 this.lastLocation = lastLocation; // 存储上一个有效位置 this.path = path; this.inspectionSortKey = inspectionSortKey; // if (tracking) { // const pastDate = new Date(startTime); // 过去的日期 // const currentDate = new Date(); // 当前日期 // // 计算时间差（以秒为单位） // this.elapsedTime = Math.floor((currentDate - pastDate) / // 1000); // 转换为秒 // } // this.timerId = setInterval(() => { // this.elapsedTime++; // }, 1000); } else if (res.cancel) { this.confirmTerminateTracking() } } }); } } } }, constructor() { this.longitude = 0; this.latitude = 0; this.altitude = 0; this.distance = 0; this.tracking = false; this.paused = false; this.path = []; // 存储移动轨迹 this.polyline = []; // 生成移动轨迹 this.lastLocation = null; // 存储上一个有效位置 this.isStart = false; // 是否满足调用开始接口 this.isEnd = false; // 是否满足调用结束接口 this.startId = null; // ID获取 this.startTime = 0; // 记录开始时间 this.inspectionSortKey = 0; // this.elapsedTime = 0; // 添加经过时间字段，以秒为单位 // this.timerId = null; // 定时器ID }, toggleInfo() { this.showInfo = !this.showInfo; // 切换信息的显示状态 if (this.showInfo) { this.mapHeight = this.systemInfo.platform === 'ios' ? 520 : 480; // 根据需要调整高度 } else { this.mapHeight = this.systemInfo.platform === 'ios' ? 600 : 550; // 根据需要调整高度 } }, } }; </script> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .controls { margin-top: 20px; display: flex; flex-direction: row; justify-content: center; gap: 15px; } .controls image { width: 50px; height: 50px; cursor: pointer; } .toggle-info { width: 100%; padding-bottom: 10px; text-align: center; } .toggle-info image { width: 25px; height: 25px; } .banner { width: 100%; } .info { display: flex; align-items: center; justify-content: center; padding: 0 30px; } .info text { flex: 1 } .info text:last-child { text-align: right; } </style>