VUE调用高德地图之热力图
vue下使用高德JS API实现热力图功能
·
上次用VUE实现了高德地图的轨迹回放,现在来实现热力图功能。
照例,第一步:
加载JS AP
- 在public/index.html中加入:
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=init"></script>
将官方demo转换为vue代码
- 放置地图
- 初始化map对象
- 生成热力图map
完整代码如下:
<template>
<div>
<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 './heatmapData';
export default {
mounted() {
// 延迟加载,防止出现AMap not defined
setTimeout(() => {
this.initMap();
this.createHeatMap();
}, 1000);
},
beforeDestroy() {
this.map && this.map.destroy();
},
data() {
return {
map: null,
heatmap: null
};
},
methods: {
initMap() {
this.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.480983, 39.989628],
zoom: 11,
mapStyle: 'amap://styles/grey', // 极夜蓝
//自定义地图样式: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.$msg.error(
"热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。"
);
}
let __this = this;
this.map.plugin(["AMap.Heatmap"], function() {
//初始化heatmap对象
__this.heatmap = new AMap.Heatmap(__this.map, {
visible: false,
radius: 25, //给定半径
opacity: [0, 0.8],
});
//设置数据集:该数据为北京部分“公园”数据
__this.heatmap.setDataSet({
data: heatmapData,
max: 100
});
});
}
}
};
</script>
<style lang="less" scoped>
@import url("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
#container {
margin: 0;
padding: 0;
width: 100%;
height: 500px;
}
.input-card .btn {
margin-right: 1.2rem;
width: 9rem;
}
</style>
启动项目,一切正常!
更多推荐
已为社区贡献2条内容
所有评论(0)