第一步:注册高德的key =》webapi的
第二步骤:在vue.config.js中配置Amap
module.exports = defineConfig({
transpileDependencies: true,
productionSourceMap: false,
configureWebpack: {
externals: {
"AMap": "AMap"
}
},
})
第三步:引入js文件,带上key,就可以使用了,记得先重启服务,否则上面步骤配置不生效
<template>
<section>
<div id="container" style="width:100%; height:680px; margin-top: 20px"></div>
</section>
</template>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script>
import AMap from 'AMap'
export default {
name: "home",
data() {
return {
}
},
methods: {
init() {
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.418261, 39.921984],
zoom: 11
});
if (!this.isSupportCanvas()) {
alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
var heatmap;
map.plugin(["AMap.Heatmap"], function () {
//初始化heatmap对象
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: heatmapData,
max: 100
});
});
},
//判断浏览区是否支持canvas
isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
},
mounted() {
this.init();
},
}
</script>
<style scoped>
* {
padding: 0;
margin: 0;
}
#map {
margin-top: 20px;
height: 680px;
}
</style>