Vue百度地图center偏移问题

最近在vue项目中用到了百度地图，UI是在tab切换到“地图”时显示地图。但是遇到了地图显示时，设定的center偏移到了视图的左上角。

在搜索了问题之后，找到了原因：

因为最开始包含地图的DIV是隐藏的状态，所以该DIV的宽高都为0，故中心也是(0, 0)。所以当包含地图的DIV由隐藏变为显示状态时，中心会出现在左上角。

当然也告诉了解决办法：延迟加载。

但由于本人使用的是vue百度地图组件，代码跟网上的解决方式有所不同，所以就自己写了一份。

HTML

<el-tab-pane label="地图">
   <div v-if="!show" style="width: 100%;height: 500px" v-loading="!show"></div>
   <div>
       <baidu-map v-if="show" style="width: 100%;height: 500px"
                  :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
       </baidu-map>
    </div>
</el-tab-pane>

VUE

const debounce = (function() {
    let timer = 0;
    return function(func, delay) {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  })();

tabClick(tab) {
  if (tab.label === '地图') {
     debounce(() => {
       this.center.lng = 120.724958;
       this.center.lat = 30.758484;
       this.zoom = 15
       this.show = true;
     }, 800);
  }
},

tabClick是Tab组件切换时的点击事件。
至于为什么要用一个空的div来切换地图视图的div，主要是在过程中发现延迟加载的时候会导致地图视图黑屏。另为了美观，使用了v-loading。

本人前端新手，该方案应该不是最优解。