vue 解决高德地图Uncaught Error: Invalid Object: Pixel(NaN, NaN)
有点啰嗦，可以直接跳到最后看解决方法。
问题排查过程
原因起始于一个新需求：在编辑列表信息时需要修改设备位置。
按照文档一番操作，发现完美需求解决了。后续测试的时候就发现浏览器报错Uncaught Error: Invalid Object: Pixel(NaN, NaN)，并且坐标不会回显在地图上。
第一步当然在网上寻找解决方法，给容器设置宽高。发现都解决不了问题。而且定位不到问题的具体原因。
最后，就只能给高德提交工单了，一通操作下来高德那边复现不了，于是只能提供一个可以复现问题的demo。写完demo发现也复现不了问题，后面发现打开地图弹窗，关闭弹窗，再滑动列表打开地图弹窗就会出现报错。
最终发现是因为display: none，造成的问题。
解决方法：
因为弹窗使用的是el-dialog，显示和隐藏用的是v-show=“visible”，最终只能重写一个弹窗用visibility属性替代v-show避免出现display: none。
v-show会导致增加display: none，地图在外部容器display: none时给鼠标动作会有问题。
<div
v-show="visible"
class="el-dialog__wrapper"
@click.self="handleWrapperClick">
用visibility解决问题：
<div
:style="{ visibility: visibility }"
class="el-dialog__wrapper"
@click.self="handleWrapperClick">
原文地址：https://blog.csdn.net/zwl5670/article/details/142853136
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！