当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.js高德地图实现热点图代码实例

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

2019年07月21日  | 移动技术网IT编程  | 我要评论

1.在引入高德地图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'));
  },
}

参考：

以上所述是小编给大家介绍的vue.js高德地图实现热点图详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网