<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<template>
<div class="box">
<div id="container"></div>
<div class="input-card" style="width: auto;">
<div class="input-item">
<button class="btn" @click="heatmap.show()">显示热力图</button>
</div>
<div class="input-item">
<button class="btn" @click="heatmap.hide()">关闭热力图</button>
</div>
</div>
</div>
</template>
<script>
// https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
// 下面数据为热力图数据,可以下载上面网址数据进行测试
import heatmapData from '@/assets/js/heatmapData';
export default {
data() {
return {
map: null,
heatmap: null
};
},
mounted() {
// 延迟加载,防止出现AMap not defined
setTimeout(() => {
this.initMap();
this.createHeatMap();
}, 1000);
},
beforeDestroy() {
this.map && this.map.destroy();
},
methods: {
initMap() {
this.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.480983, 39.989628],
zoom: 11,
mapStyle: 'macaron', // 马卡龙(其他样式可在高德api中查找进行修改)
//自定义地图样式:https://lbs.amap.com/dev/mapstyle/index
});
},
//判断浏览区是否支持canvas
isSupportCanvas() {
let elem = document.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
},
createHeatMap() {
if (!this.isSupportCanvas()) {
return this.$message({
message: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。',
type: 'warning'
});
}
let __this = this;
this.map.plugin(["AMap.Heatmap"], function() {
//初始化heatmap对象
__this.heatmap = new AMap.Heatmap(__this.map, {
radius: 25, //给定半径
opacity: [0, 0.8],
});
//设置数据集:该数据为北京部分“公园”数据
__this.heatmap.setDataSet({
data: heatmapData,
max: 100
});
});
}
}
};
</script>
<style scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
.box{
width: 100%;
height: 600px;
border-radius: 12px;
background: #fff;
}
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>