vue 高德 热力图

Vue 高德地图热力图可以通过以下步骤来实现：

1. 首先，在你的 Vue 项目中安装 `vue-amap` 插件，该插件提供了对高德地图的集成支持。你可以通过以下命令进行安装：

   npm install vue-amap

2. 在你的 Vue 组件中，引入 `vue-amap` 并初始化高德地图：

   import VueAMap from 'vue-amap';

   Vue.use(VueAMap);
   VueAMap.initAMapApiLoader({
     key: 'your_amap_api_key',
     plugin: ['AMap.Heatmap'],
     v: '1.4.15',
   });

替换 `'your_amap_api_key'` 为你在高德开放平台申请的 API Key。

3. 在需要显示热力图的组件中，使用 `amap-heatmap` 组件，并传入相应的数据和配置项：

   <template>
     <div class="heatmap-container">
       <amap-heatmap :data="heatmapData" :options="heatmapOptions"></amap-heatmap>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         heatmapData: [
           { lng: 120, lat: 30, count: 10 },
           { lng: 121, lat: 31, count: 20 },
           // 其他数据...
         ],
         heatmapOptions: {
           radius: 25,
           gradient: {
             0.4: 'blue',
             0.6: 'cyan',
             0.8: 'lime',
             1.0: 'red',
           },
         },
       };
     },
   };
   </script>

这里的 `heatmapData` 是一个数组，每个元素代表一个点的经纬度和权重。`heatmapOptions` 则是配置热力图的一些参数，如半径大小和颜色渐变等。

4. 最后，你需要在样式文件中设置地图容器的高度：

   .heatmap-container {
     height: 400px;
   }

通过以上步骤，你就可以在 Vue 项目中使用高德地图热力图了。记得在使用前先引入高德地图的 JavaScript API，并且替换成你自己的 API Key。