百度、高德地图 在 Element Dialog 中显示问题

前言

今天在工作中，需要使用地图，但是地图始终不显示，也没有报错。在一番调试、验证找出了问题。

正文

一开始的时候是按照上一篇文章来的，等一切都就绪后，运行，结果悲剧了，没有地图啊！（这中间有一个小问题：地图容器的高需要设置数值，当是 100% 时有可能计算的结果为0，导致不显示）。

反复测试，更改 key、结构调整等都不行。最后重新写一个测试的页面看怎么样，新写了一个页面后，运行正常的。

那就对比了，发现有些不一样：

1、new Map 的时候 Map 是可用的，这说明引入 API 没有问题；

2、测试页面地图能显示，说明环境什么的都没有问题；

3、查看了渲染的 HTML ，看到没有渲染出容器下的地图控件；

这时能对比的区别是，源页面是用 Element Dialog，测试页面是正常的。那就查一查 Dialog 渲染的问题。

发现 Element Dialog body 是懒加载的，在 mounted 中其实 body 中的元素还没有挂载完成，所以地图初始化有问题。

看网上有一些解决方案的，可以参考这里。

我选择的是在 updated 中初始化地图：

  updated() {
    console.log('更新......')
    if (!this.sluicePumpMap) {
      console.log('地图更新......')
      this.sluicePumpMap = new Map(this.mapContainer)
    }
  },

当地图为空时 new，不为空时不操作。