有点啰嗦,可以直接跳到最后看解决方法。
问题排查过程
原因起始于一个新需求:在编辑列表信息时需要修改设备位置。
按照文档一番操作,发现完美需求解决了。后续测试的时候就发现浏览器报错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时给鼠标动作会有问题。
<divv-show="visible"class="el-dialog__wrapper"@click.self="handleWrapperClick">用visibility解决问题:
<div :style="{ visibility: visibility }" class="el-dialog__wrapper" @click.self="handleWrapperClick">