关于Echarts和离线谷歌地图窗口显示不全的问题及解决方案

今日一个工作中的大数据分析平台项目中，接入了离线谷歌卫星地图和诸多Echarts。但是初次涉入数据分析平台，不可避免会碰到很多问题。最近一个特别头疼的问题就是出现白边或显示不全的问题。通过拖拽浏览器，使得浏览器重新获取可视宽高时，Echarts可以实现理想的效果，但是离线地图又出现白边问题产生的原因大致分为：

1）Echarts图表所在祖辈Div隐藏后显示，发现所在的Echarts的canvas取了一个极小的宽高，即使通过浏览器改变其宽高。毫无见效。下图所示：

 

 

2）离线谷歌地图所在div宽度变化时，出现白边问题，如下图：

 

3）离线谷歌地图隐藏后显示，出现白边问题，如下图：

问题分析：进过一番尝试，问题出现的原因是：由于改变父级div没有获取到div的高宽而导致初始化失败；此时，有两种方案可以解决问题，其一：点击后获取实际div宽高，重新计算（多次尝试，建议自适应不采用）；

<button type="button" class="btn btn-success" id