更map地图

App.vue

@@ -54,4 +54,4 @@
 	.custom-file-picker .file-picker__box-content {
 		// display: none
 	}
-</style>
+</style>

manifest.json

@@ -62,7 +62,10 @@
                 "appid" : "uni.app.UNIA21EF43",
                 "privacyDescription" : {
                     "NSBluetoothPeripheralUsageDescription" : "需要蓝牙访问权限，用于设备通信",
-                    "NSBluetoothAlwaysUsageDescription" : "需要蓝牙访问权限，用于设备通信"
+                    "NSBluetoothAlwaysUsageDescription" : "需要蓝牙访问权限，用于设备通信",
+                    "NSLocationWhenInUseUsageDescription" : "App需要您的同意,才能在使用期间访问位置",
+                    "NSLocationAlwaysUsageDescription" : "App需要您的同意,才能始终访问位置",
+                    "NSLocationAlwaysAndWhenInUseUsageDescription" : "App需要您的同意,才能始终访问位置"
                 },
                 "dSYMs" : false
             },

pages/common/map/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="map-container">
-		<!-- 背景保护层 -->
+		<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="markers"
-		<view class="map-background"></view>
+			:custom-map-style="customMapStyle" :enable-custom="true">
-		<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
+		</map>
 		<!-- 加载提示 -->
 		<view v-if="loading" class="loading-mask">
 			<view class="loading-content">地图加载中...</view>
@@ -14,174 +14,50 @@
 	export default {
 		data() {
 			return {
-				loading: true
+				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: '武汉东站'
+				}]
 			}
 		},
-		methods: {
+		onLoad() {
-			hideLoading() {
+			// 尝试获取当前位置
-				this.loading = false
+			uni.getLocation({
-			}
+				type: 'gcj02',
-		}
+				success: (res) => {
-	}
+					this.latitude = res.latitude;
-</script>
+					this.longitude = res.longitude;
-
-<script module="amap" lang="renderjs">
-	export default {
-		data() {
-			return {
-				markers: [],
-				customPopup: null
-			}
-		},
-		mounted() {
-			// 初始设置背景色
-			const container = document.getElementById('mapWrapper')
-			container.style.backgroundColor = '#121212'
-			container.style.transition = 'background 0.5s'
-
-			this.initMap()
-		},
-		methods: {
-			async loadScript(url) {
-				return new Promise((resolve) => {
-					const script = document.createElement('script')
-					script.src = url
-					script.onload = resolve
-					document.head.appendChild(script)
-				})
-			},
-
-			async initMap() {
-				try {
-					// 动态加载SDK
-					if (!window.AMap) {
-						await this.loadScript(
-							'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
-						)
-					}
-
-					const container = document.getElementById('mapWrapper')
-					container.innerHTML = `
-          <div id="amapContainer" style="
-            width:100%;
-            height:100%;
-            opacity:0;
-            transition:opacity 0.8s ease-out;
-            background:#121212;
-          "></div>
-        `
-
-					// 初始化地图
-					this.map = new AMap.Map('amapContainer', {
-						viewMode: '3D',
-						zoom: 13,
-						center: [114.305, 30.592],
-						mapStyle: 'amap://styles/grey'
-					})
-
-					// 地图加载完成后淡入
-					this.map.on('complete', () => {
-						document.getElementById('amapContainer').style.opacity = 1
-						this.$ownerInstance.callMethod('hideLoading')
-						// 添加标记点
-						const wuhanPoints = [{
-								lnglat: [114.404, 30.507],
-								name: "华中科技大学"
-							},
-							{
-								lnglat: [114.428, 30.476],
-								name: "光谷金融港"
-							},
-							{
-								lnglat: [114.433, 30.504],
-								name: "武汉东站"
-							}
-						]
-						wuhanPoints.forEach(point => {
-							this.addMarker(point.lnglat, point.name)
-						})
-					})
-					// 创建自定义弹窗
-					this.createCustomPopup()
-				} catch (e) {
-					console.error('初始化失败:', e)
-					this.$ownerInstance.callMethod('hideLoading')
 				}
-			},
+			});
-
-			createCustomPopup() {
-				this.customPopup = document.createElement('div')
-				this.customPopup.className = 'custom-map-popup'
-				this.customPopup.innerHTML = `
-        <div class="popup-content">
-          <div class="popup-title"></div>
-        </div>
-      `
-				this.customPopup.style.display = 'none'
-				document.getElementById('amapContainer').appendChild(this.customPopup)
-			},
-
-			addMarker(position, title) {
-				const marker = new AMap.Marker({
-					position: new AMap.LngLat(...position),
-					map: this.map,
-					icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-				})
-				marker.on('click', () => {
-					this.showCustomPopup(position, title)
-				})
-				this.markers.push(marker)
-				return marker
-			},
-
-			showCustomPopup(position, title) {
-				const pixel = this.map.lngLatToContainer(position)
-				this.customPopup.querySelector('.popup-title').textContent = title
-				this.customPopup.style.display = 'block'
-				this.customPopup.style.left = `${pixel.x}px`
-				this.customPopup.style.top = `${pixel.y}px`
-				this.map.on('click', this.hideCustomPopup)
-			},
-
-			hideCustomPopup() {
-				if (this.customPopup) {
-					this.customPopup.style.display = 'none'
-				}
-				this.map.off('click', this.hideCustomPopup)
-			}
 		},
-		onLoad(options) {
+		onReady() {
-			console.log(options,'optionsoptions');
+			// 页面初次渲染完成时，隐藏加载提示
-			const eventChannel = this.getOpenerEventChannel();
+			this.loading = false;
-			eventChannel.on('MapData', (data) => {
-				console.log(data, 'data');
-			})
 		}
 	}
 </script>
 
 <style>
-	/* 基础样式 */
 	.map-container {
 		width: 100%;
 		height: 100vh;
 		position: relative;
-		overflow: hidden;
-	}
-
-	.map-background {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		background: #121212;
-		z-index: 1;
-	}
-
-	.map-wrapper {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		z-index: 2;
 	}
 
 	/* 加载提示 */
@@ -205,48 +81,4 @@
 		background: rgba(0, 0, 0, 0.7);
 		border-radius: 8px;
 	}
-
+</style>
-	/* 弹窗样式 */
-	.custom-map-popup {
-		position: absolute;
-		z-index: 9999;
-		transform: translate(-50%, -100%);
-		min-width: 200rpx;
-		pointer-events: none;
-		animation: popupFadeIn 0.3s ease-out;
-	}
-
-	.popup-content {
-		background: rgba(18, 45, 74, 0.95);
-		border-radius: 16rpx;
-		padding: 12rpx 24rpx;
-		color: #fff;
-		font-size: 14px;
-		text-align: center;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-		border: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.popup-content:after {
-		content: '';
-		position: absolute;
-		bottom: -8px;
-		left: 50%;
-		transform: translateX(-50%);
-		border-width: 8px 8px 0;
-		border-style: solid;
-		border-color: rgba(18, 45, 74, 0.95) transparent transparent;
-	}
-
-	@keyframes popupFadeIn {
-		from {
-			opacity: 0;
-			transform: translate(-50%, -90%);
-		}
-
-		to {
-			opacity: 1;
-			transform: translate(-50%, -100%);
-		}
-	}
-</style>