1. 用到的工具 百度地圖API （web開發 javascript ） 2. 需求 給熱力圖上的點添加點擊事件 3. 遇到的問題 原始的熱力圖上的點不能點擊 4. 解決方法 首先繪製熱力圖，HTML代碼如下： JavaScript代碼如下： 解釋： heatmapOverlay.setDataSe ...
1. 用到的工具
百度地圖API （web開發 javascript ）
2. 需求
給熱力圖上的點添加點擊事件
3. 遇到的問題
原始的熱力圖上的點不能點擊
4. 解決方法
首先繪製熱力圖，HTML代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script> <title>熱力圖功能示例</title> <style type="text/css"> ul,li{list-style: none;margin:0;padding:0;float:left;} html{height:100%} body{height:100%;margin:0px;padding:0px;font-family:"微軟雅黑";} #container{height:500px;width:100%;} #r-result{width:100%;} </style> <script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript"> hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head> <body> <div id="container" style="margin-top: 40px;"></div> <div id="r-result" style="margin-top: 15px;"> <input type="button" class="btn btn-danger" onclick="openHeatmap();" value="顯示熱力圖"/> <input type="button" class="btn btn-danger" onclick="closeHeatmap();" value="關閉熱力圖"/> </div> </div> </body> </html>
JavaScript代碼如下：
<script type="text/javascript"> var map = new BMap.Map("container", {enableMapClick:false}); //創建地圖實例並關閉預設地圖POI事件 var point = new BMap.Point(121.6, 29.821984); map.centerAndZoom(point, 12); // 初始化地圖，設置中心點坐標和地圖級別 map.enableScrollWheelZoom(); // 允許滾輪縮放 map.setMapStyle({ style: 'dark' }); var marker = new BMap.Marker(point); // 創建標註 map.addOverlay(marker); // 將標註添加到地圖中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //設置點的跳動 marker.enableDragging(); // 設置點可拖拽 var points =[ {"lng":121.682989,"lat":29.804456,"count":1000}, {"lng":121.680201,"lat":29.78392,"count":510}, {"lng":121.645309,"lat":29.748794,"count":150}, {"lng":121.579006,"lat":29.885259,"count":400}, {"lng":121.592496,"lat":29.880364,"count":1000}, {"lng":121.555134,"lat":29.897363,"count":60}, {"lng":121.609405,"lat":29.912858,"count":180}, {"lng":121.579006,"lat":29.885259,"count":800}, {"lng":121.635028,"lat":29.924854,"count":110}, {"lng":121.603217,"lat":29.870361,"count":70}, {"lng":121.579006,"lat":29.885259,"count":420}, {"lng":121.545331,"lat":29.877311,"count":40}, {"lng":121.517606,"lat":29.85621,"count":270}, {"lng":121.586426,"lat":29.859608,"count":230}, {"lng":121.550288,"lat":29.805446,"count":600}, {"lng":121.619161,"lat":29.937494,"count":80}, {"lng":121.579006,"lat":29.885259,"count":150}, {"lng":121.567682,"lat":29.860679,"count":250}, {"lng":121.622719,"lat":29.862048,"count":210}, {"lng":121.573505,"lat":29.838737,"count":10}, {"lng":121.563129,"lat":29.828899,"count":510}, {"lng":121.551881,"lat":29.820615,"count":70}, {"lng":121.544197,"lat":29.812816,"count":110}, {"lng":121.553433,"lat":29.823484,"count":350}, {"lng":121.610195,"lat":29.891873,"count":220}, {"lng":121.577891,"lat":29.890862,"count":40}, {"lng":121.579006,"lat":29.885259,"count":50}, {"lng":121.543819,"lat":29.868502,"count":30}, {"lng":121.55131,"lat":29.833056,"count":1000} ]; if(!isSupportCanvas()){ alert('熱力圖目前只支持有canvas支持的瀏覽器,您所使用的瀏覽器不能使用熱力圖功能~') } heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":15}); map.addOverlay(heatmapOverlay); heatmapOverlay.setDataSet({data:points,max:100}); //是否顯示熱力圖 function openHeatmap(){ heatmapOverlay.show(); } function closeHeatmap(){ heatmapOverlay.hide(); } closeHeatmap(); function setGradient(){ var gradient = {}; var colors = document.querySelectorAll("input[type='color']"); colors = [].slice.call(colors,0); colors.forEach(function(ele){ gradient[ele.getAttribute("data-key")] = ele.value; }); heatmapOverlay.setOptions({"gradient":gradient}); } //判斷瀏覽區是否支持canvas function isSupportCanvas(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } </script>
解釋： heatmapOverlay.setDataSet({data:points,max:100}); 是將points畫到map上，而points並沒有點擊事件
由代碼我們可以知道，points裡面其實是有點的坐標的：
var points =[{“lng”:121.682989,”lat”:29.804456,”count”:1000}]
points里存是一個個含有經緯度信息和counts的對象，所以先遍歷points數組，添加覆蓋物信息，將這些點標註在地圖上。
但是這樣做會有一個問題，這些標註會遮蓋我們的熱點圖上的點。
我的解決方案是：給這些點設置新的圖標，使用透明的圖片代替原始的圖標
//給熱力圖添加點擊事件 function addHeatMapClick(points){ //var pointArray = new Array(); for(var i=0;i<points.length;i++) { var hotPoint = new BMap.Point(points[i].lng, points[i].lat); //console.log("points.lng:" + points[i].lng + " points.lat:" + points[i].lat); console.log("hotPoint:" + hotPoint.lng,hotPoint.lat); var myIcon = new BMap.Icon("../Pic/HMC.png", new BMap.Size(20,20), { //自定義覆蓋物 anchor: new BMap.Size(12, 14), //中心點設置 }); var cMarker = new BMap.Marker(hotPoint,{icon:myIcon}); // 創建標註 map.addOverlay(cMarker); // 將標註添加到地圖中 //pointArray[i] = new BMap.Point(points[i][0], points[i][1]); cMarker.addEventListener("click",getAttr); } //讓所有點在視野範圍內 //map.setViewport(pointArray); function getAttr(e){ var p = e.target; console.log("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat); var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); searchInfoWindow.open(point); } }
註：原文參考：https://blog.csdn.net/zjuwwj/article/details/53374947#commentsedit
