vue加载百度地图

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) {      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'        document.head.appendChild(script2)      }      let script = document.createElement('script')      script.type = 'text/javascript'      script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=init'      script.onerror = reject      document.head.appendChild(script)    })  }  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>