vue中使用高德地图的热力图方法1

第一步：注册高德的key =》webapi的

第二步骤：在vue.config.js中配置Amap

module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  configureWebpack: {
    externals: {
        "AMap": "AMap"
    }
  },
})

第三步：引入js文件，带上key，就可以使用了，记得先重启服务，否则上面步骤配置不生效

<template>
  <section>		
      <div id="container" style="width:100%; height:680px; margin-top: 20px"></div>
  </section>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script>
  import AMap from 'AMap'
  export default {
      name: "home",
      data() {
          return {
 
          }
      },
      methods: {
          init() {
            var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.418261, 39.921984],
        zoom: 11
    });
 
    if (!this.isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }
 
 
    var heatmap;
    map.plugin(["AMap.Heatmap"], function () {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 25, //给定半径
            opacity: [0, 0.8]
            /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: heatmapData,
            max: 100
        });
    });
 
 
          },
              //判断浏览区是否支持canvas
     isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
      },
 
      mounted() {
        this.init();
      },
 
  }
</script>
 
<style scoped>
  * {
      padding: 0;
      margin: 0;
  }
 
  #map {
      margin-top: 20px;
      height: 680px;
  }
</style>