模拟生成百度动态热力图

最新推荐文章于 2025-05-30 09:17:37 发布

原创最新推荐文章于 2025-05-30 09:17:37 发布 · 8.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #动态热力图

JS 专栏收录该内容

2 篇文章

订阅专栏

在百度地图热力图DEMO基础上自己把坐标换了一下，模拟生成动态的热力图。

<!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>heatmap test</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>    
</head>
<body>
    <div id="container"></div>
    <div id="r-result">
        <input type="button"  onclick="openHeatmap();" value="ShowHeatmap"/><input type="button"  onclick="closeHeatmap();" value="HideHeatmap"/>
    </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(); // 允许滚轮缩放
    heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
    map.addOverlay(heatmapOverlay);
  function updateHeatmap(){
    var points=[];
    for(var i=0;i<100;i++){
        var x = Math.random() * 9999;
        var y = Math.random() * 9999;
        var xStr = "116.41" + x;
        var yStr = "39.91" + y;
        points.push({"lng":parseFloat(xStr),"lat":parseFloat(yStr),"count":50});
    }

    heatmapOverlay.setDataSet({data:points,max:100});
  }

  setInterval(function() {updateHeatmap();}, 2000);

    //详细的参数,可以查看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 为颜色值. 
     */

    //是否显示热力图
    function openHeatmap(){
        heatmapOverlay.show();
    }
    function closeHeatmap(){
        heatmapOverlay.hide();
    }
//  closeHeatmap();
</script>

这里写图片描述