universal-wechat-uniapp-241007/components/base/mapCard.vue

<template>
	<view class="map-card">
		<!-- 地图区域 -->
		<view class="map-container">
			<map 
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="markers"
				:show-location="false"
				:enable-zoom="false"
				:enable-scroll="false"
				:enable-rotate="false"
				:enable-overlooking="false"
				:enable-traffic="false"
				class="map"
				@tap="onMapTap"
			></map>
		</view>
		
		<!-- 地址信息区域 -->
		<view class="address-container">
			<view class="address-name">{{ addressName }}</view>
			<view class="address-detail" v-if="addressDetail">{{ addressDetail }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MapCard',
	props: {
		// 纬度
		latitude: {
			type: [Number, String],
			required: true,
			default: 39.908823
		},
		// 经度
		longitude: {
			type: [Number, String], 
			required: true,
			default: 116.397470
		},
		// 地址名称
		addressName: {
			type: String,
			required: true,
			default: '位置信息'
		},
		// 地址详情（可选）
		addressDetail: {
			type: String,
			default: ''
		},
		// 地图高度
		mapHeight: {
			type: [Number, String],
			default: 300
		},
		// 是否可点击
		clickable: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		// 地图标记点
		markers() {
			return [{
				id: 1,
				latitude: Number(this.latitude),
				longitude: Number(this.longitude),
				iconPath: '/static/image/location-marker.svg',
				width: 30,
				height: 30,
				callout: {
					content: this.addressName,
					color: '#333333',
					fontSize: 12,
					borderRadius: 4,
					bgColor: '#ffffff',
					padding: 8,
					display: 'ALWAYS'
				}
			}]
		}
	},
	methods: {
		// 地图点击事件
		onMapTap() {
			if (this.clickable) {
				this.$emit('mapClick', {
					latitude: this.latitude,
					longitude: this.longitude,
					addressName: this.addressName
				});
				
				// 打开地图导航
				this.openLocation();
			}
		},
		
		// 打开地图导航
		openLocation() {
			uni.openLocation({
				latitude: Number(this.latitude),
				longitude: Number(this.longitude),
				name: this.addressName,
				address: this.addressDetail || this.addressName,
				success: () => {
					console.log('打开地图成功');
				},
				fail: (err) => {
					console.error('打开地图失败:', err);
					uni.showToast({
						title: '打开地图失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.map-card {
	background: $uni-bg-color;
	border-radius: $uni-border-radius-lg;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin: $uni-spacing-row-base;
}

.map-container {
	position: relative;
	height: 300rpx;
	
	.map {
		width: 100%;
		height: 100%;
	}
}

.address-container {
	padding: $uni-spacing-row-lg $uni-spacing-row-base;
	background: $uni-bg-color;
	
	.address-name {
		font-size: $uni-font-size-lg;
		color: $uni-text-color;
		font-weight: 500;
		margin-bottom: $uni-spacing-col-sm;
		line-height: 1.4;
	}
	
	.address-detail {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		line-height: 1.4;
	}
}

// 点击态效果
.map-card:active {
	background: $uni-bg-color-hover;
}
</style>