vue 实现高德地图 热力图
效果图：
第一步：引入链接
<script src="/maps?v=2.0&key=申请key"></script>
第二步：初始化地图
let vm = this;vm.map = null;vm.map = new AMap.Map('Map', {viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',zoom: 5, //初始化地图层级zooms:[5,7],center: [108.945951, 34.465262], //初始化地图中心点layers: [// 卫星new AMap.TileLayer.Satellite(),// 路网new AMap.TileLayer.RoadNet()],});
第三步：热力图
let vm = this;vm.heatmap = {};vm.map.plugin(["AMap.HeatMap"], function () {//初始化heatmap对象vm.heatmap = new AMap.HeatMap(vm.map, {radius: 25, //给定半径opacity: [0, 0.8]});//设置数据集：该数据为北京部分“公园”数据vm.heatmap.setDataSet({data: heatmapData,max: 60});});
相关链接
热力图 数据
高德地图热力图官网
