一、在 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>