[高德地高德地图下载]vue.js高德地图实现热点图代码实例

时间:2024-06-27  来源:js教程  阅读:

1.在index.html引入高德地图JSAPI

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

2.地图dom

   

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高德地图实现热点图代码实例

http://m.bbyears.com/wangyezhizuo/162853.html

推荐访问:下载高德地 高德地高德地地图
相关阅读 猜你喜欢
本类排行 本类最新