vue中引入百度地图，添加热力图

代码：

<template>
  <div class="heatMap">
    <div id="map" ref="map"></div>
  </div>
</template>

<script>
import BMap from 'BMap'
import BMapLib from 'BMapLib'
import MapStyle from '@/static/mapStyle.js'

export default {
  name: 'HeatMap',
  data () {
    return {}
  },
  components: {},
  mounted () {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap () {
       // 创建地图实例
      this.map = new BMap.Map(this.$refs.map, {
        coordsType: 5
      })
      const point = new BMap.Point(118.785973, 32.073193) // 创建点坐标
      this.map.centerAndZoom(point, 13) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true)
      this.map.setMapStyleV2({ styleJson: MapStyle }) // 自定义地图样式
      this.addHeatMap()
    },
    addHeatMap () {
      const points = [
        { lng: '118.788173', lat: '32.073183', count: '376' },
        { lng: '118.788129', lat: '32.071235', count: '360' },
        { lng: '118.785913', lat: '32.073111', count: '380' },
        { lng: '118.822193', lat: '32.083595', count: '400' },
        { lng: '118.80667', lat: '32.065849', count: '400' }
      ]
      const heatmapOverlay = new BMapLib.HeatmapOverlay({
        radius: 8,
        visible: true,
        opacity: 0.8,
        gradient: { // 热力图渐变区间
          0: '#eab12e',
          0.3: '#fc2d2a',
          1: '#fc2d2a'
        }
      })
      this.map.addOverlay(heatmapOverlay)
      heatmapOverlay.setDataSet({ data: points, max: '600' })
    }
  }
}
</script>