VUE调用高德地图之热力图

上次用VUE实现了高德地图的轨迹回放，现在来实现热力图功能。
照例，第一步：
加载JS AP

• 在public/index.html中加入：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>

将官方demo转换为vue代码

• 放置地图
  
• 初始化map对象
  
• 生成热力图map
  
  完整代码如下：

<template>
  <div>
    <div id="container"></div>
    <div class="input-card" style="width: auto;">
      <div class="input-item">
        <button class="btn" @click="heatmap.show()">显示热力图</button>
      </div>
      <div class="input-item">
        <button class="btn" @click="heatmap.hide()">关闭热力图</button>
      </div>
    </div>
  </div>
</template>

<script>
// https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
import {heatmapData} from './heatmapData';
export default {
  mounted() {
    // 延迟加载，防止出现AMap not defined
    setTimeout(() => {
      this.initMap();
      this.createHeatMap();
    }, 1000);
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  data() {
    return {
      map: null,
      heatmap: null
    };
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.480983, 39.989628],
        zoom: 11,
        mapStyle: 'amap://styles/grey', // 极夜蓝
        //自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
      });
    },
    //判断浏览区是否支持canvas
    isSupportCanvas() {
      let elem = document.createElement("canvas");
      return !!(elem.getContext && elem.getContext("2d"));
    },
    createHeatMap() {
      if (!this.isSupportCanvas()) {
        return this.$msg.error(
          "热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。"
        );
      }
      let __this = this;
      this.map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        __this.heatmap = new AMap.Heatmap(__this.map, {
          visible: false,
          radius: 25, //给定半径
          opacity: [0, 0.8],
        });
        //设置数据集：该数据为北京部分“公园”数据
        __this.heatmap.setDataSet({
          data: heatmapData,
          max: 100
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");

#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
</style>

启动项目，一切正常！