1.在index.html引入高德地图jsapi
2.地图dom
3.js实现
export default {
data() {},
methods:{
initmap(){
let map = new amap.map('container', {
features: ['bg', 'road'],
resizeenable: true,
center: [116.397428, 39.90923],
zoom: 11,
viewmode: '2d',
pitch: 50,
showzoombar:true,
});
if (!this.issupportcanvas()) {
this.$message.info('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
let heatmap;
let heatmapdata=[];
//从接口获取数据
//官网示例数据结构 http://a.amap.com/jsapi_demos/static/resource/heatmapdata.js
this.$axios.get("/map/data").then(res => {
if(res.success) {
if(res.data){
res.data.foreach(item=>{
let obj={
lng:item.longitude,
lat:item.latitude,
count:item.count,
}
heatmapdata.push(obj);
})
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: 5
});
});
}else{
heatmapdata =[];
}
} else {
heatmapdata =[];
}
});
}
},
issupportcanvas() {//判断浏览区是否支持canvas
var elem = document.createelement('canvas');
return !!(elem.getcontext && elem.getcontext('2d'));
},
}
参考:
以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合,希望对大家有所帮助