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

<div class="map-container">
   <div id="container" ></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'));
  },
}