这是一个创建于 642 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近的项目需要用到高德地图,在浏览器上展示一个高德地图,然后做各种打点,跳转中心点的操作.我遇到的最大的问题是,我希望可以在一个父组件 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
op351 2023-03-16 15:42:10 +08:00
你说的打点是指用户点击地图上的某一个点吗？
|
 |
2
Chad0000 2023-03-16 15:44:24 +08:00
你看你要使用 Angular 直接依赖注入，全局或基于页面 /组件共享实例都行。
|
 |
3
huoguo32 OP 嗯嗯是的,父组件生成地图实例,子组件提供个 div,让用户选择是打点,还是画线,然后通过 api 把点 /线显示到地图上,但根据高德的 api,这些方法里都需要用到父组件生成的 map,所以就想怎么把 map 传过去
@op351 |
|
5
op351 2023-03-16 16:08:23 +08:00
打点还是画线是个下拉框是吧？
那直接把 option 的 click 事件结果传回父组件不就行了。 不用把地图传过来再传回去。 |
 |
7
daiguamm 2023-09-03 16:08:35 +08:00
OP 有实现代码吗？我想参考参考，我也是一直纠结在修改存储 map 实例上，一直报错
|
Select Language