Ionic使用模态框重复打开高德地图报错

冰点灬纽扣

已于 2022-06-28 09:27:02 修改

阅读量1.8k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-06-22 11:54:43 首次发布

本文链接：https://blog.youkuaiyun.com/m0_37905772/article/details/125406331

版权

在Ionic6（ionic-vue）项目中，使用高德地图并用模态框显示时，遇到一个问题：当模态框关闭后再打开，会出现'Uncaught Error: Invalid Object: LngLat(NaN, NaN)'的错误。虽然具体原因未知，但可能是由于ion-modal的销毁机制导致。为解决这个问题，作者采用了自定义模态框并通过teleport挂载到body的方式，绕过错误。CustomAmap组件用于集成高德地图，其详细配置可参考官方文档。" 111751328,10296441,Vue公共JS封装：元素距离与滚动控制,"['前端开发', 'Vue', 'JavaScript', 'DOM操作', '封装']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

Ionic6(ionic-vue)中使用高德地图，模态框中重复打开报错

问题描述

Ionic使用模态框重复打开高德地图报错Uncaught Error: Invalid Object: LngLat(NaN, NaN)

初次使用ioc-modal加载没有问题，关闭后再次打开就会出现以下错误Uncaught Error: Invalid Object: LngLat(NaN, NaN)
请添加图片描述

Uncaught Error: Invalid Object: LngLat(NaN, NaN)
    at new pD (maps?callback=
...

原因分析：

具体原因我没分析出来，如果有哪位大神知道请指出，我估计是ion-modal组件销毁机制造成的，反正我没找到具体原因，求大神解惑

解决方案：

自定义模态框，并通过teleport挂载到body

<teleport to="body">
      <div
        v-if="isOpAddModal"
        style="
          width: 100%;
          height: 100%;

最低0.47元/天解锁文章