vue 给圆遮盖物添加文字 高德地图_vue.js高德地图实现热点图代码实例

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高德地图实现热点图详解整合，希望对大家有所帮助

希望与广大网友互动？？

点此进行留言吧！