VUE项目 高德地图使用热力图--实例

效果图

代码

• 在public/index.html中加入：

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

• xxx.vue 页面完整代码

<template>
  <div class="box">
    <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 '@/assets/js/heatmapData'; 

export default {
  data() {
    return {
      map: null,
      heatmap: null
    };
  },
  mounted() {
    // 延迟加载，防止出现AMap not defined
    setTimeout(() => {
      this.initMap();
      this.createHeatMap();
    }, 1000);
  },
  beforeDestroy() {
    this.map && this.map.destroy();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.480983, 39.989628],
        zoom: 11,
        mapStyle: 'macaron', // 马卡龙(其他样式可在高德api中查找进行修改)
        //自定义地图样式：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.$message({
          message: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。',
          type: 'warning'
        });
      }
      let __this = this;
      this.map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        __this.heatmap = new AMap.Heatmap(__this.map, {
          radius: 25, //给定半径
          opacity: [0, 0.8],
        });
        //设置数据集：该数据为北京部分“公园”数据
        __this.heatmap.setDataSet({
          data: heatmapData,
          max: 100
        });
      });
    }
  }
};
</script>

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

.box{
  width: 100%;
  height: 600px;
  border-radius: 12px;
  background: #fff;
}
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>