125：解决vue+openlayers弹窗中的地图不显示的问题 （ 代码示例 ）

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 125个示例

一、示例效果图

二、示例简介

本示例的目的是解决在vue+openlayers项目中弹窗里的地图不显示的问题。在vue+openlayer的开发的过程中，曾发现了这样的一个问题：点击button，弹出窗口，在弹窗内是加载了openlayers地图的代码，发现显示地图是一片空白，然后Ctrl+Shift+i ，进入调式窗口后，将弹窗的大小改变了，这时候才能正常加载出来地图。为了改变这种状态，采用updateSize()函数来强行挂在地图。