高德图层加载有时出来有时不出来

<template>
  <div class="map_container">
    <!--map容器-->
    <div id="container" class="container"></div>

    <div id="search_box" class="search_box">

      <!--部门数据-->
      <el-col :span="4" :xs="24" class="ess">
        <el-input
          placeholder="输入关键字"
          v-model="filterText"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
          clearable
          size="samll"
        >
        </el-input>

        <el-switch
          v-model="switchValue"
          inactive-text="级联开关">
        </el-switch>
        <!--          <el-divider></el-divider>-->
        <el-tree
          :data="treedata"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :filter-node-method="filterNode"
          :check-strictly="!switchValue"
          :props="treeProps">
        </el-tree>
      </el-col>
      <el-col :span="3" :offset="1" :xs="24" class="ess">
        <el-select v-model="selectvalue" clearable placeholder="请选择">
          <el-option
            v-for="item in selectItems"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </el-col>
      <el-col :span="2" :offset="6" :xs="24" class="ess">
        <el-col>
          <el-button type="primary" icon="el-icon-edit">主要按钮</el-button>
        </el-col>
        <el-col>
          <el-button type="primary" icon="el-icon-edit">主要按钮</el-button>
        </el-col>
      </el-col>


    </div>
    <div class="pointInfo">
      <h4 class="h4">当前坐标:{{ point }}</h4>
    </div>
  </div>

</template>


<style>

.h4{
  margin-block-start: 0.5em;
  margin-block-end: 0em;
}

/*坐标样式*/
.pointInfo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 15rem;
  height: 2rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0rem 1.25rem;
}

.search_box {
  width: auto;
  padding: 0.75rem;
  position: relative;
  z-index: 1
}

.ess {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  background-color: #f4f4f5;
  border-radius: 5px;
  padding: 10px;
}

/*地图样式*/
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}

</style>


<!--<script src="//a.amap.com/Loca/static/manual/example/script/demo.js"></script>-->
<!--<script src="//a.amap.com/Loca/static/mock/banks.js"></script>-->
<script>
import AMap from "AMap";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      map: null,
      selectvalue: "",
      point: "xx",
      switchValue: false,
      filterText: '',
      treedata: [{
        id: 1,
        label: '一变电站 1',
        children: [{
          id: 4,
          label: '二变电站 1-1',
          children: [{
            id: 9,
            label: '三变电站 1-1-1'
          }, {
            id: 10,
            label: '三变电站 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一变电站 2',
        children: [{
          id: 5,
          label: '二变电站 2-1'
        }, {
          id: 6,
          label: '二变电站 2-2'
        }]
      }, {
        id: 3,
        label: '一变电站 3',
        children: [{
          id: 7,
          label: '二变电站 3-1'
        }, {
          id: 8,
          label: '二变电站 3-2'
        }]
      }],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      // 下拉属性
      selectItems: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],

      bankData: [
        {
          "id": "B000A83IY9",
          "typecode": "160139",
          "address": "南湖东园201号楼",
          "location": [
            "116.464087",
            "40.000887"
          ],
          "name": "中国邮政储蓄银行(南湖东园营业所)",
          "tel": ''
        },
        {
          "id": "B000A83EMQ",
          "typecode": "160139",
          "address": "望京西园1区120号楼",
          "location": [
            "116.473634",
            "40.004443"
          ],
          "name": "中国邮政储蓄银行(望京支行)",
          "tel": ''
        },
        {
          "id": "B0FFG73C69",
          "typecode": "160139",
          "address": "大山子北里35号楼",
          "location": [
            "116.487853",
            "39.984170"
          ],
          "name": "中国邮政储蓄银行(大山子北里营业所)",
          "tel": "010-64330251;010-64373873"
        },
        {
          "id": "B0FFFEINC3",
          "typecode": "160139",
          "address": "酒仙桥路13号",
          "location": [
            "116.489345",
            "39.979480"
          ],
          "name": "中国邮政储蓄银行(大山子支行)",
          "tel": ''
        }
      ],
      iconLayer: null
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.initMap();
    this.showMarker();
  },
  methods: {
    //初始化地图

    initMap() {
      this.map = new AMap.Map('container', {
        pitch: 66,//
        center: [116.473168, 39.993015],
        zoom: 15,//放大倍率
        mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
        viewMode: '2D'
      });
      //悬浮获取地图坐标  【mousemove】
      this.map.on('mousemove', function (e) {
        this.point = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        // console.log(this.point)
      });
    },
    //显示图层
    //todo  图层获取有问题
    showMarker() {
      console.log("加载图层开始")
      this.iconLayer = new Loca.IconLayer({
        map: this.map
      });
      this.iconLayer.setData(this.bankData, {
        lnglat: 'location'
      });
      var bankMap = {
        160104: '中国银行',
        160139: '邮政银行',
        160105: '工商银行',
        160106: '其他银行',
        160108: '交通银行',
        160107: '农业银行',
        160109: '招商银行',
        160111: '光大银行',
      };
      this.iconLayer.setOptions({
        source: function (res) {
          var value = res.value;
          var typecode = value.typecode;
          // 这里需要写上 http 协议，不能忽略 图片
          var src = 'https://a.amap.com/Loca/static/manual/banks/%E9%82%AE%E6%94%BF%E9%93%B6%E8%A1%8C.png';
          console.log("加载图片")

          // var src = 'http://127.0.0.1/static/img/1.png';
          return src;

        },
        style: {
          size: 30
        }
      });
      this.iconLayer.render();
      console.log("加载图层结束")
    },
    //树过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
};
</script>
<style lang="scss"></style>