<template>
	<view class="map-container">
		<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
			:custom-map-style="customMapStyle" :enable-custom="true">
		</map>
		<!-- 加载提示 -->
		<view v-if="loading" class="loading-mask">
			<view class="loading-content">地图加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true, // 默认显示加载提示
				latitude: 30.592,
				longitude: 114.305,
				customMapStyle: '8c3efc37298895fd78e6aa0e799e78ce',
				markers: [{
					id: 1,
					latitude: 30.507,
					longitude: 114.404,
					title: '华中科技大学'
				}, {
					id: 2,
					latitude: 30.476,
					longitude: 114.428,
					title: '光谷金融港'
				}, {
					id: 3,
					latitude: 30.504,
					longitude: 114.433,
					title: '武汉东站'
				}]
			}
		},
		onLoad() {
			// 尝试获取当前位置
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				}
			});
		},
		onReady() {
			// 页面初次渲染完成时，隐藏加载提示
			this.loading = false;
		}
	}
</script>

<style>
	.map-container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	/* 加载提示 */
	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #121212;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.loading-content {
		color: rgba(255, 255, 255, 0.9);
		font-size: 16px;
		padding: 12px 24px;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 8px;
	}
</style>
