diff --git a/packages/components/autoComplete/index.vue b/packages/components/autoComplete/index.vue
index 09d9f44d..5c8c7ccd 100644
--- a/packages/components/autoComplete/index.vue
+++ b/packages/components/autoComplete/index.vue
@@ -3,9 +3,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
-  import useLifeCycle from '../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../hooks/useBaseMapEffect'
+  import { ref, watch } from 'vue'
+  import useParentComponentEffect from '../../hooks/useParentComponentEffect'
   import { Callback, Point, bindEvents, getPoint, warn } from '../../utils'
   export interface AutocompleteProps {
     /**
@@ -23,44 +22,41 @@
     onConfirm?: Callback
   }
   const autoCompleteInput = ref<HTMLInputElement>()
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<AutocompleteProps>(), {})
   const vueEmits = defineEmits(['initd', 'unload', 'searchComplete', 'highlight', 'confirm'])
   let autoComplete: BMapGL.Autocomplete
-  onMounted(() =>
-    useBaseMapEffect((map: BMapGL.Map) => {
-      if (!autoCompleteInput.value) warn('BAutoComplete', 'render error')
-      const { location, types } = props
-      let _location: string | BMapGL.Point | BMapGL.Map = map
-      if (typeof location === 'object' && (location as Point).lat && (location as Point).lng) {
-        _location = getPoint(location as Point)
-      }
-      autoComplete = new BMapGL.Autocomplete({
-        location: _location,
-        onSearchComplete: (e) => vueEmits('searchComplete', e),
-        input: autoCompleteInput.value,
-        types
-      })
-      bindEvents(props, vueEmits, autoComplete)
-      ready(map, autoComplete)
-      watch(
-        () => props.location,
-        (n) => {
-          let _location: string | BMapGL.Point | BMapGL.Map = map
-          if (typeof n === 'object' && (n as Point).lat && (n as Point).lng) {
-            _location = getPoint(n as Point)
-          }
-          autoComplete.setLocation(_location)
-        }
-      )
-      watch(
-        () => props.types,
-        (n) => {
-          n && autoComplete.setTypes(n)
-        }
-      )
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    if (!autoCompleteInput.value) warn('BAutoComplete', 'render error')
+    const { location, types } = props
+    let _location: string | BMapGL.Point | BMapGL.Map = map
+    if (typeof location === 'object' && (location as Point).lat && (location as Point).lng) {
+      _location = getPoint(location as Point)
+    }
+    autoComplete = new BMapGL.Autocomplete({
+      location: _location,
+      onSearchComplete: (e) => vueEmits('searchComplete', e),
+      input: autoCompleteInput.value,
+      types
     })
-  )
+    bindEvents(props, vueEmits, autoComplete)
+    ready(map, autoComplete)
+    watch(
+      () => props.location,
+      (n) => {
+        let _location: string | BMapGL.Point | BMapGL.Map = map
+        if (typeof n === 'object' && (n as Point).lat && (n as Point).lng) {
+          _location = getPoint(n as Point)
+        }
+        autoComplete.setLocation(_location)
+      }
+    )
+    watch(
+      () => props.types,
+      (n) => {
+        n && autoComplete.setTypes(n)
+      }
+    )
+  })
   defineOptions({
     name: 'BAutoComplete'
   })
diff --git a/packages/components/contextMenu/index.vue b/packages/components/contextMenu/index.vue
index 7e6ef11c..b6475e5b 100644
--- a/packages/components/contextMenu/index.vue
+++ b/packages/components/contextMenu/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { inject, watch } from 'vue'
-  import useBaseMapEffect from '../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, isString, callWhenDifferentValue } from '../../utils'
   export interface ContextMenuItem {
     text: string
@@ -28,9 +27,8 @@
   })
   const getParentInstance = inject('getOverlayInstance', () => null)
   const vueEmits = defineEmits(['initd', 'unload', 'open', 'close'])
-  const { ready } = useLifeCycle()
   let contextMenu: BMapGL.ContextMenu
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const target = getParentInstance() || map
     const cal = () => {
       contextMenu && target.removeContextMenu(contextMenu)
@@ -90,10 +88,9 @@
     // 在地图上添加点标记
     return cal
   })
-</script>
 
-<script lang="ts">
-  export default {
-    name: 'BContextMenu'
-  }
+  defineOptions({
+    name: 'BContextMenu',
+    inheritAttrs: false
+  })
 </script>
diff --git a/packages/components/control/city-list/index.vue b/packages/components/control/city-list/index.vue
index a91dbfc1..f3aecdde 100644
--- a/packages/components/control/city-list/index.vue
+++ b/packages/components/control/city-list/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { ControlAnchor } from '../../../utils'
   export interface CityListProps {
     /**
@@ -27,7 +26,6 @@
     visible?: boolean
   }
 
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<CityListProps>(), {
     anchor: 'BMAP_ANCHOR_TOP_LEFT',
     offset: () => ({ x: 18, y: 18 }),
@@ -36,7 +34,7 @@
   })
   let cityListControl: BMapGL.CityListControl
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, expand, offset, anchor } = props
     cityListControl = new BMapGL.CityListControl({
       expand: expand,
diff --git a/packages/components/control/control/index.vue b/packages/components/control/control/index.vue
index 75518947..442f7e1a 100644
--- a/packages/components/control/control/index.vue
+++ b/packages/components/control/control/index.vue
@@ -7,9 +7,8 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import { ref, watch } from 'vue'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { ControlAnchor, warn } from '../../../utils'
   export interface ControlOptions {
     /**
@@ -29,39 +28,36 @@
     visible?: boolean
   }
   const controlContainer = ref<HTMLDivElement>()
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<ControlOptions>(), {
     anchor: 'BMAP_ANCHOR_TOP_LEFT',
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  defineEmits(['initd', 'unload'])
-  onMounted(() => {
-    useBaseMapEffect((map: BMapGL.Map) => {
-      if (!controlContainer.value) {
-        if (__DEV__) {
-          warn('BControl', 'container el render error')
-        }
-        return
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    if (!controlContainer.value) {
+      if (__DEV__) {
+        warn('BControl', 'container el render error')
       }
-      const { offset, anchor, visible } = props
-      const customControl = new BMapGL.Control()
-      customControl.defaultAnchor = window[anchor]
-      customControl.defaultOffset = new BMapGL.Size(offset.x, offset.y)
-      customControl.initialize = (_map: BMapGL.Map) => {
-        return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
+      return
+    }
+    const { offset, anchor, visible } = props
+    const customControl = new BMapGL.Control()
+    customControl.defaultAnchor = window[anchor]
+    customControl.defaultOffset = new BMapGL.Size(offset.x, offset.y)
+    customControl.initialize = (_map: BMapGL.Map) => {
+      return _map.getContainer().appendChild(controlContainer.value as Node) as HTMLElement
+    }
+    visible && map.addControl(customControl)
+    ready(map, customControl)
+    watch(
+      () => props.visible,
+      (n) => {
+        map[n ? 'addControl' : 'removeControl'](customControl)
       }
-      visible && map.addControl(customControl)
-      ready(map, customControl)
-      watch(
-        () => props.visible,
-        (n) => {
-          map[n ? 'addControl' : 'removeControl'](customControl)
-        }
-      )
-      return () => map.removeControl(customControl)
-    })
+    )
+    return () => map.removeControl(customControl)
   })
+  defineEmits(['initd', 'unload'])
   defineOptions({
     name: 'BControl',
     inheritAttrs: false
diff --git a/packages/components/control/copyright/index.vue b/packages/components/control/copyright/index.vue
index c3e97269..3e56fd74 100644
--- a/packages/components/control/copyright/index.vue
+++ b/packages/components/control/copyright/index.vue
@@ -7,9 +7,8 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, getCurrentInstance, onUpdated, warn, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import { ref, getCurrentInstance, onUpdated, warn, watch } from 'vue'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import copyrightControlPosCacheMap from './copyrightControlPosCacheMap'
   import { ControlAnchor } from '../../../utils'
   export interface CopyrightProps {
@@ -34,65 +33,62 @@
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  const { ready } = useLifeCycle()
   const copyrightContainer = ref<HTMLDivElement>()
   let copyrightControl: BMapGL.CopyrightControl
   const uid = getCurrentInstance()?.uid
   defineEmits(['initd', 'unload'])
-  onMounted(() => {
-    useBaseMapEffect((map: BMapGL.Map) => {
-      const { anchor, offset, visible } = props
-      if (!copyrightContainer.value) {
-        if (__DEV__) {
-          warn('BCopyright', 'container el render error')
-        }
-        return
-      }
-      let mapBounds = map.getBounds()
-      // 同一位置的 copyright 应该调用 addCopyright, 防止多个 copyright 重叠
-      if (!(copyrightControl = copyrightControlPosCacheMap[anchor])) {
-        copyrightControl = new BMapGL.CopyrightControl({
-          offset: new BMapGL.Size(offset.x, offset.y),
-          anchor: window[anchor]
-        })
-        copyrightControlPosCacheMap[anchor] = copyrightControl
-        map.addControl(copyrightControl)
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
+    const { anchor, offset, visible } = props
+    if (!copyrightContainer.value) {
+      if (__DEV__) {
+        warn('BCopyright', 'container el render error')
       }
-      if (visible) {
-        copyrightControl.addCopyright({
-          id: uid,
-          content: copyrightContainer.value.innerHTML,
-          bounds: mapBounds
-        })
-      }
-      ready(map, copyrightControl)
-      watch(
-        () => props.visible,
-        (n) => {
-          if (n) {
-            copyrightContainer.value &&
-              copyrightControl.addCopyright({
-                id: uid,
-                content: copyrightContainer.value.innerHTML,
-                bounds: mapBounds
-              })
-          } else {
-            uid && copyrightControl.removeCopyright(uid)
-          }
-        }
-      )
-      return () => {
-        const cacheCopyright = copyrightControlPosCacheMap[anchor]
-        const getCopyrightCollection = cacheCopyright?.getCopyrightCollection?.bind(cacheCopyright)
-
-        if (getCopyrightCollection && getCopyrightCollection()?.length > 1) {
-          cacheCopyright.removeCopyright(uid!)
+      return
+    }
+    let mapBounds = map.getBounds()
+    // 同一位置的 copyright 应该调用 addCopyright, 防止多个 copyright 重叠
+    if (!(copyrightControl = copyrightControlPosCacheMap[anchor])) {
+      copyrightControl = new BMapGL.CopyrightControl({
+        offset: new BMapGL.Size(offset.x, offset.y),
+        anchor: window[anchor]
+      })
+      copyrightControlPosCacheMap[anchor] = copyrightControl
+      map.addControl(copyrightControl)
+    }
+    if (visible) {
+      copyrightControl.addCopyright({
+        id: uid,
+        content: copyrightContainer.value.innerHTML,
+        bounds: mapBounds
+      })
+    }
+    ready(map, copyrightControl)
+    watch(
+      () => props.visible,
+      (n) => {
+        if (n) {
+          copyrightContainer.value &&
+            copyrightControl.addCopyright({
+              id: uid,
+              content: copyrightContainer.value.innerHTML,
+              bounds: mapBounds
+            })
         } else {
-          map.removeControl(cacheCopyright)
-          Reflect.deleteProperty(copyrightControlPosCacheMap, anchor)
+          uid && copyrightControl.removeCopyright(uid)
         }
       }
-    })
+    )
+    return () => {
+      const cacheCopyright = copyrightControlPosCacheMap[anchor]
+      const getCopyrightCollection = cacheCopyright?.getCopyrightCollection?.bind(cacheCopyright)
+
+      if (getCopyrightCollection && getCopyrightCollection()?.length > 1) {
+        cacheCopyright.removeCopyright(uid!)
+      } else {
+        map.removeControl(cacheCopyright)
+        Reflect.deleteProperty(copyrightControlPosCacheMap, anchor)
+      }
+    }
   })
   onUpdated(() => {
     if (!copyrightControl) return
diff --git a/packages/components/control/location/index.vue b/packages/components/control/location/index.vue
index a7e2bdf3..78ceb909 100644
--- a/packages/components/control/location/index.vue
+++ b/packages/components/control/location/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, ControlAnchor } from '../../../utils'
   export interface LocationProps {
     /**
@@ -24,7 +23,6 @@
     onLocationError?: Callback
     onLocationSuccess?: Callback
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<LocationProps>(), {
     anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
     offset: () => ({ x: 18, y: 18 }),
@@ -32,7 +30,7 @@
   })
   let locationControl: BMapGL.LocationControl
   const vueEmits = defineEmits(['initd', 'unload', 'locationSuccess', 'locationError'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     locationControl = new BMapGL.LocationControl({
       offset: new BMapGL.Size(offset.x, offset.y),
diff --git a/packages/components/control/navigation3d/index.vue b/packages/components/control/navigation3d/index.vue
index 09ef263c..a6e0d9d2 100644
--- a/packages/components/control/navigation3d/index.vue
+++ b/packages/components/control/navigation3d/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { type ControlAnchor } from '../../../utils'
   export interface Navigation3dProps {
     /**
@@ -27,10 +26,9 @@
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  const { ready } = useLifeCycle()
   let navigation3dControl: BMapGL.NavigationControl3D
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     navigation3dControl = new BMapGL.NavigationControl3D({
       offset: new BMapGL.Size(offset.x, offset.y),
diff --git a/packages/components/control/panorama-control/index.vue b/packages/components/control/panorama-control/index.vue
index d9b5c532..6b8500b4 100644
--- a/packages/components/control/panorama-control/index.vue
+++ b/packages/components/control/panorama-control/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { type ControlAnchor } from '../../../utils'
   export interface PanoramaControlProps {
     /**
@@ -22,7 +21,6 @@
      */
     visible?: boolean
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<PanoramaControlProps>(), {
     anchor: 'BMAP_ANCHOR_TOP_RIGHT',
     offset: () => ({ x: 10, y: 10 }),
@@ -30,7 +28,7 @@
   })
   let panoramaControl: BMapGL.PanoramaControl
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     panoramaControl = new BMapGL.PanoramaControl()
     panoramaControl.setOffset(new BMapGL.Size(offset.x, offset.y))
diff --git a/packages/components/control/scale/index.vue b/packages/components/control/scale/index.vue
index e20470bc..2c687f34 100644
--- a/packages/components/control/scale/index.vue
+++ b/packages/components/control/scale/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { type ControlAnchor, type LengthUnit } from '../../../utils'
   export interface ScaleProps {
     /**
@@ -26,7 +25,6 @@
      */
     visible?: boolean
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<ScaleProps>(), {
     anchor: 'BMAP_ANCHOR_BOTTOM_LEFT',
     offset: () => ({ x: 83, y: 18 }),
@@ -35,7 +33,7 @@
   })
   let scaleCtrl: BMapGL.ScaleControl
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     scaleCtrl = new BMapGL.ScaleControl({
       offset: new BMapGL.Size(offset.x, offset.y),
diff --git a/packages/components/control/zoom/index.vue b/packages/components/control/zoom/index.vue
index 418740f6..9baf3d9e 100644
--- a/packages/components/control/zoom/index.vue
+++ b/packages/components/control/zoom/index.vue
@@ -2,8 +2,7 @@
 
 <script setup lang="ts">
   import { watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { ControlAnchor } from '../../../utils'
   export interface ZoomProps {
     /**
@@ -27,10 +26,9 @@
     offset: () => ({ x: 83, y: 18 }),
     visible: true
   })
-  const { ready } = useLifeCycle()
   let zoomControl: BMapGL.ZoomControl
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const { visible, offset, anchor } = props
     zoomControl = new BMapGL.ZoomControl({
       offset: new BMapGL.Size(offset.x, offset.y),
diff --git a/packages/components/layer/district/index.vue b/packages/components/layer/district/index.vue
index 09e76474..2100d57f 100644
--- a/packages/components/layer/district/index.vue
+++ b/packages/components/layer/district/index.vue
@@ -1,8 +1,7 @@
 <template></template>
 
 <script setup lang="ts">
-  import useLifeCycle from '../../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { type Callback, type DistrictType, bindEvents, error } from '../../../utils'
   import { watch } from 'vue'
   export interface DistrictLayerProps {
@@ -47,7 +46,6 @@
     onMouseover?: Callback
     onMouseout?: Callback
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<DistrictLayerProps>(), {
     kind: 0,
     visible: true,
@@ -58,7 +56,7 @@
   })
   let districtLayer: BMapGL.DistrictLayer
   const vueEmits = defineEmits(['initd', 'unload', 'mouseover', 'mouseout', 'click'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     if (!props.name) return error('BDistrictLayer', 'DistrictLayer props.name is required')
     const { visible, name, kind, fillColor, fillOpacity, strokeColor, viewport } = props
     districtLayer = new BMapGL.DistrictLayer({
diff --git a/packages/components/layer/panorama-coverage/index.vue b/packages/components/layer/panorama-coverage/index.vue
index 2b8e8904..4af6eb5b 100644
--- a/packages/components/layer/panorama-coverage/index.vue
+++ b/packages/components/layer/panorama-coverage/index.vue
@@ -1,12 +1,10 @@
 <template></template>
 
 <script setup lang="ts">
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
-  const { ready } = useLifeCycle()
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   let panoramaCoverageLayer: BMapGL.PanoramaCoverageLayer
   defineEmits(['initd', 'unload'])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     panoramaCoverageLayer = new BMapGL.PanoramaCoverageLayer()
     map.addTileLayer(panoramaCoverageLayer)
     ready(map, panoramaCoverageLayer)
diff --git a/packages/components/map/index.vue b/packages/components/map/index.vue
index 388142fa..a1ddb1ea 100644
--- a/packages/components/map/index.vue
+++ b/packages/components/map/index.vue
@@ -1,26 +1,29 @@
 <template>
-  <div
-    class="baidu-map-container"
-    ref="mapContainer"
-    :style="{ width: width, height: height, background: props.loadingBgColor }"
-    style="position: relative; overflow: hidden"
-  >
-    <slot name="loading">
+  <div :id="instanceId">
+    <template v-if="shouldRender">
       <div
-        :style="{ color: props.loadingTextColor }"
-        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
+        class="baidu-map-container"
+        ref="mapContainer"
+        :style="{ width: width, height: height, background: props.loadingBgColor }"
+        style="position: relative; overflow: hidden"
       >
-        {{ !initd ? 'map loading...' : '' }}
+        <slot name="loading">
+          <div
+            :style="{ color: props.loadingTextColor }"
+            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
+          >
+            {{ !initd ? 'map loading...' : '' }}
+          </div>
+        </slot>
       </div>
-    </slot>
+      <slot></slot>
+    </template>
   </div>
-
-  <slot></slot>
 </template>
 
 <script setup lang="ts">
-  import { watch, onMounted, provide, nextTick, getCurrentInstance, ref, computed, onBeforeUnmount } from 'vue'
-  import useLifeCycle from '../../hooks/useLifeCycle'
+  import { watch, onMounted, provide, getCurrentInstance, ref, computed, onUnmounted } from 'vue'
+  import usePubSub from '../../hooks/usePubSub'
   import getScriptAsync from '../../utils/getScriptAsync'
   import { initPlugins, PluginsSourceLink, UserPlugins } from '../../utils/pluginLoader'
   import {
@@ -29,10 +32,12 @@
     error,
     isString,
     callWhenDifferentValue,
-    isClient,
     warn,
     type MapType,
-    type Point
+    type Point,
+    nanoid,
+    getInitEventKey,
+    isClient
   } from '../../utils'
   export interface MapDisplayOptions {
     /**
@@ -237,13 +242,6 @@
     onTouchend?: Callback
     onLongpress?: Callback
   }
-  const mapContainer = ref<HTMLDivElement | null>()
-  let map: BMapGL.Map | null = null
-  // 是否初始化
-  let initd = ref<boolean>(false)
-  // 地图初始化的发布
-  const { ready } = useLifeCycle()
-  const { uid, proxy } = getCurrentInstance()!
   const props = withDefaults(defineProps<MapProps>(), {
     width: '100%',
     height: '550px',
@@ -271,8 +269,18 @@
     enablePinchToZoom: true,
     enableAutoResize: true
   })
+
+  const mapContainer = ref<HTMLDivElement | null>()
+  let map: BMapGL.Map | null = null
+  // 是否初始化
+  let initd = ref<boolean>(false)
+  const instance = getCurrentInstance()
+  const instanceId = nanoid(8)
+  // 地图初始化的发布
+  const { emit } = usePubSub()
   const width = computed(() => (isString(props.width) ? props.width : `${props.width}px`))
   const height = computed(() => (isString(props.height) ? props.height : `${props.height}px`))
+  const shouldRender = isClient && !!instance
 
   const vueEmits = defineEmits([
     'initd',
@@ -312,24 +320,29 @@
     'touchend',
     'longpress'
   ])
-  const ak = props.ak || proxy!.$baiduMapAk
-  const plugins =
-    props.plugins && proxy!.$baiduMapPlugins
-      ? Object.assign(proxy!.$baiduMapPlugins, props.plugins)
-      : props.plugins || proxy!.$baiduMapPlugins
-
-  const pluginsSourceLink =
-    props.pluginsSourceLink && proxy!.$baiduMapPluginsSourceLink
-      ? Object.assign(proxy!.$baiduMapPluginsSourceLink, props.pluginsSourceLink)
-      : props.pluginsSourceLink || proxy!.$baiduMapPluginsSourceLink || {}
-  const scriptKey = `_initBMap_${ak}`
   // 初始化地图
   function init() {
-    if (!isClient) return
+    if (!shouldRender) return
+    const { proxy } = instance
+    const ak = props.ak || (proxy && proxy.$baiduMapAk)
+
+    if (!ak) __DEV__ && warn('BMap', 'ak is required')
+
+    const plugins =
+      props.plugins && proxy!.$baiduMapPlugins
+        ? Object.assign(proxy!.$baiduMapPlugins, props.plugins)
+        : props.plugins || proxy!.$baiduMapPlugins
+
+    const pluginsSourceLink =
+      props.pluginsSourceLink && proxy!.$baiduMapPluginsSourceLink
+        ? Object.assign(proxy!.$baiduMapPluginsSourceLink, props.pluginsSourceLink)
+        : props.pluginsSourceLink || proxy!.$baiduMapPluginsSourceLink || {}
+    const scriptKey = `_initBMap_${ak}`
     getScriptAsync({
       src: `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=${scriptKey}`,
       addCalToWindow: true,
-      key: scriptKey
+      key: scriptKey,
+      exportGetter: () => window.BMapGL
     })
       .then(() => {
         const {
@@ -361,10 +374,7 @@
         initCustomStyle()
         startWatchProps()
         bindEvents(props, vueEmits, map)
-        if (!initd.value) {
-          initd.value = true
-          nextTick(() => ready(map!, map))
-          if (!plugins) return
+        if (plugins) {
           initPlugins(plugins, pluginsSourceLink)
             .then(() => {
               vueEmits('pluginReady', map)
@@ -373,6 +383,14 @@
               error('BMap', 'plugins error: ' + err)
             })
         }
+        const event = {
+          map,
+          instance,
+          BMapGL: window.BMapGL
+        }
+        emit(getInitEventKey(instanceId), event)
+        vueEmits('initd', event)
+        initd.value = true
       })
       .catch((e) => error('BMap', e.message))
   }
@@ -532,17 +550,20 @@
     enableAutoResize ? map!.enableAutoResize() : map!.disableAutoResize()
   }
 
-  onMounted(() => {
-    if (!ak) __DEV__ && warn('BMap', 'ak is required')
-    else init()
-  })
+  onMounted(init)
   /**
    * 销毁地图，当使用 WebGL 渲染地图时，如果确认不再使用该地图实例，则需要
    * 调用本方法销毁 WebGL 上下文，否则频繁创建新地图实例会导致浏览器报：
    * too many WebGL context 的警告。
    */
-  onBeforeUnmount(() => {
-    map?.destroy()
+  onUnmounted(() => {
+    if (map) {
+      try {
+        map.destroy()
+      } catch (e: any) {
+        error('BMapGL SDK', e.message)
+      }
+    }
   })
   defineExpose({
     // 父组件获取map实例方法
@@ -555,7 +576,7 @@
     setDragging
   })
   provide('getMapInstance', () => map)
-  provide('parentUid', uid)
+  provide('parentComponentId', instanceId)
   provide('baseMapSetCenterAndZoom', (_center: { lng: number; lat: number }) => setCenterAndZoom(_center))
   provide('baseMapSetDragging', (enableDragging: boolean) => setDragging(enableDragging))
   provide('getBaseMapOptions', () => props)
diff --git a/packages/components/overlay/bezierCurve/index.vue b/packages/components/overlay/bezierCurve/index.vue
index 6693eec4..a0e66eba 100644
--- a/packages/components/overlay/bezierCurve/index.vue
+++ b/packages/components/overlay/bezierCurve/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { watch, provide } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import {
     bindEvents,
     Callback,
@@ -80,9 +79,8 @@
     'remove',
     'lineupdate'
   ])
-  const { ready } = useLifeCycle()
   let bezierCurve: BMapGL.BezierCurve
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       map.removeOverlay(bezierCurve)
     }
@@ -175,6 +173,6 @@
     bezierCurve.setStrokeStyle(style)
   }
   function setMassClear(enableMassClear: boolean): void {
-    enableMassClear ? bezierCurve!.enableMassClear() : bezierCurve!.disableMassClear()
+    enableMassClear ? bezierCurve.enableMassClear() : bezierCurve.disableMassClear()
   }
 </script>
diff --git a/packages/components/overlay/circle/index.vue b/packages/components/overlay/circle/index.vue
index 4629d7a2..10755a36 100644
--- a/packages/components/overlay/circle/index.vue
+++ b/packages/components/overlay/circle/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { provide, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, callWhenDifferentValue, StrokeStyle, type Point, warn } from '../../../utils'
   export interface CircleProps {
     /**
@@ -106,15 +105,16 @@
     'remove',
     'lineupdate'
   ])
-  const { ready } = useLifeCycle()
   let circle: BMapGL.Circle
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       map.removeOverlay(circle)
     }
     const init = () => {
-      if (!props.center) return __DEV__ && warn('BCircle', 'center props is required')
-      else if (!props.radius) return __DEV__ && warn('BCircle', 'radius props is required')
+      if (__DEV__) {
+        if (!props.center) return warn('BCircle', 'center props is required')
+        if (!props.radius) return warn('BCircle', 'radius props is required')
+      }
       const {
         center,
         radius,
@@ -145,6 +145,7 @@
         fillOpacity,
         fillColor
       })
+
       visible && map.addOverlay(circle)
       bindEvents(props, vueEmits, circle)
       ready(map, circle)
diff --git a/packages/components/overlay/ground-overlay/index.vue b/packages/components/overlay/ground-overlay/index.vue
index 6cbc136d..754999e6 100644
--- a/packages/components/overlay/ground-overlay/index.vue
+++ b/packages/components/overlay/ground-overlay/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { nextTick, provide, Ref, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, error, callWhenDifferentValue, type Point, warn } from '../../../utils'
   export type GroundOverlayUrl =
     | string
@@ -36,9 +35,8 @@
     visible: true
   })
   const vueEmits = defineEmits(['initd', 'unload', 'click', 'dblclick', 'mousemove', 'mouseover', 'mouseout'])
-  const { ready } = useLifeCycle()
   let groundOverlay: BMapGL.GroundOverlay
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const clear = () => {
       groundOverlay && map.removeOverlay(groundOverlay)
     }
diff --git a/packages/components/overlay/infowindow/index.vue b/packages/components/overlay/infowindow/index.vue
index 119c7a5a..08a88118 100644
--- a/packages/components/overlay/infowindow/index.vue
+++ b/packages/components/overlay/infowindow/index.vue
@@ -8,8 +8,7 @@
 
 <script setup lang="ts">
   import { ref, watch, onUpdated, nextTick, computed, provide, watchEffect } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, callWhenDifferentValue, type Point, warnOnce } from '../../../utils'
   export interface InfoWindowProps {
     /**
@@ -63,7 +62,6 @@
     set: (value) => vueEmits('update:show', value)
   })
   const infoWindowContainer = ref<HTMLElement>()
-  const { ready } = useLifeCycle()
   let infoWindow: BMapGL.InfoWindow
   let _map: BMapGL.Map
   watchEffect(() => {
@@ -71,7 +69,7 @@
       warnOnce('BInfoWindow', '`v-model` is deprecated, please use `v-model:show` instead.')
     }
   })
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     _map = map
     const clear = () => {
       infoWindow && map.removeOverlay(infoWindow)
diff --git a/packages/components/overlay/label/index.vue b/packages/components/overlay/label/index.vue
index c68a0e93..06e53719 100644
--- a/packages/components/overlay/label/index.vue
+++ b/packages/components/overlay/label/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { provide, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, isDef, callWhenDifferentValue, type Point, warn } from '../../../utils/index'
   export type LabelStyle = {
     [k in keyof CSSStyleDeclaration]?: any
@@ -75,9 +74,8 @@
     'remove',
     'rightclick'
   ])
-  const { ready } = useLifeCycle()
   let label: BMapGL.Label
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       label && map.removeOverlay(label)
     }
diff --git a/packages/components/overlay/map-mask/index.vue b/packages/components/overlay/map-mask/index.vue
index 24553f71..14e2bdb0 100644
--- a/packages/components/overlay/map-mask/index.vue
+++ b/packages/components/overlay/map-mask/index.vue
@@ -3,8 +3,7 @@
 </template>
 
 <script setup lang="ts">
-  import useLifeCycle from '../../../hooks/useLifeCycle'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import {
     warn,
     type Callback,
@@ -51,7 +50,6 @@
     onMouseover?: Callback
     onRightclick?: Callback
   }
-  const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<MapMaskProps>(), {
     showRegion: 'inside',
     isBuildingMask: false,
@@ -71,7 +69,7 @@
     'mouseover',
     'rightclick'
   ])
-  useBaseMapEffect((map) => {
+  const { ready } = useParentComponentEffect((map) => {
     const clear = () => {
       mapMask && map.removeOverlay(mapMask)
     }
diff --git a/packages/components/overlay/marker/index.vue b/packages/components/overlay/marker/index.vue
index 24a605d7..cc0775d7 100644
--- a/packages/components/overlay/marker/index.vue
+++ b/packages/components/overlay/marker/index.vue
@@ -4,9 +4,8 @@
 
 <script setup lang="ts">
   import { provide, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, isString, callWhenDifferentValue, isDef, Point, warn } from '../../../utils/index'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
   import { MarkerIcons, useDefaultMarkerIcons } from '../../../hooks/useDefaultMarkerIcons'
 
   export interface MarkerOffset {
@@ -125,10 +124,9 @@
     'dragend',
     'rightclick'
   ])
-  const { ready } = useLifeCycle()
   let marker: BMapGL.Marker
 
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       marker && map.removeOverlay(marker)
     }
diff --git a/packages/components/overlay/marker3d/index.vue b/packages/components/overlay/marker3d/index.vue
index dcc31b2b..5439c242 100644
--- a/packages/components/overlay/marker3d/index.vue
+++ b/packages/components/overlay/marker3d/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { provide, watch } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, callWhenDifferentValue, warn, type Point } from '../../../utils'
 
   export type Marker3dCustomIcon = {
@@ -94,10 +93,9 @@
     'remove',
     'rightclick'
   ])
-  const { ready } = useLifeCycle()
   let marker3d: BMapGL.Marker3D
 
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       map.removeOverlay(marker3d)
     }
diff --git a/packages/components/overlay/polygon/index.vue b/packages/components/overlay/polygon/index.vue
index 2435a1e3..a706ea59 100644
--- a/packages/components/overlay/polygon/index.vue
+++ b/packages/components/overlay/polygon/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { inject, watch, nextTick, provide } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import {
     bindEvents,
     Callback,
@@ -119,18 +118,18 @@
     'remove',
     'lineupdate'
   ])
-  const { ready } = useLifeCycle()
   const injectBaseMapSetCenterAndZoom = inject('baseMapSetCenterAndZoom') as (center: {
     lng: number
     lat: number
   }) => void
   let polygon: BMapGL.Polygon
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const cal = () => {
       polygon && map.removeOverlay(polygon)
     }
     const init = () => {
       if (!props.path) return __DEV__ && warn('BPolygon', 'path is required')
+      if (!props.path.length) return
       const {
         path,
         strokeColor,
@@ -163,9 +162,9 @@
         clip
       })
       visible && map.addOverlay(polygon)
+      visible && syncMapCenter()
       bindEvents(props, vueEmits, polygon)
       ready(map, polygon)
-      syncMapCenter()
       // 监听值变化, 初始为空时不会初始化, 不为空值时初始化
       watch(() => props.strokeColor, setStrokeColor)
       watch(() => props.strokeOpacity, setStrokeOpacity)
@@ -179,6 +178,7 @@
         () => props.visible,
         (n) => {
           map[n ? 'addOverlay' : 'removeOverlay'](polygon)
+          n && syncMapCenter()
         }
       )
     }
@@ -203,8 +203,11 @@
       if (props.autoCenter) {
         // 获取中心点
         try {
-          const center = polygon.getBounds()?.getCenter()
-          injectBaseMapSetCenterAndZoom(center)
+          const bounds = polygon.getBounds()
+          if (bounds) {
+            const center = bounds.getCenter()
+            center && injectBaseMapSetCenterAndZoom(center)
+          }
         } catch (e) {
           console.warn('BPolygon', 'auto set center error', e)
         }
diff --git a/packages/components/overlay/polyline/index.vue b/packages/components/overlay/polyline/index.vue
index 239c7a24..cc0d0a91 100644
--- a/packages/components/overlay/polyline/index.vue
+++ b/packages/components/overlay/polyline/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { watch, provide } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import {
     bindEvents,
     Callback,
@@ -104,9 +103,8 @@
     'remove',
     'lineupdate'
   ])
-  const { ready } = useLifeCycle()
   let polyline: BMapGL.Polyline
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const clear = () => {
       polyline && map.removeOverlay(polyline)
     }
diff --git a/packages/components/overlay/prism/index.vue b/packages/components/overlay/prism/index.vue
index 751cfebb..08e2937d 100644
--- a/packages/components/overlay/prism/index.vue
+++ b/packages/components/overlay/prism/index.vue
@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
   import { inject, watch, nextTick, provide } from 'vue'
-  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
-  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useParentComponentEffect from '../../../hooks/useParentComponentEffect'
   import { bindEvents, Callback, callWhenDifferentValue, warn, type Point, pathPointsToMapPoints } from '../../../utils'
   export interface PrismProps {
     /**
@@ -82,14 +81,13 @@
     'remove',
     'lineupdate'
   ])
-  const { ready } = useLifeCycle()
   const injectBaseMapSetCenterAndZoom = inject('baseMapSetCenterAndZoom') as (center: {
     lng: number
     lat: number
   }) => void
 
   let prism: BMapGL.Prism
-  useBaseMapEffect((map: BMapGL.Map) => {
+  const { ready } = useParentComponentEffect((map: BMapGL.Map) => {
     const clear = () => {
       prism && map.removeOverlay(prism)
     }
diff --git a/packages/hooks/useBaseMapEffect.ts b/packages/hooks/useBaseMapEffect.ts
deleted file mode 100644
index b137b260..00000000
--- a/packages/hooks/useBaseMapEffect.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { onUnmounted, inject, getCurrentInstance } from 'vue'
-import useBaseMapListener from './useBaseMapListener'
-import { warnOnce } from '../utils'
-
-function useBaseMapEffect(cal: (map: BMapGL.Map) => void | VoidFunction) {
-  const { on, off } = useBaseMapListener()
-  const getMapInstance = inject<(() => BMapGL.Map) | undefined>('getMapInstance', undefined)
-  const parentUid = inject<number | void>('parentUid', undefined)
-  const uid = parentUid || getCurrentInstance()?.uid
-  const map = getMapInstance && getMapInstance()
-  const eventKey = `__initd__${uid}`
-  let onUnmountedCallback: void | VoidFunction
-  const _cal = ({ map }: { map: BMapGL.Map }) => {
-    onUnmountedCallback = cal(map as BMapGL.Map)
-  }
-  if (typeof getMapInstance === 'undefined') {
-    warnOnce(getCurrentInstance()?.type.name || '', 'must be a child node of the Bmap component')
-  }
-  if (map) {
-    _cal({ map })
-  } else {
-    on(eventKey, _cal)
-  }
-  onUnmounted(() => {
-    off(eventKey, _cal)
-    onUnmountedCallback && onUnmountedCallback()
-  })
-}
-
-export default useBaseMapEffect
diff --git a/packages/hooks/useBaseMapListener.ts b/packages/hooks/useBaseMapListener.ts
deleted file mode 100644
index fc144856..00000000
--- a/packages/hooks/useBaseMapListener.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import mitt from 'mitt'
-
-type Events = {
-  initd: BMapGL.Map
-  unload: any
-  [prop: string]: any
-}
-
-const emitter = mitt<Events>()
-function useBaseMapListener() {
-  return {
-    emit: emitter.emit,
-    on: emitter.on,
-    off: emitter.off
-  }
-}
-
-export default useBaseMapListener
diff --git a/packages/hooks/useLifeCycle.ts b/packages/hooks/useLifeCycle.ts
deleted file mode 100644
index 87f714e2..00000000
--- a/packages/hooks/useLifeCycle.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { onUnmounted, getCurrentInstance } from 'vue'
-import useBaseMapListener from './useBaseMapListener'
-
-export default function useLifeCycle() {
-  const { uid, emit: VueEmit } = getCurrentInstance()!
-  const { on, emit, off } = useBaseMapListener()
-  const eventKey = `__initd__${uid}`
-  on(eventKey, (instance) => {
-    VueEmit('initd', instance)
-  })
-
-  onUnmounted(() => {
-    VueEmit('unload')
-    off(eventKey)
-  })
-  return {
-    ready: (map: BMapGL.Map, instance: any) => {
-      emit(eventKey, {
-        map,
-        instance,
-        BMapGL: window.BMapGL
-      })
-    }
-  }
-}
diff --git a/packages/hooks/useParentComponentEffect.ts b/packages/hooks/useParentComponentEffect.ts
new file mode 100644
index 00000000..1ed2619d
--- /dev/null
+++ b/packages/hooks/useParentComponentEffect.ts
@@ -0,0 +1,72 @@
+import { onBeforeUnmount, inject, getCurrentInstance, onMounted } from 'vue'
+import usePubSub from './usePubSub'
+import { error, noop, getInitEventKey } from '../utils'
+
+/**
+ * ### 监听父组件初始化，初始化完成调用 initdCallback 初始当前组件
+ * root map 组件需要加载 sdk，所以它必定是异步的,
+ * 子组件的初始化依赖于 root map 组件，当子组件初始化初始化root map 组件未初始化完成，就需要订阅他的初始化完成时间，这个事件触发了之后，再初始化当前组件,
+ * 这是一个典型的发布订阅模式
+ *
+ * - 比如下面的组件层级:
+ * ```text
+ * |___Map 发布
+ * |___|__Circle 订阅
+ * |___|___ContextMenu 订阅 / 发布
+ * |___|___|___ContextMenuItem 订阅
+ * ```
+ * @param initdCallback 初始当前组件
+ * @returns
+ */
+export default function useParentComponentEffect(initdCallback: (map: BMapGL.Map) => void | VoidFunction, emitId = '') {
+  const { on, off, emit } = usePubSub()
+  const comInstance = getCurrentInstance()
+  const { emit: vueEmit } = comInstance || { emit: noop }
+
+  const getMapInstance = inject<(() => BMapGL.Map) | undefined>('getMapInstance', undefined)
+  // get root BMap component uid
+  const parentComponentId = inject<string | void>('parentComponentId', undefined)
+  const uid = typeof parentComponentId !== 'undefined' ? parentComponentId : emitId
+
+  if (typeof getMapInstance === 'undefined') {
+    __DEV__ && error((comInstance && comInstance.type.name) || '', 'must be a child node of the Bmap component')
+    return { ready: noop }
+  }
+
+  const map = getMapInstance()
+  const eventKey = getInitEventKey(uid)
+  let clearEffect: void | VoidFunction
+  const initCallbackProxy = (event: { map: BMapGL.Map }) => {
+    clearEffect = initdCallback(event.map as BMapGL.Map)
+  }
+
+  onMounted(() => {
+    if (map) {
+      initCallbackProxy({ map })
+    } else {
+      on(eventKey, initCallbackProxy)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    try {
+      clearEffect && clearEffect()
+    } catch (e: any) {
+      error('BMapGL SDK', e.message)
+    }
+    vueEmit('unload')
+    off(eventKey, initCallbackProxy)
+  })
+
+  return {
+    ready: (map: BMapGL.Map, instance: any) => {
+      const event = {
+        map,
+        instance,
+        BMapGL: window.BMapGL
+      }
+      vueEmit('initd', event)
+      emitId && emit(eventKey, event)
+    }
+  }
+}
diff --git a/packages/hooks/usePubSub.ts b/packages/hooks/usePubSub.ts
new file mode 100644
index 00000000..bc4a72fa
--- /dev/null
+++ b/packages/hooks/usePubSub.ts
@@ -0,0 +1,14 @@
+import mitt from 'mitt'
+
+type Events = {
+  initd: BMapGL.Map
+  unload: any
+  [prop: string]: any
+}
+
+const mittInstance = mitt<Events>()
+function usePubSub() {
+  return mittInstance
+}
+
+export default usePubSub
diff --git a/packages/utils/getScriptAsync.ts b/packages/utils/getScriptAsync.ts
index 7a9bd5c4..5b861887 100644
--- a/packages/utils/getScriptAsync.ts
+++ b/packages/utils/getScriptAsync.ts
@@ -1,16 +1,20 @@
+import { noop } from './helper'
+
 export interface Options {
   key: string
   src: string
   addCalToWindow: boolean
+  exportGetter?: () => any | undefined
 }
 
 export const BMapScriptLoaderWrapper: Record<string, Promise<any>> = {}
-function getScriptAsync({ key, src, addCalToWindow }: Options): Promise<any> {
+function getScriptAsync({ key, src, addCalToWindow, exportGetter = noop }: Options): Promise<any> {
+  const exported: any = exportGetter()
   if (!BMapScriptLoaderWrapper[key]) {
     BMapScriptLoaderWrapper[key] = new Promise<void>((resolve, reject) => {
       const script: HTMLScriptElement = document.createElement('script')
       const cal = () => {
-        resolve()
+        resolve(exportGetter())
         window.document.body.removeChild(script)
       }
       if (addCalToWindow) {
@@ -29,6 +33,8 @@ function getScriptAsync({ key, src, addCalToWindow }: Options): Promise<any> {
       script.onerror = reject
       document.body.appendChild(script)
     })
+  } else if (exported !== undefined) {
+    return Promise.resolve(exported)
   }
   return BMapScriptLoaderWrapper[key]
 }
diff --git a/packages/utils/helper.ts b/packages/utils/helper.ts
index 50941c02..e3d367e4 100644
--- a/packages/utils/helper.ts
+++ b/packages/utils/helper.ts
@@ -8,3 +8,24 @@ export function callWhenDifferentValue<T>(cal: (v: T) => void): (nv: T, ov: T) =
     if (nv === ov || (nv !== ov && JSON.stringify(nv) !== JSON.stringify(ov))) cal(nv)
   }
 }
+
+export const notNullish = <T = any>(val?: T | null | undefined): val is T => val != null
+export const assert = (condition: boolean, ...infos: any[]) => {
+  if (!condition) console.warn(...infos)
+}
+const toString = Object.prototype.toString
+export const isObject = (val: any): val is object => toString.call(val) === '[object Object]'
+export const now = () => Date.now()
+export const timestamp = () => +Date.now()
+export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const noop = () => {}
+export const rand = (min: number, max: number) => {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+export const hasOwn = <T extends object, K extends keyof T>(val: T, key: K): key is K =>
+  Object.prototype.hasOwnProperty.call(val, key)
+
+export const getInitEventKey = (id: string) => `__initd__${id}`
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 89b57094..984f45b1 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -6,3 +6,4 @@ export * from './is'
 export * from './pluginLoader'
 export * from './types'
 export * from './pathPointsToMapPoints'
+export * from './nanoid'
diff --git a/packages/utils/is.ts b/packages/utils/is.ts
index 44919208..e54e186c 100644
--- a/packages/utils/is.ts
+++ b/packages/utils/is.ts
@@ -1,33 +1,5 @@
 export const isClient = typeof window !== 'undefined'
 export const isDef = <T = any>(val?: T): val is T => typeof val !== 'undefined'
-export const notNullish = <T = any>(val?: T | null | undefined): val is T => val != null
-export const assert = (condition: boolean, ...infos: any[]) => {
-  if (!condition) console.warn(...infos)
-}
-const toString = Object.prototype.toString
-export const isObject = (val: any): val is object => toString.call(val) === '[object Object]'
-export const now = () => Date.now()
-export const timestamp = () => +Date.now()
-export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-export const noop = () => {}
-export const rand = (min: number, max: number) => {
-  min = Math.ceil(min)
-  max = Math.floor(max)
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-export const hasOwn = <T extends object, K extends keyof T>(val: T, key: K): key is K =>
-  Object.prototype.hasOwnProperty.call(val, key)
-
-export const isIOS = /*#__PURE__*/ getIsIOS()
-
-function getIsIOS() {
-  return (
-    isClient &&
-    /*#__PURE__*/ window?.navigator?.userAgent &&
-    /*#__PURE__*/ /iP(ad|hone|od)/.test(/*#__PURE__*/ window.navigator.userAgent)
-  )
-}
 /**
  *
  * @param value 判断是否是字符串的值
diff --git a/packages/utils/nanoid.ts b/packages/utils/nanoid.ts
new file mode 100644
index 00000000..5cfb4730
--- /dev/null
+++ b/packages/utils/nanoid.ts
@@ -0,0 +1,12 @@
+const urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
+
+export function nanoid(size = 21) {
+  let id = ''
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  let i = size
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  }
+  return id
+}
diff --git a/packages/utils/pathPointsToMapPoints.ts b/packages/utils/pathPointsToMapPoints.ts
index 8797e097..712e97de 100644
--- a/packages/utils/pathPointsToMapPoints.ts
+++ b/packages/utils/pathPointsToMapPoints.ts
@@ -1,5 +1,8 @@
 import { type Point } from './types'
 
+/**
+ * 点对象转地图点实例
+ */
 export function pathPointsToMapPoints(pathPoints: Point[]) {
   return pathPoints.map(({ lng, lat }) => new BMapGL.Point(lng, lat))
 }