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

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

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

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