fix:对接高德地图,修复地图bug

This commit is contained in:
2025-12-23 10:39:41 +08:00
parent d12986b85e
commit 76bdcd1aba
20 changed files with 964 additions and 399 deletions
+112 -107
View File
@@ -1,30 +1,31 @@
<template>
<view class="container fullscreen">
<!-- 自定义导航栏 -->
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="navbar-content" :style="{ height: navBarHeight + 'px' }">
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'rpx' }">
<view class="navbar-content" :style="{ height: navBarHeight + 'rpx' }">
<text class="navbar-title">{{ $t('home.title') }}</text>
</view>
</view>
<!-- 顶部信息区域通知招商等 -->
<view class="top-info-section" :style="{ top: (statusBarHeight + navBarHeight) + 'px' }">
<!-- 通知栏 -->
<view class="notice-wrapper" v-if="noticeText" @click="openNoticePopup">
<uv-notice-bar :text="noticeText" :speed="50" :show-icon="true" color="#07c160" bg-color="#E8F8EF"
icon="volume"></uv-notice-bar>
<!-- 顶部信息区域通知招商等 -->
<view class="top-info-section" :style="{ top: (statusBarHeight + navBarHeight) + 'rpx' }">
<!-- 通知栏 -->
<view class="notice-wrapper" v-if="noticeText" @click="openNoticePopup">
<uv-notice-bar :text="noticeText" :speed="50" :show-icon="true" color="#07c160" bg-color="#E8F8EF"
icon="volume"></uv-notice-bar>
</view>
</view>
</view>
<!-- 内容区域 -->
<view class="main-content" :style="{ paddingTop: (statusBarHeight + navBarHeight + noticeHeight) + 'px' }">
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
:enableMarkers="true" :bannerImages="bannerImages"
:hideMapOverlays="showGuidePopup || showNoticePopup || showActivityPopup"
@relocate="handleRelocate" @scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" @bannerClick="handleBannerClick" />
<view class="main-content"
:style="{ paddingTop: (statusBarHeight + navBarHeight+navBarHeight + noticeHeight) + 'rpx' }">
<!-- 全屏地图组件 -->
<MapComponent v-if="!isLoading && userLocation" ref="mapRef" :userLocation="userLocation"
:positionList="positionList" :filteredPositions="filteredPositions" :searchKeyword="searchKeyword"
:enableMarkers="true" :bannerImages="bannerImages"
:hideMapOverlays="showGuidePopup || showNoticePopup || showActivityPopup" @relocate="handleRelocate"
@scan="handleScan" @showList="showLocationList" @markerTap="selectPosition"
@mapCenterChange="onMapCenterChange" @bannerClick="handleBannerClick" />
<!-- 地图加载状态 -->
<view v-if="isLoading || !userLocation" class="map-loading-placeholder">
@@ -101,7 +102,7 @@
</view>
<!-- 使用指南居中弹出ref 控制 open/close -->
<uv-popup ref="guidePopup" mode="center" :overlay="true" :closeOnClickOverlay="false"
<uv-popup ref="guidePopup" mode="center" :overlay="true" :closeOnClickOverlay="false"
:safeAreaInsetBottom="false">
<view class="guide-popup">
<view class="guide-header">
@@ -187,7 +188,7 @@
} from 'vue'
import {
getQueryString,
wxLogin
alipayLogin
} from '../../util/index.js'
import {
URL
@@ -218,12 +219,9 @@
useI18n
} from '../../utils/i18n.js'
// 开启右上角分享菜单(仅 mp-weixin 有效)
// #ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
// 支付宝小程序不支持分享菜单,移除相关代码
// #ifdef MP-ALIPAY
// 支付宝小程序分享功能通过页面配置实现
// #endif
const {
@@ -317,7 +315,7 @@
'Content-Language': languageCode
},
data: {
type: 'wx_user_type' // 微信小程序用户端
type: 'zfb_user_type' // 支付宝小程序用户端
}
})
@@ -365,8 +363,8 @@
'Content-Language': languageCode
},
data: {
appPlatform: 'wechat', // 微信平台
appType: 'user' // 用户端
appPlatform: 'alipay', // 支付宝平台
appType: 'user' // 用户端
}
})
@@ -394,7 +392,9 @@
console.log('点击首页广告:', index, bannerImages.value[index])
// 可以根据需要添加跳转逻辑
// 例如跳转到合作加盟页面
uni.navigateTo({ url: '/pages/join/index' })
uni.navigateTo({
url: '/pages/join/index'
})
}
// 查询最近的活动
@@ -480,15 +480,13 @@
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight || 0
// #ifdef MP-WEIXIN
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// 计算导航栏内容高度:(胶囊底部坐标 - 状态栏高度) 确保与胶囊对齐
navBarHeight.value = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
// #ifdef MP-ALIPAY
// 支付宝小程序导航栏高度计算
navBarHeight.value = 44
// #endif
// #ifndef MP-WEIXIN
// 非微信小程序使用默认高度
// #ifndef MP-ALIPAY
// 其他平台使用默认高度
navBarHeight.value = 44
// #endif
@@ -523,94 +521,94 @@
console.warn('清理旧缓存失败:', e);
}
// 开发环境测试距离计算
if (process.env.NODE_ENV === 'development') {
testDistanceCalculation()
}
// 并行加载公告和广告(不依赖定位)
await Promise.all([
getNoticeText(),
getBannerImages()
])
// 开发环境测试距离计算
if (process.env.NODE_ENV === 'development') {
testDistanceCalculation()
}
// 1. 先获取用户位置
await getUserLocationAndAddress()
// 并行加载公告和广告(不依赖定位)
await Promise.all([
getNoticeText(),
getBannerImages()
])
// 2. 加载场地列表(依赖定位)
await loadPositions()
// 1. 先获取用户位置
await getUserLocationAndAddress()
// 3. 查询活动并显示弹窗
await checkActiveActivity()
// 2. 加载场地列表(依赖定位)
await loadPositions()
// 3. 查询活动并显示弹窗
await checkActiveActivity()
} catch (error) {
console.error('初始化失败:', error)
uni.showToast({
title: $t('home.getLocationFailed'),
icon: 'none'
})
uni.showToast({
title: $t('home.getLocationFailed'),
icon: 'none'
})
} finally {
isLoading.value = false
}
}
const getUserLocationAndAddress = async () => {
// 使用腾讯地图SDK获取位置(若失败抛出,由调用方统一处理)
const location = await getUserLocation()
// 使用腾讯地图SDK获取位置(若失败抛出,由调用方统一处理)
const location = await getUserLocation()
if (!location?.longitude || !location?.latitude) {
throw new Error('invalid location result')
}
if (!location?.longitude || !location?.latitude) {
throw new Error('invalid location result')
}
// 保存用户位置
userLocation.value = {
longitude: location.longitude,
latitude: location.latitude
}
console.log(userLocation.value);
// 将经纬度写入本地缓存(基础信息)
try {
uni.setStorageSync('userLocation', {
// 保存用户位置
userLocation.value = {
longitude: location.longitude,
latitude: location.latitude
})
} catch (e) {
console.warn('缓存基础定位信息失败:', e)
}
// 只在首次初始化时设置标记
if (!isLocationInitialized.value) {
isLocationInitialized.value = true
}
// 获取详细地址信息
try {
const addressResult = await getRegeo(location.longitude, location.latitude)
if (addressResult.success) {
const addressInfo = addressResult.data
userLocation.value.address = addressInfo.formatted_address
userLocation.value.city = addressInfo.addressComponent.city
userLocation.value.district = addressInfo.addressComponent.district
// 更新本地缓存,包含地址信息
try {
uni.setStorageSync('userLocation', {
longitude: userLocation.value.longitude,
latitude: userLocation.value.latitude,
address: userLocation.value.address,
city: userLocation.value.city,
district: userLocation.value.district
})
} catch (e) {
console.warn('缓存带地址的定位信息失败:', e)
}
}
} catch (error) {
// 忽略地址信息错误,使用基础定位信息
}
return userLocation.value
console.log(userLocation.value);
// 将经纬度写入本地缓存(基础信息)
try {
uni.setStorageSync('userLocation', {
longitude: location.longitude,
latitude: location.latitude
})
} catch (e) {
console.warn('缓存基础定位信息失败:', e)
}
// 只在首次初始化时设置标记
if (!isLocationInitialized.value) {
isLocationInitialized.value = true
}
// 获取详细地址信息
try {
const addressResult = await getRegeo(location.longitude, location.latitude)
if (addressResult.success) {
const addressInfo = addressResult.data
userLocation.value.address = addressInfo.formatted_address
userLocation.value.city = addressInfo.addressComponent.city
userLocation.value.district = addressInfo.addressComponent.district
// 更新本地缓存,包含地址信息
try {
uni.setStorageSync('userLocation', {
longitude: userLocation.value.longitude,
latitude: userLocation.value.latitude,
address: userLocation.value.address,
city: userLocation.value.city,
district: userLocation.value.district
})
} catch (e) {
console.warn('缓存带地址的定位信息失败:', e)
}
}
} catch (error) {
// 忽略地址信息错误,使用基础定位信息
}
return userLocation.value
}
const loadPositions = async () => {
@@ -890,7 +888,11 @@
})
})
let deviceNo = getQueryString(scanResult.path, 'deviceNo')
// 兼容微信和支付宝小程序的扫码结果结构
// 微信小程序:scanResult.path
// 支付宝小程序:scanResult.result
const scanPath = scanResult.path || scanResult.result || ''
let deviceNo = getQueryString(scanPath, 'deviceNo')
if (!deviceNo) {
uni.showToast({
@@ -1079,10 +1081,13 @@
</script>
<style lang="scss" scoped>
/* 支付宝小程序页面背景色通过外层 view 设置 */
.container {
height: 100vh;
width: 100vw;
background-color: #fff;
min-height: 100vh;
/* 支付宝小程序需要设置 min-height */
display: flex;
flex-direction: column;
}