高德地图第一次打开时热力图不显示，切换到别的页面再切换回来显示正常

问题描述

执行顺序

1. 加载地图
2. 加载热力图插件
3. 加载热力图数据

     this.loadAMap();
     this.initHeatMapLiveApp();


	// 加载地图
    loadAMap () {
    
    
      this.aMap = new AMap.Map("performance", {
    
    
        animateEnable: true,
        resizeEnable: true,
        center: this.center,
        zoom: 13,
        mapStyle: "amap://styles/darkblue"
      });
      this.loadHeatPlugin();
    },
    // 加载热力图插件
    loadHeatPlugin () {
    
    
      this.aMap.plugin(["AMap.Heatmap"], () => {
    
    
        this.heatMap = new AMap.Heatmap(this.aMap, {
    
    
          radius: 30,
          opacity: [0, 0.7],
          gradient: {
    
    
            0: "blue",
            0.25: "rgb(117,211,248)",
            0.5: "rgb(0, 255, 0)",
            0.75: "#ffea00",
            1.0: "red"
          }
        });
      });
    },
   // 加载热力图数据
    initHeatMapLiveApp () {
    
    
      ...
      this.heatMap.setDataSet({
    
     data: this.heatdata});
    },

问题原因

加载热力图插件plugin是异步的，第一次打开，请求完数据执行this.heatMap.setDataSet({ data: this.heatdata});时，热力图 this.heatdata还没有加载好。

解决方案

this.loadAMap();

// 加载热力图插件
loadHeatPlugin () {
    
    
      this.aMap.plugin(["AMap.Heatmap"], () => {
    
    
        this.heatMap = new AMap.Heatmap(this.aMap, {
    
    
          radius: 30,
          opacity: [0, 0.7],
          gradient: {
    
    
            0: "blue",
            0.25: "rgb(117,211,248)",
            0.5: "rgb(0, 255, 0)",
            0.75: "#ffea00",
            1.0: "red"
          }
        });
        //加载完插件再请求数据
        this.initHeatMapLiveApp();
      });
    },