heatmap.js 百度地图

最新推荐文章于 2024-03-14 11:52:53 发布

lglgsy456

最新推荐文章于 2024-03-14 11:52:53 发布

阅读量3.6k

点赞数

转自 http://blog.csdn.net/guang_mang/article/details/71237961

[python]view plain copy
  

做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面

一首先你要申请一个百度地图api接口的密钥

申请网址

申请密钥之后，先登录上自己的账号然后创建应用

三就是来取一个应用名称，服务，类型全都不用动，ip白名单校验请设置为0.0.0.0/0，然后查看应用，把访问应用的AK码填入下面的代码里面

[python]view plain copy
var points里面填入自己的经纬度  

[python]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
<!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:650px;width:100%;}  
        #r-result{width:100%;}  
    </style>  
</head>  
<body>  
    <div id="container"></div>  
    <div id="r-result">  
        <input type="button"  οnclick="openHeatmap();" value="显示热力图"/><input type="button"  οnclick="closeHeatmap();" value="关闭热力图"/>  
    </div>  
</body>  
</html>  
<script type="text/javascript">  
    var map = new BMap.Map("container");          // 创建地图实例  
  
    var point = new BMap.Point(116.418261, 39.921984);  
    map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别  
    map.enableScrollWheelZoom(); // 允许滚轮缩放  
  
    var points =[  
  
{"lng":"116.123421","lat":"39.612715","count":"37643"},  
{"lng":"116.647674","lat":"39.900081","count":"17000"},  
{"lng":"116.706551","lat":"39.690368","count":"38000"},  
];#这里面添加房价的经纬度，我的太多了，所以只拿了三个  
  
  
    if(!isSupportCanvas()){  
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')  
    }  
    //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md  
    //参数说明如下:  
    /* visible 热力图是否显示,默认为true  
     * opacity 热力的透明度,1-100  
     * radius 势力图的每个点的半径大小  
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示  
     *  {  
            .2:'rgb(0, 255, 255)',  
            .5:'rgb(0, 110, 255)',  
            .8:'rgb(100, 0, 255)'  
        }  
        其中 key 表示插值的位置, 0~1.  
            value 为颜色值.  
     */  
    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});  
    map.addOverlay(heatmapOverlay);  
    heatmapOverlay.setDataSet({data:points,max:100});  
  
    closeHeatmap();  
  
    //判断浏览区是否支持canvas  
    function isSupportCanvas(){  
        var elem = document.createElement('canvas');  
        return !!(elem.getContext && elem.getContext('2d'));  
    }  
  
    function setGradient(){  
        /*格式如下所示:  
        {  
            0:'rgb(102, 255, 0)',  
            .5:'rgb(255, 170, 0)',  
            1:'rgb(255, 0, 0)'  
        }*/  
        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});  
    }  
  
    function openHeatmap(){  
        heatmapOverlay.show();  
    }  
  
    function closeHeatmap(){  
        heatmapOverlay.hide();  
    }  
</script>  
</body>  
</html>  

四用浏览器打开记得点击下面的开关

[python]view plain copy
  