欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例

 更新時(shí)間:2019年04月18日 11:54:52   作者:S筱瀟S四維Smile  
這篇文章主要介紹了vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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實(shí)現(xiàn)

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('熱力圖僅對(duì)支持canvas的瀏覽器適用,您所使用的瀏覽器不能使用熱力圖功能,請(qǐng)換個(gè)瀏覽器試試~')
		  }
          let heatmap;	
          let heatmapData=[];
          //從接口獲取數(shù)據(jù) 
          //官網(wǎng)示例數(shù)據(jù)結(jié)構(gòu) 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對(duì)象
							 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'
							     }
							});
							//設(shè)置數(shù)據(jù)集
							heatmap.setDataSet({
								data: heatmapData,
									max: 5
								});
							});
					}else{
						heatmapData =[];
					}
				} else {
					heatmapData =[];
				}
			});
    }
  },
  isSupportCanvas() {//判斷瀏覽區(qū)是否支持canvas
	 var elem = document.createElement('canvas');
	 return !!(elem.getContext && elem.getContext('2d'));
  },
}

參考:https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap

以上所述是小編給大家介紹的vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論