Vue百度地图center偏移问题

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

在搜索了问题之后,找到了原因:

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

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

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

HTML


   

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。

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

你可能感兴趣的:(Vue百度地图center偏移问题)