V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
huoguo32
V2EX  ›  问与答

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

  •  
  •   huoguo32 · 2023-03-16 14:43:07 +08:00 · 651 次点击
    这是一个创建于 379 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    7 条回复    2023-09-03 16:08:35 +08:00
    op351
        1
    op351  
       2023-03-16 15:42:10 +08:00
    你说的打点是指用户点击地图上的某一个点吗?
    Chad0000
        2
    Chad0000  
       2023-03-16 15:44:24 +08:00
    你看你要使用 Angular 直接依赖注入,全局或基于页面 /组件共享实例都行。
    huoguo32
        3
    huoguo32  
    OP
       2023-03-16 15:55:58 +08:00
    嗯嗯是的,父组件生成地图实例,子组件提供个 div,让用户选择是打点,还是画线,然后通过 api 把点 /线显示到地图上,但根据高德的 api,这些方法里都需要用到父组件生成的 map,所以就想怎么把 map 传过去

    @op351
    huoguo32
        4
    huoguo32  
    OP
       2023-03-16 15:56:33 +08:00
    @Chad0000 谢谢大佬,不过 Angular 不是个框架吗?我是 vue3...
    op351
        5
    op351  
       2023-03-16 16:08:23 +08:00
    打点还是画线是个下拉框是吧?
    那直接把 option 的 click 事件结果传回父组件不就行了。
    不用把地图传过来再传回去。
    huoguo32
        6
    huoguo32  
    OP
       2023-03-16 16:10:18 +08:00
    @op351 啊大佬说的确实有道理啊,是我当局者迷了,点醒我了,我在这折腾半天传 map 本来就搞错重点了啊
    daiguamm
        7
    daiguamm  
       208 天前
    OP 有实现代码吗?我想参考参考,我也是一直纠结在修改存储 map 实例上,一直报错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3276 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:46 · PVG 18:46 · LAX 03:46 · JFK 06:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.