高德地图html js开发例子,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高德地图实现热点图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！