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

  • Z时代
  • 2024-03-15
  • 分类：IT

最近的项目需要用到高德地图,在浏览器上展示一个高德地图,然后做各种打点,跳转中心点的操作.我遇到的最大的问题是,我希望可以在一个父组件 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 实例的理解出了问题,还请各位前端大佬指点一二,让我有个处理的方向

回答：

  1. 最简单就是全局变量了
  2. bus
  3. provide、inject

测试地址：https://codepen.io/linong/pen/yLxRWJB?editors=1010

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

传递给各个组件，这其实就是组件间通信的方式：

  • 挂载 window 上
  • props（各个子组件较麻烦）
  • provide、inject
  • pinia 全局状态
  • mitt 发布订阅模式
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

回答：

最近遇到了相同问题了，provide可以传递函数

父组件：

provide() {
  return {
    getMap: () => this.map,
  };
}

子组件获取地图实例

const getMap: any = inject('getMap');
const map = getMap();

以上是 请问高德地图生成 map 实例,在 vue3 中应该如何传递给各个子组件呢? 的全部内容， 来源链接： utcz.com/p/933878.html

回到顶部