syle:更新样式

components/MapComponent.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="map-container">
+	<view class="map-container" :class="{ 'full-width': props.fullWidth }" :style="{ '--map-height': props.customHeight || '78vh' }">
 		<!-- 地图容器 -->
 		<view class="map-wrapper">
 			<!-- 使用小程序原生地图组件 -->
@@ -7,10 +7,10 @@
 				:markers="mapMarkers" :scale="mapZoom" :show-location="true" @regionchange="onMapRegionChange"
 				@markertap="onMapMarkerTap" @callouttap="onCalloutTap" @updated="onMapUpdated" @error="onMapError">
 				<!-- 覆盖在地图上的可点击控件（使用 cover-view 以兼容小程序原生组件层级） -->
-				<cover-view class="index-swiper">
-					<image src="/static/index_swiper.png" class="index-swiper" mode="aspectFit"></image>
+				<cover-view class="index-swiper" v-if="!props.hideControls" @tap="handleJoinTap">
+					<cover-image src="/static/index_swiper.png" class="index-swiper-img" mode="aspectFit"></cover-image>
 				</cover-view>
-				<cover-view class="map-side-controls">
+				<cover-view class="map-side-controls" v-if="!props.hideControls">
 					<cover-view class="side-btn service" @tap="handleService">
 						<cover-image class="side-icon" src="/static/customer-service.png"></cover-image>
 						<!-- <cover-view class="side-text">客服</cover-view> -->
@@ -100,6 +100,18 @@
 		enableMarkers: {
 			type: Boolean,
 			default: false
+		},
+		customHeight: {
+			type: String,
+			default: '' // 自定义高度，如 '48vh', '400rpx' 等
+		},
+		hideControls: {
+			type: Boolean,
+			default: false // 是否隐藏侧边控制按钮
+		},
+		fullWidth: {
+			type: Boolean,
+			default: false // 是否全宽显示（去掉 margin 和固定宽度）
 		}
 	})
 
@@ -122,13 +134,23 @@
 	const mapMarkers = ref([]) // 用于地图组件的markers
 	const mapContext = ref(null) // 地图上下文
 
+	// 验证坐标有效性
+	const isValidCoordinate = (lat, lng) => {
+		const latitude = parseFloat(lat)
+		const longitude = parseFloat(lng)
+		return !isNaN(latitude) && !isNaN(longitude) &&
+			latitude >= -90 && latitude <= 90 &&
+			longitude >= -180 && longitude <= 180 &&
+			!(latitude === 0 && longitude === 0) // 排除 0,0 这种无效坐标
+	}
+
 	// 方法
 	const updateMapMarkers = () => {
 		const markers = []
 		// 中心 marker（始终存在，使用传入中心坐标或 userLocation）
 		const centerLng = Number(mapCenter.value.longitude || (props.userLocation && props.userLocation.longitude))
 		const centerLat = Number(mapCenter.value.latitude || (props.userLocation && props.userLocation.latitude))
-		if (!isNaN(centerLng) && !isNaN(centerLat)) {
+		if (!isNaN(centerLng) && !isNaN(centerLat) && isValidCoordinate(centerLat, centerLng)) {
 			markers.push({
 				id: 999999, // 固定 id 作为中心点
 				latitude: centerLat,
@@ -146,19 +168,25 @@
 		// 可选：周边位置点
 		if (props.enableMarkers && props.filteredPositions && props.filteredPositions.length > 0) {
 			props.filteredPositions.forEach((pos, index) => {
-				if (pos.longitude && pos.latitude) {
+				if (pos.longitude && pos.latitude && isValidCoordinate(pos.latitude, pos.longitude)) {
 					const lat = parseFloat(pos.latitude)
 					const lng = parseFloat(pos.longitude)
-					if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
-						markers.push({
-							id: index + 1,
-							latitude: lat,
-							longitude: lng,
-							width: 24,
-							height: 24,
-							title: pos.name
-						})
-					}
+					markers.push({
+						id: index + 1,
+						latitude: lat,
+						longitude: lng,
+						iconPath: '/static/map.png',
+						width: 30,
+						height: 30,
+						callout: {
+							content: pos.name,
+							fontSize: 12,
+							borderRadius: 8,
+							bgColor: '#ffffff',
+							padding: 8,
+							display: 'BYCLICK'
+						}
+					})
 				}
 			})
 		}
@@ -248,20 +276,22 @@
 
 	// 标记点点击事件
 	const onMapMarkerTap = (e) => {
-		const markerId = e.markerId
-		const marker = mapMarkers.value.find(item => item.id === markerId)
+		const markerId = e.detail?.markerId || e.markerId
+		
+		// 中心点标记
+		if (markerId === 999999) {
+			uni.showToast({
+				title: '这是您的当前位置',
+				icon: 'none'
+			})
+			return
+		}
 
-		if (marker) {
-			if (markerId === 0) { // 用户位置标记
-				uni.showToast({
-					title: '这是您的位置',
-					icon: 'none'
-				})
-				return
-			}
-
-			if (marker.position) {
-				emit('markerTap', marker.position)
+		// 查找对应的位置信息
+		if (props.filteredPositions && props.filteredPositions.length > 0) {
+			const position = props.filteredPositions[markerId - 1]
+			if (position) {
+				emit('markerTap', position)
 			}
 		}
 	}
@@ -301,6 +331,12 @@ const handleSearch = () => {
 		})
 	}
 
+	const handleJoinTap = () => {
+		uni.navigateTo({
+			url: '/pages/join/index'
+		})
+	}
+
 	const handleScan = () => {
 		emit('scan')
 	}
@@ -366,11 +402,17 @@ const handleSearch = () => {
 		right: 0;
 		bottom: 0;
 		width: 94vw;
-		height: 78vh;
+		height: var(--map-height, 78vh);
 		margin: 20rpx;
 		border-radius: 20rpx;
 		overflow: hidden;
 
+		&.full-width {
+			width: 100%;
+			margin: 0;
+			border-radius: 0;
+		}
+
 		.map-wrapper {
 			width: 100%;
 			height: 100%;
@@ -511,14 +553,21 @@ const handleSearch = () => {
 	}
 
 	.index-swiper {
-		width: 92vw;
-		height: 180rpx;
+		margin-top: 20rpx;
+		width: 90vw;
+		height: 120rpx;
 		border-radius: 20rpx;
 		z-index: 1000;
 		position: absolute;
-		top: 0;
+		// top: 10rpx;
 		left: 50%;
 		transform: translateX(-50%);
 		right: 0;
+
+		&-img {
+			width: 100%;
+			height: 100%;
+			border-radius: 20rpx;
+		}
 	}
 </style>