ios地图

.hbuilderx/launch.json

@@ -2,7 +2,7 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "playground" : "standard",
+            "playground" : "custom",
             "type" : "uni-app:app-ios"
         },
         {

manifest.json

@@ -3,7 +3,7 @@
     "appid" : "__UNI__A21EF43",
     "description" : "设备管控",
     "versionName" : "1.0.0",
-    "versionCode" : "100",
+    "versionCode" : 101,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {
@@ -62,7 +62,9 @@
                 "appid" : "uni.app.UNIA21EF43",
                 "privacyDescription" : {
                     "NSBluetoothPeripheralUsageDescription" : "需要蓝牙访问权限，用于设备通信",
-                    "NSBluetoothAlwaysUsageDescription" : "需要蓝牙访问权限，用于设备通信"
+                    "NSBluetoothAlwaysUsageDescription" : "需要蓝牙访问权限，用于设备通信",
+                    "NSLocationWhenInUseUsageDescription" : "用于地图定位服务",
+                    "NSLocationAlwaysAndWhenInUseUsageDescription" : "用于地图定位服务"
                 },
                 "dSYMs" : false
             },
@@ -80,7 +82,8 @@
                     "amap" : {
                         "name" : "amapHG8nIFW5",
                         "appkey_ios" : "065c43f02c7b627a74ad7dd23b16bb4f",
-                        "appkey_android" : "d7d852dbda2b95f6f796fb9a711a9fee"
+                        "appkey_android" : "d7d852dbda2b95f6f796fb9a711a9fee",
+                        "style" : "enable"
                     }
                 },
                 "oauth" : {},

package-lock.json

@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "axios": "^1.9.0",
         "cordova-sqlite-storage": "^7.0.0",
         "iconv-lite": "^0.6.3",
@@ -13,6 +14,11 @@
         "vk-uview-ui": "^1.5.2"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^1.9.0",
     "cordova-sqlite-storage": "^7.0.0",
     "iconv-lite": "^0.6.3",

pages/common/map/index.vue

@@ -1,12 +1,8 @@
 <template>
 	<view class="map-container">
-		<!-- 背景保护层 -->
+		<map id="map" :style="{ width: '100%', height: '100vh' }" :latitude="latitude" :longitude="longitude" :zoom="13"
-		<view class="map-background"></view>
+			:markers="markers" :custom-style-file="customStyleFile" @markertap="onMarkerTap" @callouttap="onCalloutTap">
-		<view id="mapWrapper" ref="mapRef" class="map-wrapper"></view>
+		</map>
-		<!-- 加载提示 -->
-		<view v-if="loading" class="loading-mask">
-			<view class="loading-content">地图加载中...</view>
-		</view>
 	</view>
 </template>
 
@@ -14,76 +10,59 @@
 	export default {
 		data() {
 			return {
-				loading: true
+				latitude: 30.592,
-			}
+				longitude: 114.305,
-		},
-		methods: {
-			hideLoading() {
-				this.loading = false
-			}
-		}
-	}
-</script>
-
-<script module="amap" lang="renderjs">
-	export default {
-		data() {
-			return {
 				markers: [],
-				customPopup: null
+				// 为自定义基座提供样式文件路径
+				customStyleFile: ''
 			}
 		},
-		mounted() {
+		onLoad() {
-			// 初始设置背景色
+			// #ifdef APP-PLUS
-			const container = document.getElementById('mapWrapper')
+			this.customStyleFile = plus.io.convertLocalFileSystemURL("_www/static/native-res/raw/mapstyle_grey.json");
-			container.style.backgroundColor = '#121212'
+			// #endif
-			container.style.transition = 'background 0.5s'
+			const eventChannel = this.getOpenerEventChannel();
-
+			eventChannel.on('MapData', (data) => {
-			this.initMap()
+				if (data && data.points) {
+					this.processMapData(data.points);
+				} else {
+					this.addDefaultMarkers();
+				}
+			});
+			// In case no data is received
+			setTimeout(() => {
+				if (this.markers.length === 0) {
+					this.addDefaultMarkers();
+				}
+			}, 1000);
 		},
 		methods: {
-			async loadScript(url) {
+			processMapData(points) {
-				return new Promise((resolve) => {
+				const newMarkers = points.map((point, index) => ({
-					const script = document.createElement('script')
+					id: index,
-					script.src = url
+					latitude: point.lnglat[1],
-					script.onload = resolve
+					longitude: point.lnglat[0],
-					document.head.appendChild(script)
+					iconPath: '/static/images/biao.png',
-				})
+					width: 30,
-			},
+					height: 30,
-
+					callout: {
-			async initMap() {
+						content: point.name,
-				try {
+						color: '#ffffff',
-					// 动态加载SDK
+						fontSize: 14,
-					if (!window.AMap) {
+						borderRadius: 10,
-						await this.loadScript(
+						bgColor: '#000000',
-							'https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307'
+						padding: 10,
-						)
+						display: 'BYCLICK'
 					}
+				}));
 
-					const container = document.getElementById('mapWrapper')
+				if (newMarkers.length > 0) {
-					container.innerHTML = `
+					this.latitude = newMarkers[0].latitude;
-          <div id="amapContainer" style="
+					this.longitude = newMarkers[0].longitude;
-            width:100%;
+					this.markers = newMarkers;
-            height:100%;
+				}
-            opacity:0;
+			},
-            transition:opacity 0.8s ease-out;
+			addDefaultMarkers() {
-            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: "华中科技大学"
@@ -96,157 +75,22 @@
 						lnglat: [114.433, 30.504],
 						name: "武汉东站"
 					}
-						]
+				];
-						wuhanPoints.forEach(point => {
+				this.processMapData(wuhanPoints)
-							this.addMarker(point.lnglat, point.name)
+			},
-						})
+			onMarkerTap(e) {
-					})
+				console.log('marker tapped', e.detail.markerId);
-					// 创建自定义弹窗
+			},
-					this.createCustomPopup()
+			onCalloutTap(e) {
-				} catch (e) {
+				console.log('callout tapped', e.detail.markerId);
-					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) {
-			console.log(options,'optionsoptions');
-			const eventChannel = this.getOpenerEventChannel();
-			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;
-	}
-
-	/* 加载提示 */
-	.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;
-	}
-
-	/* 弹窗样式 */
-	.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>

static/native-res/raw/mapstyle_grey.json

@@ -0,0 +1,44 @@
+[
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#ff0000"
+    }
+  },
+  {
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#000000"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "all",
+    "stylers": {
+      "color": "#555555"
+    }
+  },
+  {
+    "featureType": "building",
+    "elementType": "all",
+    "stylers": {
+      "color": "#222222"
+    }
+  },
+    {
+    "featureType": "all",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffffff"
+    }
+  },
+  {
+    "featureType": "all",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#000000"
+    }
+  }
+]

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"