请问高德地图生成 map 实例,在 vue3 中应该如何传递给各个子组件呢?

最近的项目需要用到高德地图,在浏览器上展示一个高德地图,然后做各种打点,跳转中心点的操作.我遇到的最大的问题是,我希望可以在一个父组件 map.vue 上,创建一个 map 实例.然后在通过一个个小的子组件实现打点 /跳转之类的功能,

//父组件创建 map
const mapInstance = shallowRef(null)
AMapLoader.load({
  }).then((AMap) => {
    let map = new AMap.Map('container', {
    })
    mapInstance.value = map
  })

但我不知道我在父组件 map.vue 通过 AMapLoader.load 生成的这个 map 应该怎么传递给我的子组件呢? 我试过以下三种形式: 1.父传子,子再传给孙,但是太麻烦,需要一层层传下去,而且我发现我想通过数据生成点位时,发现地图实例没更新,需要刷一下才出现 2.pinia,pinia 折腾了好久,读取不到 map 的值.chatGPT 告诉我: "Pinia 的状态存储和 Vue.js 的响应式系统密切相关，因此，您可以将任何可以通过 Vue.js 响应式系统进行观察和更改的对象存储在 Pinia store 中，例如普通的 JavaScript 对象、数组、函数等。然而，高德地图生成的地图实例并不是一个简单的 JavaScript 对象，它是一个包含大量底层逻辑和方法的复杂对象。尽管它可以通过 JavaScript 的 typeof 运算符返回 object ，但它并不是一个可以直接通过 Vue.js 响应式系统进行观察和更改的对象，因此不能直接存储在 Pinia store 中。" 所以放弃 3.通过 inject/provide 方式,同理,发现

const mapInstance = shallowRef(null)
 provide('map', mapInstance)

inject 获取到的永远是 undifined

我不清楚是我哪里对这个 map 实例的理解出了问题,还请各位前端大佬指点一二,让我有个处理的方向