微客导航 » 文章资讯 » vue.js高德地图实现热点图代码实例

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

2023-08-24 10:34:04 305

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

2.地图dom

3.js实现

exportdefault{
	data(){},
methods:{
initMap(){
letmap=newAMap.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的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
		}
letheatmap;	
letheatmapData=[];
//从接口获取数据
//官网示例数据结构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=>{
							letobj={
								lng:item.longitude,
								lat:item.latitude,
								count:item.count,
							}
							heatmapData.push(obj);
						})
						map.plugin(["AMap.Heatmap"],function(){
							//初始化heatmap对象
							 heatmap=newAMap.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
	varelem=document.createElement('canvas');
	return!!(elem.getContext&&elem.getContext('2d'));
},
}

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐