爲熱力圖上的點添加事件

時間 2019-12-07

標籤熱力圖上添加事件简体版

原文原文鏈接

1. 用到的工具javascript

百度地圖API （web開發 javascript ）css

2. 需求html

給熱力圖上的點添加點擊事件java

3. 遇到的問題web

原始的熱力圖上的點不能點擊canvas

4. 解決方法api

首先繪製熱力圖，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數組，添加覆蓋物信息，將這些點標註在地圖上。ide

可是這樣作會有一個問題，這些標註會遮蓋咱們的熱點圖上的點。

個人解決方案是：給這些點設置新的圖標，使用透明的圖片代替原始的圖標

//給熱力圖添加點擊事件    
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);
    } 
}

加：

一、點擊事件所使用的信息提示窗口

//給標記添加點擊事件以及顯示窗口信息 
var infoWindow = new BMap.InfoWindow('<div style="margin:0;line-height:20px;padding:2px;">' +'<img id="orderImg" src="../Pic/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' 
                    +'標題：' + 變量1
                    +'<br/>xxx：'+  變量2
                    +'<br/>xxx：'+  變量3
                    +'<br/>xxx：'+ 變量4 + '</div>'); 
Marker.infoWindow=infoWindow;//給當前標註新增一個屬性以便保存窗口信息infoWindow
Marker.addEventListener("click", function (e) { 
           　　 this.openInfoWindow(e.target.infoWindow);//點擊標註時，打開改標註對打開改標註對應的回調信息
   　　　　　　
  　　　　 　　 //若是使用下面的方式，那樣就會致使每次標註點擊後，彈出的窗口信息都是最後一次循環的infoWindow。由於在click的時候只會去找infoWindow這個變量值，而你的click確定是在全部循環的，標註都產生完以後，此時infoWindow變量已經被賦值成了最後一次循環的值。
　　　　　　　　 //this.openInfoWindow(infoWindow);
            });

若是使用searchInfoWindow會出現只在一個位置顯示提示信息窗口

Marker.addEventListener("click",function(e){
     var Content = '<div style="margin:0;line-height:20px;padding:2px;">' +'<img id="orderImg" src="../Pic/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' 
                    +'標題：' + 變量1
                    +'<br/>xxx：'+ 變量2 +'<br/>xxx：'+ 變量3 +'<br/>xxx：'+ 變量4 + '</div>';
 //建立檢索信息窗口對象 
var searchInfoWindow = null;
　　 　 searchInfoWindow = new BMapLib.SearchInfoWindow(map, Content, { 
　　　　title : Title, //標題 
　　　　width : 500, //寬度 
　　　　height : 105, //高度 
　　　　enableSendToPhone : false, //是否使用發送手機
　　　　panel : "panel", //檢索結果面板 
　　　　enableAutoPan : true, //自動平移 
　　　　searchTypes :[]
 });
　　　　searchInfoWindow.open(Marker); 
});

注：原文參考：https://blog.csdn.net/zjuwwj/article/details/53374947#commentsedit

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。