vue加载百度地图和热力图插件(只加载一次)

<template>
  <div style="height: 100%;width: 100%">
    <button @click="initHeatMap">显示热力图</button>
    <div id="bmap" style="height: 100%;width: 100%"></div>
  </div>
</template>

<script>
  const points = [
    {'lng': 116.418261, 'lat': 39.921984, 'count': 50},
    {'lng': 116.423332, 'lat': 39.916532, 'count': 51},
    {'lng': 116.419787, 'lat': 39.930658, 'count': 15},
    {'lng': 116.418455, 'lat': 39.920921, 'count': 40},
    {'lng': 116.418843, 'lat': 39.915516, 'count': 100},
    {'lng': 116.42546, 'lat': 39.918503, 'count': 6},
    {'lng': 116.423289, 'lat': 39.919989, 'count': 18},
    {'lng': 116.418162, 'lat': 39.915051, 'count': 80},
    {'lng': 116.422039, 'lat': 39.91782, 'count': 11},
    {'lng': 116.41387, 'lat': 39.917253, 'count': 7},
    {'lng': 116.41773, 'lat': 39.919426, 'count': 42},
    {'lng': 116.421107, 'lat': 39.916445, 'count': 4},
    {'lng': 116.417521, 'lat': 39.917943, 'count': 27},
    {'lng': 116.419812, 'lat': 39.920836, 'count': 23},
    {'lng': 116.420682, 'lat': 39.91463, 'count': 60},
    {'lng': 116.415424, 'lat': 39.924675, 'count': 8},
    {'lng': 116.419242, 'lat': 39.914509, 'count': 15},
    {'lng': 116.422766, 'lat': 39.921408, 'count': 25},
    {'lng': 116.421674, 'lat': 39.924396, 'count': 21},
    {'lng': 116.427268, 'lat': 39.92267, 'count': 1},
    {'lng': 116.417721, 'lat': 39.920034, 'count': 51},
    {'lng': 116.412456, 'lat': 39.92667, 'count': 7},
    {'lng': 116.420432, 'lat': 39.919114, 'count': 11},
    {'lng': 116.425013, 'lat': 39.921611, 'count': 35},
    {'lng': 116.418733, 'lat': 39.931037, 'count': 22},
    {'lng': 116.419336, 'lat': 39.931134, 'count': 4},
    {'lng': 116.413557, 'lat': 39.923254, 'count': 5},
    {'lng': 116.418367, 'lat': 39.92943, 'count': 3},
    {'lng': 116.424312, 'lat': 39.919621, 'count': 100},
    {'lng': 116.423874, 'lat': 39.919447, 'count': 87},
    {'lng': 116.424225, 'lat': 39.923091, 'count': 32},
    {'lng': 116.417801, 'lat': 39.921854, 'count': 44},
    {'lng': 116.417129, 'lat': 39.928227, 'count': 21},
    {'lng': 116.426426, 'lat': 39.922286, 'count': 80},
    {'lng': 116.421597, 'lat': 39.91948, 'count': 32},
    {'lng': 116.423895, 'lat': 39.920787, 'count': 26},
    {'lng': 116.423563, 'lat': 39.921197, 'count': 17},
    {'lng': 116.417982, 'lat': 39.922547, 'count': 17},
    {'lng': 116.426126, 'lat': 39.921938, 'count': 25},
    {'lng': 116.42326, 'lat': 39.915782, 'count': 100},
    {'lng': 116.419239, 'lat': 39.916759, 'count': 39},
    {'lng': 116.417185, 'lat': 39.929123, 'count': 11},
    {'lng': 116.417237, 'lat': 39.927518, 'count': 9},
    {'lng': 116.417784, 'lat': 39.915754, 'count': 47},
    {'lng': 116.420193, 'lat': 39.917061, 'count': 52},
    {'lng': 116.422735, 'lat': 39.915619, 'count': 100},
    {'lng': 116.418495, 'lat': 39.915958, 'count': 46},
    {'lng': 116.416292, 'lat': 39.931166, 'count': 9},
    {'lng': 116.419916, 'lat': 39.924055, 'count': 8},
    {'lng': 116.42189, 'lat': 39.921308, 'count': 11},
    {'lng': 116.413765, 'lat': 39.929376, 'count': 3},
    {'lng': 116.418232, 'lat': 39.920348, 'count': 50},
    {'lng': 116.417554, 'lat': 39.930511, 'count': 15},
    {'lng': 116.418568, 'lat': 39.918161, 'count': 23},
    {'lng': 116.413461, 'lat': 39.926306, 'count': 3},
    {'lng': 116.42232, 'lat': 39.92161, 'count': 13},
    {'lng': 116.4174, 'lat': 39.928616, 'count': 6},
    {'lng': 116.424679, 'lat': 39.915499, 'count': 21},
    {'lng': 116.42171, 'lat': 39.915738, 'count': 29},
    {'lng': 116.417836, 'lat': 39.916998, 'count': 99},
    {'lng': 116.420755, 'lat': 39.928001, 'count': 10},
    {'lng': 116.414077, 'lat': 39.930655, 'count': 14},
    {'lng': 116.426092, 'lat': 39.922995, 'count': 16},
    {'lng': 116.41535, 'lat': 39.931054, 'count': 15},
    {'lng': 116.413022, 'lat': 39.921895, 'count': 13},
    {'lng': 116.415551, 'lat': 39.913373, 'count': 17},
    {'lng': 116.421191, 'lat': 39.926572, 'count': 1},
    {'lng': 116.419612, 'lat': 39.917119, 'count': 9},
    {'lng': 116.418237, 'lat': 39.921337, 'count': 54},
    {'lng': 116.423776, 'lat': 39.921919, 'count': 26},
    {'lng': 116.417694, 'lat': 39.92536, 'count': 17},
    {'lng': 116.415377, 'lat': 39.914137, 'count': 19},
    {'lng': 116.417434, 'lat': 39.914394, 'count': 43},
    {'lng': 116.42588, 'lat': 39.922622, 'count': 27},
    {'lng': 116.418345, 'lat': 39.919467, 'count': 8},
    {'lng': 116.426883, 'lat': 39.917171, 'count': 3},
    {'lng': 116.423877, 'lat': 39.916659, 'count': 34},
    {'lng': 116.415712, 'lat': 39.915613, 'count': 14},
    {'lng': 116.419869, 'lat': 39.931416, 'count': 12},
    {'lng': 116.416956, 'lat': 39.925377, 'count': 11},
    {'lng': 116.42066, 'lat': 39.925017, 'count': 38},
    {'lng': 116.416244, 'lat': 39.920215, 'count': 91},
    {'lng': 116.41929, 'lat': 39.915908, 'count': 54},
    {'lng': 116.422116, 'lat': 39.919658, 'count': 21},
    {'lng': 116.4183, 'lat': 39.925015, 'count': 15},
    {'lng': 116.421969, 'lat': 39.913527, 'count': 3},
    {'lng': 116.422936, 'lat': 39.921854, 'count': 24},
    {'lng': 116.41905, 'lat': 39.929217, 'count': 12},
    {'lng': 116.424579, 'lat': 39.914987, 'count': 57},
    {'lng': 116.42076, 'lat': 39.915251, 'count': 70},
    {'lng': 116.425867, 'lat': 39.918989, 'count': 8}]
  const ak = '你的百度地图秘钥'
  const loadBaiDuMap = function () {
    return new Promise(function (resolve, reject) {
        try {
          console.log('BMap is defined:', BMap !== undefined)
          resolve(BMap)
        } catch (e) {
          window.init = function () {
            resolve(BMap)
            let script2 = document.createElement('script')
            script2.type = 'text/javascript'
            script2.src = 'http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js'
            script2.onerror = reject
            document.body.appendChild(script2)
          }
          let script1 = document.createElement('script')
          script1.type = 'text/javascript'
          script1.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init'
          script1.onerror = reject
          document.body.appendChild(script1)
        }
    })
  }

  export default {
    data () {
      return {
        bmap: {},
        heatmapOverlay: {}
      }
    },
    methods: {
      initBMap () {
        let vue = this
        loadBaiDuMap().then((BMap, BMapLib) => {
          vue.bmap = new BMap.Map('bmap', {enableMapClick: false})            // 创建Map实例
          vue.bmap.enableScrollWheelZoom()
          vue.bmap.centerAndZoom('北京', 15)
          // 不能在此处继续添加热力图,没有找到解决办法,如有高人还请指教一二啊
        })
      },
      initHeatMap () {
        this.heatmapOverlay = new BMapLib.HeatmapOverlay({'radius': 20})
        this.bmap.addOverlay(this.heatmapOverlay)
        this.heatmapOverlay.setDataSet({data: points, max: 100})
      }
    },
    mounted () {
      this.initBMap()
    }
  }
</script>

<style>

</style>