网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

 <script src="/UploadFiles/2021-04-02/maps">

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

上一篇:详解JavaScript中关于this指向的4种情况
下一篇:基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap