vue.js高德地图实现热点图代码实例

1.在index.html引入高德地图JSAPI

 <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>

2.地图dom

<div class="map-container">
 <div id="container" style="width:100%;height:500px"></div>
</div>

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'));
 },
}

参考：https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap

以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！