labor_map_miniapp/pages/map/map.vue

<template>
	<view class="container">
		<!-- 悬浮卡片 -->
		<view v-if="showCard" class="float-card">
			<view class="card-title">{{ selectedMarker.title }}</view>
			<view class="card-info">
				<text>纬度：{{ selectedMarker.latitude }}</text>
				<text>经度：{{ selectedMarker.longitude }}</text>
			</view>
		</view>

		<!-- 地图中心经纬度信息 -->
		<view class="map-center-info">
			<text>地图中心：</text>
			<text>纬度：{{ mapCenter.latitude.toFixed(6) }}</text>
			<text>经度：{{ mapCenter.longitude.toFixed(6) }}</text>
		</view>

		<!-- 地图组件 -->
		<map style="height: 100vh; width: 100vw;" 
			id="myMap"
			name="" 
			@updated="handleMapLoad" 
			@markertap="handleMarkerTap" 
			@regionchange="handleRegionChange" 
			show-compass 
			:markers="markers" 
			show-location></map>

		<!-- 添加Marker表单 -->
		<view class="form-container">
			<view class="form-title">添加新标记</view>
			<view class="form-item">
				<text>位置名称：</text>
				<input v-model="newMarker.title" type="text" placeholder="请输入位置名称"/>
			</view>
			<view class="form-item">
				<text>纬度：</text>
				<input v-model.number="newMarker.latitude" type="digit" placeholder="请输入纬度"/>
			</view>
			<view class="form-item">
				<text>经度：</text>
				<input v-model.number="newMarker.longitude" type="digit" placeholder="请输入经度"/>
			</view>
			<button @click="addMarker" type="primary">添加标记</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [{
					id: 1,
					latitude: 39.90923,
					longitude: 116.397428,
					title: '北京天安门',
					iconPath: '/static/logo.png',
					width: 30,
					height: 30
				}],
				showCard: false,
				selectedMarker: {},
				newMarker: {
					title: '',
					latitude: 0,
					longitude: 0
				},
				mapCenter: {
					latitude: 39.90923,
					longitude: 116.397428
				},
				mapContext: null
			}
		},
		methods: {
				handleMapLoad() {
					console.log("地图加载完成！")
					// 获取地图上下文
					this.mapContext = uni.createMapContext('myMap');
					// 获取初始地图中心经纬度
					this.getMapCenter();
				},
				// 处理地图区域变化事件
				handleRegionChange(e) {
					// 当用户拖动地图结束时获取地图中心经纬度
					if (e.type === 'end') {
						this.getMapCenter();
					}
				},
				// 获取地图中心经纬度
				getMapCenter() {
					if (this.mapContext) {
						this.mapContext.getCenterLocation({
							success: (res) => {
							this.mapCenter = {
								latitude: res.latitude,
								longitude: res.longitude
							};
							console.log('当前地图中心经纬度:', this.mapCenter);
						}
					});
					}
				},
			// 处理Marker点击事件
			handleMarkerTap(e) {
				const markerId = e.markerId;
				const marker = this.markers.find(item => item.id === markerId);
				if (marker) {
					this.selectedMarker = { ...marker };
					this.showCard = true;
				}
			},
			// 添加新的Marker
			addMarker() {
				if (!this.newMarker.title || !this.newMarker.latitude || !this.newMarker.longitude) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				const newMarker = {
					id: this.markers.length + 1,
					title: this.newMarker.title,
					latitude: this.newMarker.latitude,
					longitude: this.newMarker.longitude,
					iconPath: '/static/logo.png',
					width: 30,
					height: 30
				};

				this.markers.push(newMarker);
				
				// 重置表单
				this.newMarker = {
					title: '',
					latitude: 0,
					longitude: 0
				};

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		position: relative;
		height: 100vh;
	}
	/* 悬浮卡片样式 */
	.float-card {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		max-width: 400px;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	.card-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.card-info {
		font-size: 14px;
		color: #666;
	}
	.card-info text {
		display: block;
		margin: 5px 0;
	}
	/* 表单样式 */
	.form-container {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.95);
		padding: 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}
	.form-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
			text-align: center;
		}
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.form-item text {
		width: 80px;
	}
	.form-item input {
		flex: 1;
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 0 10px;
	}
	button {
		margin-top: 10px;
	}
	/* 地图中心经纬度信息样式 */
	.map-center-info {
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		max-width: 400px;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		padding: 10px 15px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 998;
	}
	.map-center-info text {
		display: inline-block;
		font-size: 14px;
		margin-right: 10px;
	}
</style>