#前端##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()
          })
        }
    }
  },

补充

1.利用setTimeout 延迟处理

做延迟加载处理，使用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.利用 nextTick

等 到 dom 更新后调用

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

3.额外

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

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

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