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