115.Vue3 + OpenLayers：弹窗中的地图不显示？一招解决！

一、前言

在使用 Vue3 + OpenLayers 开发地图相关功能时，很多同学都遇到过这样一个让人头疼的问题：

点击按钮打开弹窗，地图区域出现了，但地图内容却是一片空白。

这个问题其实并不是 OpenLayers 本身的 bug，而是由于它在初始化地图时没有拿到正确的容器大小。那么在 Vue3 中，我们该如何优雅地解决这个问题呢？今天就带大家一探究竟！

二、问题复现

在项目中我们会经常在弹窗或遮罩中放置一个地图，比如下图这种需求：

假设你写了如下代码：

<el-button @click="openDialog">打开弹窗</el-button> 
<div class="dialog" v-if="visible"> 
    <div id="map" class="map-container"></div> 
</div>

并在 mounted 生命周期中初始化 OpenLayers 地图：