syle:更新样式
This commit is contained in:
+82
-33
@@ -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>
|
||||
Reference in New Issue
Block a user