百度地图实现热力图效果

<font size="" color=""><!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=你的key"></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>	
    </head>
    <body>
        <div id="container"></div>
        <div id="r-result">
            <input type="button"  onclick="openHeatmap();" value="显示热力图"/>
            <input type="button"  onclick="closeHeatmap();" value="关闭热力图"/>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        // 创建地图实例
        var map = new BMap.Map("container");         
        //设置地图的中心点
        var point = new BMap.Point(117.830586, 30.943465);
         // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 13);  
        // 允许滚轮缩放
        map.enableScrollWheelZoom(); 
        //设置热力图的点参数
        var points =[
        {
    
    "lng":117.862179,"lat":30.940701,"count":50},
        {
    
    "lng":117.226897,"lat":30.703597,"count":51},
        {
    
    "lng":117.79901,"lat":30.956806,"count":15},
        {
    
    "lng":117.899809,"lat":30.917902,"count":40},
        {
    
    "lng":117.799091,"lat":30.956403,"count":100}];
        //判断浏览器是否支持canvas
        if(!isSupportCanvas()){
    
    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')}
        //热力图初始化
        heatmapOverlay1 = new BMapLib.HeatmapOverlay({
    
    "radius":20});
        //地图添加热力图层
        map.addOverlay(heatmapOverlay1);
        //热力图层添加数据
        heatmapOverlay1.setDataSet({
    
    data:points,max:100});
        //不知道作用
        //判断浏览区是否支持canvas
        function isSupportCanvas(){
    
    
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
        //显示热力图
        function openHeatmap(){
    
    
            heatmapOverlay1.show();
        }
        //关闭热力图
        function closeHeatmap(){
    
    
            heatmapOverlay1.hide();
        }    
        closeHeatmap();
    </script></font>
百度地图实现热力图效果

猜你喜欢
