avue-crud弹窗全屏时里面的天地图显示不全

前端菜鸟不会飞

已于 2023-11-03 11:52:49 修改

阅读量172

点赞数

文章标签： javascript 前端 vue.js

于 2023-11-03 11:51:56 首次发布

本文链接：https://blog.csdn.net/qq_46491723/article/details/134199511

版权

现象：

解决思路：监听全屏按钮的点击事件，调整地图大小

// 解决： 弹窗全屏时，下方地图不能铺满
setTimeout(() => {
    let viewMap = this.$refs.viewMap;
    var button = document.getElementsByClassName("el-icon-full-screen");
    button[0].addEventListener("click", function () {
        if (viewMap) viewMap.reOnloadMapSize();
    });
}, 500);

reOnloadMapSize() {
    let that = this
    setTimeout(()=>{
        //map.checkResize() 方法用于在地图容器大小发生变化时调整地图的大小以适应新的容器大小。
        that.map.checkResize();
    }, 1000);
}

参考文档：天地图使用踩坑选项卡里面装地图样式问题显示不全_上班不迟到的博客-CSDN博客