vue中使用高德地图渲染热力图组件

一、在 index.html 文件中引入高德地图 JavaScript API 的 2.0 版本 SDK

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

二、创建一个 Vue 组件，用于渲染地图和热力图

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

<script>
export default {
  name: "HeatMap",
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map("map", {
        center: [116.397428, 39.90923],
        zoom: 11,
      });

      // 预设数据，可以从 API 获取
      const data = [
        { lng: 116.405285, lat: 39.904989, count: 10 },
        { lng: 116.418162, lat: 39.931711, count: 100 },
        { lng: 116.418162, lat: 39.931711, count: 50 },
        { lng: 116.418162, lat: 39.931711, count: 20 },
        { lng: 116.418162, lat: 39.931711, count: 30 },
        { lng: 116.418162, lat: 39.931711, count: 40 },
      ];

      // 创建热力图层
      const 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,
        max: 100,
      });
    },
  },
};
</script>

<style>
.map-container {
  height: 500px;
}
.map {
  height: 100%;
}
</style>

三、在你的父组件中使用 组件

<template>
  <div>
    <HeatMap />
  </div>
</template>

<script>
import HeatMap from "./HeatMap.vue";

export default {
  name: "App",
  components: {
    HeatMap,
  },
};
</script>