百度、高德地圖 在 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，不為空時不操作。