记一次在vue框架下的openlayers调试bug过程
记一次在vue框架下的openlayers调试bug过程
今天遇到了一个bug，在vue框架下初始化（mounted() {}）加载地图模块，发现地图不会立刻出现，只有当改变浏览器的大小时，地图才会出现。
调试了一整天，地图画布（canvas）的大小始终显示为0 ，如下图：
对比正常的画布大小：
Canvas的height和width的值均为100%
我们应该明白，100%是相对于父节点宽高的100%，所以100%其实是相对大小值，继续向上查看canvas的父节点，发现canvas的父节点的height和width的值也均为100%
这就有点意思了，那我们继续向上查看父节点
这个locationRoute_Map的div其实是map容器，而之前的canvas和io-viewport则是ol自动生成的组件，所以canvas和io-viewport的height和width属性是ol生成的，意思是充满整个容器空间，而在初始化的时候，我只给locationRoute_Map定义了height却没有width，
这就导致了初始化的时候，由于vue的渲染机制，其实地图容器locationRoute_Map是没有渲染width的，根据这个容器生成的canvas和io-viewport中width的值均为0，所以导致显示不出来map。而在改变浏览器的大小后，页面重新渲染了一下，所以，canvas和io-viewport有了width，所以才会出现地图。
好了，既然知道原因了，就好弄了，有两种方法修复这个问题，
- 第一个方法是最治本的方法，就是在写locationRoute_Map容器的时候，给他明确的width和height，就可以了
- 第二种方法治标不治本，但是也挺有意思，所有在这里记述一下。
在初始化地图的时候，加上一句
其中，map.setsize()这个函数是给canvas设置宽和高的函数
map.getViewport()返回的是上文说的ol-viewport这个div，即canvas的父节点
代码的意思是，使用延迟函数，给map的canvas重新设置宽和高，使其重新渲染
重新加载后，地图就可以初始化了
转载自：https://blog.csdn.net/qq_36061233/article/details/84886284
