feat:首页地图新增设备标记点

This commit is contained in:
2025-10-24 17:08:33 +08:00
parent 179be8f8b0
commit fba9261840
3 changed files with 218 additions and 133 deletions
+89 -28
View File
@@ -6,11 +6,12 @@
icon="volume"></uv-notice-bar>
</view>
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" />
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
:enableMarkers="true"
@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" />
<!-- 底部操作栏附近设备 / 扫码使用 / 我的 -->
<view class="bottom-actions">
@@ -175,6 +176,7 @@
const showPhoneAuthPopup = ref(false)
const isLocationInitialized = ref(false)
const showLocationPopup = ref(false)
const isRelocating = ref(false) // 防抖标志:是否正在重新定位
// 使用指南步骤
const guideSteps = ref([
@@ -184,13 +186,6 @@
{ title: '归还设备', desc: '使用完毕后,按照设备规格要求将风扇还入即可结束订单' }
])
// 使用指南步骤
// 使用指南已取消
// 滚动通知内容
// const noticeText = ref('消费规则:每小时5元,不足1小时按1小时计费,最高24小时封顶,请爱护设备,使用后请及时归还')
const redirectToLogin = () => {
try {
const pages = getCurrentPages()
@@ -423,14 +418,25 @@
}
const loadPositionsByCenter = async (center) => {
if (!center || !center.longitude || !center.latitude) {
console.warn('loadPositionsByCenter: 无效的中心点', center)
return
}
console.log('根据地图中心加载场地:', center)
try {
// 使用原有接口获取所有场地
// 使用原有接口获取所有场地,传入中心点经纬度
const res = await uni.request({
url: `${URL}/device/position/app/list`,
method: 'GET',
header: {
'Authorization': "Bearer " + uni.getStorageSync('token'),
'Clientid': uni.getStorageSync('client_id')
},
data: {
latitude: center.latitude,
longitude: center.longitude
}
})
@@ -438,7 +444,10 @@
redirectToLogin()
return
} else if (res.statusCode === 200 && res.data.code === 200) {
positionList.value = res.data.rows || []
const rows = res.data.rows || []
console.log('加载到场地数量:', rows.length)
positionList.value = rows
// 基于地图中心计算距离
calculateDistances(center)
@@ -447,6 +456,8 @@
filteredPositions.value = positionList.value.filter(item => {
return !item.distanceInMeters || item.distanceInMeters <= maxDistanceInMeters
})
console.log('过滤后场地数量:', filteredPositions.value.length)
} else {
console.error('根据地图中心加载场地失败:', res.data.msg)
@@ -460,34 +471,80 @@
}
const handleRelocate = async () => {
// 防抖:如果正在定位中,直接返回
if (isRelocating.value) {
console.log('正在定位中,请勿重复点击')
return
}
try {
isRelocating.value = true
uni.showLoading({
title: '定位中...'
title: '重新定位中...',
mask: true
})
// 重新获取用户真实位置(不使用缓存)
const loc = await getUserLocation()
const center = {
const newLocation = {
longitude: Number(loc.longitude),
latitude: Number(loc.latitude)
}
userLocation.value = center
try {
uni.setStorageSync('userLocation', center)
} catch (_) {}
if (mapRef.value && typeof mapRef.value.moveToLocation === 'function') {
mapRef.value.moveToLocation(center)
console.log('重新定位成功,新位置:', newLocation)
console.log('当前位置:', userLocation.value)
// 更新用户位置(触发地图组件的watch,自动移动地图)
userLocation.value = {
...newLocation
}
await loadPositionsByCenter(center)
} catch (e) {
// 保存到本地缓存
try {
uni.setStorageSync('userLocation', newLocation)
} catch (e) {
console.warn('缓存位置失败:', e)
}
// 确保地图移动到新位置
if (mapRef.value && typeof mapRef.value.moveToLocation === 'function') {
mapRef.value.moveToLocation(newLocation)
}
// 延迟一下,等待地图移动完成后再查询场地
await new Promise(resolve => setTimeout(resolve, 300))
// 加载新位置的场地
await loadPositionsByCenter(newLocation)
uni.hideLoading()
uni.showToast({
title: '定位失败',
icon: 'none'
title: '定位成功',
icon: 'success',
duration: 1500
})
} catch (e) {
console.error('定位失败:', e)
uni.hideLoading()
uni.showToast({
title: e.errMsg || '定位失败,请检查定位权限',
icon: 'none',
duration: 2000
})
} finally {
uni.hideLoading()
// 1秒后解除防抖锁定
setTimeout(() => {
isRelocating.value = false
}, 1000)
}
}
const onMapCenterChange = (center) => {
console.log('onMapCenterChange 被调用,中心点:', center)
if (center && typeof center.longitude !== 'undefined' && typeof center.latitude !== 'undefined') {
userLocation.value = {
longitude: Number(center.longitude),
@@ -496,8 +553,12 @@
try {
uni.setStorageSync('userLocation', userLocation.value)
} catch (_) {}
// 调用加载场地方法
loadPositionsByCenter(center)
} else {
console.warn('onMapCenterChange: 无效的中心点', center)
}
loadPositionsByCenter(center)
}
const selectPosition = (position) => {