#前端##JavaScript WEB前端开发##程序员经验分享##api接口##程序员那些事##程序员#

一、问题

在引用天地图或者统计图的时候，接口的 响应速度 和 数据量 会影响到 图的加载；

二、图例

1）

2）

三、解决1.缘由

2023.11.21 zyysy系统 天地图加载异常；

2.处理方式

（1）思路：接口数据请求较慢，信息还未获取完天地图就加载出来了，导致 面对象 未渲染，部分地区空白，渲染异常；

解决方式：利用 setTimeout 延迟加载天地图；

结果： 可解决部分时候的加载异常问题，但是不稳定，一旦接口响应超过 设定的延迟时间还是会 加载异常。

getInfo(){    getPhoneCodInfoApi(data).then(res=>{                 //基地信息                if(res.data.chPommBase){                this.baseData=res.data.chPommBase           //基地信息                 this.polygon=res.data.chPommBase.polygon                this.longitude=res.data.chPommBase.longitude                this.latitude=res.data.chPommBase.latitude                 //等接口数据获取到了再去加载地图/统计图               setTimeout(() => {                 //加载地图                  this.getMapOnLoad()                  this.getMapInfo()               }, 2000);     })}

（2）思路：在（1）的基础上，不在依靠 setTimeout，改用 $nextTick ；

解决方式： 在dom更新后加载数据；

结果： 未解决

getInfo(){    getPhoneCodInfoApi(data).then(res=>{                 //基地信息                if(res.data.chPommBase){                this.baseData=res.data.chPommBase           //基地信息                 this.polygon=res.data.chPommBase.polygon                this.longitude=res.data.chPommBase.longitude                this.latitude=res.data.chPommBase.latitude                 //等接口数据获取到了再去加载地图/统计图              this.$nextTick(()=>{                 	//加载地图                  this.getMapOnLoad()                  this.getMapInfo()               });     })}

（3）思路：引用地图/统计图的时候都会给 div 绑定一个 id， 而这个容器正好 是被 <el-collapse-item>组件包裹， 在折叠组件未打开时是无法获得div 的 id 的，导致 地图加载异常。

解决方式： 判断 <el-collapse-item> 的折叠/开启 状态 ， 当开启时再调用 地图加载

结果： 成功解决

  <!-- <el-collapse-item> 绑定了 activeName 作为值 ， 当打开对应的折叠面板时 再 调用且需要 使用 $nextTick 等到 dom 更新再调用-->watch:{    activeName(val){        if(val=='2'||val==2){          this.$nextTick(()=>{              this.getMapOnLoad()              this.getMapInfo()          })        }    }  },

做延迟加载处理，使用setTimeout

弊端： 可解决部分时候的加载异常问题，但是不稳定，一旦接口响应超过 设定的延迟时间还是会 加载异常

getInfo(){    getPhoneCodInfoApi(data).then(res=>{                 //基地信息                if(res.data.chPommBase){                this.baseData=res.data.chPommBase           //基地信息                 this.polygon=res.data.chPommBase.polygon                this.longitude=res.data.chPommBase.longitude                this.latitude=res.data.chPommBase.latitude                 //等接口数据获取到了再去加载地图/统计图               setTimeout(() => {                 //加载地图                  this.getMapOnLoad()                  this.getMapInfo()               }, 2000);     })}

等 到 dom 更新后调用

 this.$nextTick(()=>{              this.getMapOnLoad()              this.getMapInfo()          })

引用地图/统计图的时候都会给 div 绑定一个 id

如果div 有 v-if 之类的条件 判断 ，且值为 假 则会渲染异常，因为找不到对应id 的div

<!-- 地图容器  --><div id="mapDiv"></div>