vue高德地图创建热力图

要在Vue项目中创建高德地图热力图，可以按照以下步骤进行：

1. 引入高德地图API

在 `index.html` 文件中引入高德地图API：

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

2. 创建地图

在 Vue 组件中创建地图容器和地图对象：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    this.map = new AMap.Map('map-container', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
  }
}
</script>

3. 加载热力图插件

在 `mounted` 钩子函数中加载热力图插件：

mounted() {
  // 创建地图对象
  this.map = new AMap.Map('map-container', {
    zoom: 10,
    center: [116.397428, 39.90923]
  });

  // 加载热力图插件
  AMap.plugin(['AMap.Heatmap'], () => {
    // 创建热力图对象
    this.heatmap = new AMap.Heatmap(this.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'
      } // 渐变色
    });
  });
}

4. 准备热力图数据

在组件中定义一个数组，用于存储热力图的数据：

data() {
  return {
    heatmapData: [
      {lng: 116.191031, lat: 39.988585, count: 10},
      {lng: 116.389275, lat: 39.925818, count: 20},
      {lng: 116.287444, lat: 39.810742, count: 30},
      {lng: 116.481707, lat: 39.940089, count: 40},
      {lng: 116.410588, lat: 39.880172, count: 50}
    ]
  }
}

其中，`lng` 和 `lat` 表示经纬度，`count` 表示热力值。

5. 绑定数据到热力图

在 `mounted` 钩子函数中，将数据绑定到热力图对象：

this.heatmap.setDataSet({
  data: this.heatmapData,
  max: 100 // 最大值，用于计算渐变色
});

6. 完整代码

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  data() {
    return {
      heatmapData: [
        {lng: 116.191031, lat: 39.988585, count: 10},
        {lng: 116.389275, lat: 39.925818, count: 20},
        {lng: 116.287444, lat: 39.810742, count: 30},
        {lng: 116.481707, lat: 39.940089, count: 40},
        {lng: 116.410588, lat: 39.880172, count: 50}
      ]
    }
  },
  mounted() {
    // 创建地图对象
    this.map = new AMap.Map('map-container', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });

    // 加载热力图插件
    AMap.plugin(['AMap.Heatmap'], () => {
      // 创建热力图对象
      this.heatmap = new AMap.Heatmap(this.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'
        } // 渐变色
      });

      // 绑定数据到热力图
      this.heatmap.setDataSet({
        data: this.heatmapData,
        max: 100 // 最大值，用于计算渐变色
      });
    });
  }
}
</script>

<style>
#map-container {
  width: 100%;
  height: 300px;
}
</style>

以上就是在Vue项目中创建高德地图热力图的步骤。