腾讯地图热力图使用
时间：2023-04-05 21:45:28
HTML5
使用腾讯地图的热力组件库，介绍腾讯地图就不赘述了。这篇文章主要讲的是如何使用，关键点：热度的高低只能通过相邻热点的数量来控制，所以如果想达到更高的热度区域，可以通过增加周围热点的数量来实现
//HTML代码记得给出宽度和高度//constinitTopMap=(window)=>{letmapInit=reactive({})letmapQQ=reactive({})mapQQ=window.TMap//引入腾讯地图constcenter=new(mapQQasany).LatLng(lat.value,lng.value)constoptions={zoom:zoomValue.value,//minZoom:14,center:center,mapStyleId:'style1',mapTypeControl:false,zoomControl:false,scaleControl:false,panControl:false,showControl:false}mapInit=new(mapQQasany).Map(document.getElementById('topMessageMap'),选项)constheat=new(mapQQasany).visualization.Heat({max:180,//最强热度阈值min:0,//最弱热度阈值height:0,//峰值高度//map:mapInit,//必填参数,指定显示热图半径的地图对象：60//辐射半径，默认为20}).addTo(mapinit)console.log(heat)//获取热度数据//constdata=getHeatData(50,50,0)constdata=topHeat()//传数据到热图heat.setData(lukouList)}//数据格式constlukouList=[{lng:117.044054,lat:39.068611,count:10}]
