最近在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。
本人前端新手，该方案应该不是最优解。
