调用高德地图API（热力图）详解

时间：2018-08-15 17:05:40 收藏：0 阅读：4012

具体脚本语言如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>热力图</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script src="https://webapi.amap.com/maps?v=1.4.9&key=您申请的key值"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="显示热力图" onclick="heatmap.show()"/>
    <input type="button" class="button" value="关闭热力图" onclick="heatmap.hide()"/>
</div>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.418261, 39.921984],
        zoom: 11
    });
    var points=[
{"lng":"116.32497","lat":"39.96696"},
{"lng":"116.616","lat":"40.053016"},
{"lng":"116.34324","lat":"39.95056"},
{"lng":"116.554131","lat":"39.912131"},
{"lng":"116.3483","lat":"39.83151"},
{"lng":"116.36619","lat":"39.75298"}
    ];
    if (!isSupportCanvas()) {
        alert(‘热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~‘)
    }
    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小   
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *  {
     .2:‘rgb(0, 255, 255)‘,
     .5:‘rgb(0, 110, 255)‘,
     .8:‘rgb(100, 0, 255)‘
     }
     其中 key 表示插值的位置, 0-1 
     value 为颜色值 
     */
    var heatmap;
    map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 25, //给定半径
            opacity: [0, 0.8]
            /*,gradient:{
             0.5: ‘blue‘,
             0.65: ‘rgb(117,211,248)‘,
             0.7: ‘rgb(0, 255, 0)‘,
             0.9: ‘#ffea00‘,
             1.0: ‘red‘
             }*/
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: points,
            max: 100
        });
    });
    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement(‘canvas‘);
        return !!(elem.getContext && elem.getContext(‘2d‘));
    }
</script>
</body>
</html>

大家将上述代码存在一个html文件中，然后通过网页打开即可。

其中只需要注意

heatmap.setDataSet({
            data: points,
            max: 1
        }

中的data：后面的points是你自己的数据，即在之前定义的json格式经纬度

var points=[
{"lng":"116.32497","lat":"39.96696"},
{"lng":"116.616","lat":"40.053016"},
{"lng":"116.34324","lat":"39.95056"},
{"lng":"116.554131","lat":"39.912131"},
{"lng":"116.3483","lat":"39.83151"},
{"lng":"116.36619","lat":"39.75298"}
    ];

还有就是max的值(即最红区域对应的次数值)选取自己觉得合适的，不然太小会几乎一片红色，太大几乎看不到热力图颜色。

在这里给大家福利一个将各种格式转为json文件的小方法：
https://www.bejson.com/json/col2json/