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

2025-12-23 10:39:41 +08:00
parent d12986b85e
commit 76bdcd1aba
20 changed files with 964 additions and 399 deletions
@@ -2,10 +2,20 @@
 	<view class="map-container" :class="{ 'full-width': props.fullWidth }" :style="{ '--map-height': props.customHeight || '78vh' }">
 		<!-- 地图容器 -->
 		<view class="map-wrapper">
-			<!-- 使用小程序原生地图组件 -->
-			<map id="map" class="native-map" :longitude="mapCenter.longitude" :latitude="mapCenter.latitude"
-				:markers="mapMarkers" :scale="mapZoom" :show-location="false" @regionchange="onMapRegionChange"
-				@markertap="onMapMarkerTap" @callouttap="onCalloutTap" @updated="onMapUpdated" @error="onMapError">
+			<!-- 支付宝小程序地图组件：使用高德地图 -->
+			<map id="map" class="native-map" 
+				:longitude="mapCenter.longitude" 
+				:latitude="mapCenter.latitude"
+				:markers="mapMarkers" 
+				:scale="mapZoom" 
+				:show-location="false"
+				@regionchange="onMapRegionChange"
+				@markertap="onMapMarkerTap"
+				@tap="onMapTap"
+				@updated="onMapUpdated" 
+				@error="onMapError">
+			</map>
+
 			<!-- 覆盖在地图上的广告轮播（使用 cover-view 以兼容小程序原生组件层级） -->
 			<cover-view class="index-swiper" v-if="!props.hideControls && !props.hideMapOverlays && currentBannerImage">
 				<cover-image :src="currentBannerImage" class="index-swiper-img" mode="aspectFill" @tap="handleBannerTap"></cover-image>
@@ -20,24 +30,23 @@
 				</cover-view>
 			</cover-view>
 				
-				<!-- 地图中心固定定位图标 -->
-				<cover-view class="center-location-marker" v-if="!props.hideMapOverlays">
-					<cover-image src="/static/location-icon.png" class="center-marker-icon"></cover-image>
-				</cover-view>
+			<!-- 地图中心固定定位图标 -->
+			<cover-view class="center-location-marker" v-if="!props.hideMapOverlays">
+				<cover-image src="/static/location-icon.png" class="center-marker-icon"></cover-image>
+			</cover-view>
 				
-				<cover-view class="map-side-controls" v-if="!props.hideControls && !props.hideMapOverlays">
-					<cover-view class="side-btn locate" @tap="handleRelocate">
-						<cover-image class="side-icon" src="/static/location.png"></cover-image>
-					</cover-view>
-					<cover-view class="side-btn service" @tap="handleService">
-						<cover-image class="side-icon" src="/static/customer-service.png"></cover-image>
-					</cover-view>
-					<cover-view class="side-btn search" @tap="handleSearch">
-						<cover-image class="side-icon" src="/static/other_device.png"></cover-image>
-					</cover-view>
-					
+			<!-- 地图侧边控制按钮：重定位、客服中心、查看附近设备 -->
+			<cover-view class="map-side-controls" v-if="!props.hideControls && !props.hideMapOverlays">
+				<cover-view class="side-btn locate" @tap="handleRelocate">
+					<cover-image class="side-icon" src="/static/location.png"></cover-image>
 				</cover-view>
-			</map>
+				<cover-view class="side-btn service" @tap="handleService">
+					<cover-image class="side-icon" src="/static/customer-service.png"></cover-image>
+				</cover-view>
+				<cover-view class="side-btn search" @tap="handleSearch">
+					<cover-image class="side-icon" src="/static/other_device.png"></cover-image>
+				</cover-view>
+			</cover-view>

 			<!-- 地图加载状态 -->
 			<view class="map-loading" v-if="isLoading">
@@ -245,6 +254,35 @@
 		deep: true
 	})

+	// 启动广告轮播
+	const startBannerRotation = () => {
+		// 如果只有一张或没有图片，不需要轮播
+		if (!props.bannerImages || props.bannerImages.length <= 1) {
+			console.log('图片数量不足，不启动轮播')
+			return
+		}
+
+		// 清除旧的定时器
+		stopBannerRotation()
+
+		console.log('开始广告轮播定时器')
+		// 每3秒切换一次
+		bannerTimer = setInterval(() => {
+			const nextIndex = (currentBannerIndex.value + 1) % props.bannerImages.length
+			console.log('轮播切换:', currentBannerIndex.value, '->', nextIndex)
+			currentBannerIndex.value = nextIndex
+		}, 3000)
+	}
+
+	// 停止广告轮播
+	const stopBannerRotation = () => {
+		if (bannerTimer) {
+			console.log('停止广告轮播')
+			clearInterval(bannerTimer)
+			bannerTimer = null
+		}
+	}
+
 	// 监听广告图片变化，启动或停止轮播
 	watch(() => props.bannerImages, (newImages, oldImages) => {
 		console.log('广告图片变化:', newImages?.length, '张')
@@ -270,25 +308,22 @@
 		isLoading.value = false
 	}

-	// 地图区域变化事件（带防抖优化）
+	// 地图区域变化事件（支付宝小程序，带防抖优化）
 	const onMapRegionChange = (e) => {
-		
-		// 只处理结束事件
-		if (!e || e.type !== 'end') {
+		if (!e) {
 			return
 		}
 		
-		const causedBy = e.causedBy || e.detail?.causedBy
+		// 获取触发原因和中心位置
+		const causedBy = e.detail?.causedBy || e.causedBy
+		const centerLocation = e.detail?.centerLocation || e.centerLocation || e.detail?.location
 		
-		if (causedBy === 'gesture' || causedBy === 'scale' || causedBy === 'drag'||causedBy==='update') {
+		if (causedBy === 'gesture' || causedBy === 'scale' || causedBy === 'drag' || causedBy === 'update') {
 			// 清除之前的定时器
 			if (regionChangeTimer) {
 				clearTimeout(regionChangeTimer)
 			}
 			
-			// 直接从事件对象中获取最新的中心点位置
-			const centerLocation = e.detail?.centerLocation || e.centerLocation
-			
 			if (centerLocation && centerLocation.longitude && centerLocation.latitude) {
 				// 防抖：500ms后执行查询
 				regionChangeTimer = setTimeout(() => {
@@ -298,13 +333,11 @@
 					}
 					
 					mapCenter.value = newCenter;
-
-					
 					// 触发父组件查询新位置的场地
 					emit('mapCenterChange', newCenter)
 				}, 500)
 			} else {
-				// 兜底方案：如果事件中没有centerLocation，才使用API获取
+				// 兜底方案：使用API获取地图中心
 				regionChangeTimer = setTimeout(() => {
 					if (mapContext.value) {
 						mapContext.value.getCenterLocation({
@@ -325,15 +358,20 @@
 					}
 				}, 500)
 			}
-		} 
+		}
 	}

-	// 标记点点击事件
+	// 标记点点击事件（支付宝小程序）
 	const onMapMarkerTap = (e) => {
-		const markerId = e.detail?.markerId || e.markerId
+		if (!e) {
+			return
+		}
+		
+		// 获取markerId
+		const markerId = e.detail?.markerId || e.markerId || e.detail?.marker?.id
 		
 		// 查找对应的场地位置信息
-		if (props.filteredPositions && props.filteredPositions.length > 0) {
+		if (props.filteredPositions && props.filteredPositions.length > 0 && markerId) {
 			const position = props.filteredPositions[markerId - 1]
 			if (position) {
 				emit('markerTap', position)
@@ -341,14 +379,9 @@
 		}
 	}

-	// 标记点气泡点击事件
-	const onCalloutTap = (e) => {
-		const markerId = e.markerId
-		const marker = mapMarkers.value.find(item => item.id === markerId)
-
-		if (marker && marker.position) {
-			emit('markerTap', marker.position)
-		}
+	// 地图点击事件（支付宝小程序）
+	const onMapTap = (e) => {
+		console.log('地图点击事件:', e)
 	}

 	// 地图错误事件
@@ -391,35 +424,6 @@ const handleSearch = () => {
 		handleJoinTap()
 	}

-	// 启动广告轮播
-	const startBannerRotation = () => {
-		// 如果只有一张或没有图片，不需要轮播
-		if (!props.bannerImages || props.bannerImages.length <= 1) {
-			console.log('图片数量不足，不启动轮播')
-			return
-		}
-
-		// 清除旧的定时器
-		stopBannerRotation()
-
-		console.log('开始广告轮播定时器')
-		// 每3秒切换一次
-		bannerTimer = setInterval(() => {
-			const nextIndex = (currentBannerIndex.value + 1) % props.bannerImages.length
-			console.log('轮播切换:', currentBannerIndex.value, '->', nextIndex)
-			currentBannerIndex.value = nextIndex
-		}, 3000)
-	}
-
-	// 停止广告轮播
-	const stopBannerRotation = () => {
-		if (bannerTimer) {
-			console.log('停止广告轮播')
-			clearInterval(bannerTimer)
-			bannerTimer = null
-		}
-	}
-
 	const handleScan = () => {
 		emit('scan')
 	}
@@ -595,7 +599,7 @@ const handleSearch = () => {
 				// min-width: 160rpx;
 				margin: auto;
 				// height: 72rpx;
-				background: rgba(255, 255, 255, 0.96);
+				// background: rgba(255, 255, 255, 0.96);
 				border-radius: 36rpx;
 				display: inline-flex;
 				flex-direction: row;
@@ -107,7 +107,7 @@

 	const emit = defineEmits(['pay', 'cancel', 'return-device', 'details']);

-	const rawStatus = computed(() => props.order.orderStatus ?? props.order.status);
+	const rawStatus = computed(() => props.order.orderStatus != null ? props.order.orderStatus : props.order.status);
 	const normalizedStatus = computed(() => {
 		const s = rawStatus.value;
 		switch (s) {