feat: 修复组件订阅发布先于订阅之前,导致map 子组件在二次加载时,无法正常显示

src/components/baidu-map/index.vue

@@ -1,14 +1,19 @@
 <template>
-	<div id="baidu-map-container" style="overflow: hidden" :style="{ width: props.width, height: props.height }" />
+	<div id="baidu-map-container" :style="{ width: props.width, height: props.height }">
+		<div class="loading">
+			{{ !initd ? 'map loading...' : '' }}
+		</div>
+	</div>
 
 	<slot></slot>
 </template>
 
 <script setup lang="ts">
 	// FIXME: props 属性名字统一, 去掉enable
-	import { inject, defineProps, withDefaults, defineEmits, watch, onMounted, onUnmounted, nextTick } from 'vue'
+	import { inject, defineProps, withDefaults, defineEmits, watch, onMounted, onUnmounted, provide, nextTick } from 'vue'
 	import useLife from '../../hooks/useLife'
 	import bindEvents, { Callback } from '../../utils/bindEvents'
+
 	export interface BaiduMapProps {
 		ak?: string
 		/**
@@ -131,7 +136,7 @@
 		onTouchend?: Callback
 		onLongpress?: Callback
 	}
-	let map: BMapGL.Map
+	let map: BMapGL.Map = null!
 	// 是否初始化
 	let initd: boolean = false
 	// 地图初始化的发布
@@ -230,6 +235,7 @@
 			return Promise.resolve()
 		}
 	}
+
 	// 初始化地图
 	function init() {
 		getMapScriptAsync().then(() => {
@@ -245,9 +251,7 @@
 			bindEvents(props, vueEmits, map)
 			if (!initd) {
 				initd = true
-				setTimeout(() => {
-					ready(map)
-				}, 500)
+				nextTick(() => ready(map))
 			}
 		})
 	}
@@ -370,4 +374,17 @@
 	onUnmounted(() => {
 		map?.destroy()
 	})
+	provide('getMapInstance', () => map)
 </script>
+<style>
+	#baidu-map-container {
+		position: relative;
+		overflow: hidden;
+	}
+	.loading {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translateY(-50%, -50%);
+	}
+</style>

src/components/control/bm-control/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="controlContainer">
+	<div ref="controlContainer" v-show="show">
 		<slot></slot>
 	</div>
 </template>
@@ -23,7 +23,7 @@
 	}
 	const controlContainer = ref<HTMLDivElement>()
 	const { ready } = useLife()
-  
+	const show = ref<boolean>(false)
 	const props = withDefaults(defineProps<baseBmControlOptions>(), {
 		anchor: 'BMAP_ANCHOR_TOP_LEFT',
 		offset: () => ({ x: 83, y: 18 })
@@ -35,6 +35,7 @@
 		customControl.defaultAnchor = window[props.anchor]
 		customControl.defaultOffset = new window.BMapGL.Size(props.offset!.x, props.offset!.y)
 		customControl.initialize = (_map: BMapGL.Map) => {
+			show.value = true
 			return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
 		}
 		map.addControl(customControl)

src/hooks/useBaseMapEffect.ts

@@ -1,13 +1,19 @@
-import { onUnmounted } from 'vue'
+import { onUnmounted ,inject} from 'vue'
 import useBaseMapListener from './useBaseMapListener'
 function useBaseMapEffect(cal: (map: BMapGL.Map) => void | VoidFunction) {
 	const { on } = useBaseMapListener()
-	let onUnmountedCal: VoidFunction | void = void 0
+	const getMapInstance = inject('getMapInstance') as () => BMapGL.Map
+	const map = getMapInstance && getMapInstance()
+	let onUnmountedCallback: void | VoidFunction
+	if (map) {
+		onUnmountedCallback = cal(map as BMapGL.Map)
+	}else{
     on('initd', (map) => {
-		onUnmountedCal = cal(map as BMapGL.Map)
-	})
+			onUnmountedCallback = cal(map as BMapGL.Map)
+		})
+  }
 	onUnmounted(() => {
-		onUnmountedCal && onUnmountedCal()
+		onUnmountedCallback && onUnmountedCallback()
 	})
 }