feat: 多实例支持

yue1123 · Sep 21, 2022 · 8acf029 · 8acf029
1 parent cb055f3
commit 8acf029
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/src/components/baidu-map/index.vue b/src/components/baidu-map/index.vue
@@ -1,10 +1,18 @@
 <template>
 	<div
-		id="baidu-map-container"
+		:id="mapContainerId"
 		:style="{ width: props.width, height: props.height }"
-		style="position: relative; overflow: hidden"
+		style="background: #f1f1f1; position: relative; overflow: hidden"
 	>
-		<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+		<div
+			style="
+				color: #999;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			"
+		>
 			{{ !initd ? 'map loading...' : '' }}
 		</div>
 	</div>
@@ -156,6 +164,8 @@
 	let initd: boolean = false
 	// 地图初始化的发布
 	const { ready } = useLife()
+	const uid = getCurrentInstance()?.uid
+	const mapContainerId = 'baidu-map-container' + uid
 	const props = withDefaults(defineProps<BaiduMapProps>(), {
 		width: '100%',
 		height: '400px',
@@ -232,15 +242,17 @@
 			})
 			return window._BMap.scriptLoader
 		} else {
-			return Promise.resolve()
+			// return Promise.resolve()
+			return window._BMap.scriptLoader
 		}
 	}
 
 	// 初始化地图
 	function init() {
 		getMapScriptAsync().then(() => {
 			const { minZoom, maxZoom, mapType, enableAutoResize } = props
-			map = new BMapGL.Map('baidu-map-container', {
+			console.log(BMapGL)
+			map = new BMapGL.Map(mapContainerId, {
 				minZoom,
 				maxZoom,
 				mapType: window[mapType],
@@ -385,5 +397,5 @@
 		map?.destroy()
 	})
 	provide('getMapInstance', () => map)
-	provide('parentUidGetter', getCurrentInstance()?.uid)
-</script>
+	provide('parentUidGetter', uid)
+</script>