博客

地图消失了！

最近项目突然发现了一个奇怪的问题，当且到别的页面之后停留一会（20min+），首页的Echarts地图就会消失掉，而且还不一定复现，好不容易复现了一次，查看元素发现地图的容器、svg元素的高度都变成了0

经过多次测试发现只要切换到别的页面后改变一下浏览器窗口大小，再切回首页，地图就消失了

为什么高度没了？

首先看一下Echarts官网的示例

原因很明显了，我并没有给地图元素设定宽高

解决方法

固定宽高

一种方法是直接给地图容器加上固定的高度和宽度（不能使用百分比）

<div ref="map" class="map" style="width: 200px; height: 200px;"></div>

但是如果地图要随着窗口大小变化而变化，就不能这样写死了，要用下面这种办法：

不定宽高

在地图容器外面再套一层div，将它的宽高设置成100%，这样它的宽高就会随着视口变化而变化，然后通过js获取它的宽高赋值给地图容器的宽高，这样地图也就能动态变化了。

• 为什么不直接给地图容器的宽高使用百分比呢？直接给它使用百分比会导致高度为0，所以必须得是一个具体的数值。

• 外面的div也是百分比，如何获取它的具体宽高？通过
  
window.getComputedStyle

  这个方法获取，它会返回计算之后的宽高。

  
Window.getComputedStyle()

  方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

  关于这个属性可以查看
  
  MDN的介绍
  

HTML结构：

我的项目是基于Vue的，这里用的ref，后面获取时直接通过

this.map

获取DOM

<div class="map_box" ref="mapBox">
  <div ref="map" class="map"></div>
</div>

方法

//获取mapBox宽高并赋值给map
mapBoxResize(mapBox: HTMLDivElement, map: HTMLDivElement) {
    function getStyle(el: HTMLDivElement) {
        return window.getComputedStyle(el)
    }
    const wi = getStyle(mapBox).width
    const hi = getStyle(mapBox).height
    map.style.width = wi
    map.style.height = hi
}

在地图首次渲染时，我们需要调用上面这个函数，初始化地图容器的宽高

并且在resize事件和actived钩子中（地图组件使用keepAlive包裹），调用上面的函数设置地图容器宽高，但是光改变map容器的宽高是不够的，还需要调用地图实例的

resize

方法

// 地图重新渲染函数，重新渲染分为两步：重新设定map容器（不是mapBox，是map）的宽高、调用map实例resize方法
mapResize() {
    if (this.mapBox && this.map) {
        this.mapBoxResize(this.mapBox, this.map)
    }
    if (this.chart.resize) {
        this.chart.resize()
    }
}
activated() {
    this.mapResize()
}
mounted() {
    addEventListener('resize', this.mapResize)
}

至此，地图就不会消失了。