具体脚本语言如下：

<!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/

调用高德地图API（热力图）详解的更多相关文章

  1. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  2. 【转载】Android端百度地图API使用详解

    转载地址:http://www.cnblogs.com/rocomp/p/4994110.html 百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口 ...

  3. java调用高德地图api实现通过ip定位访问者的城市

    所需东西:高德地图的key 注意:这个key是 web服务的key  和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...

  4. js调用高德地图API获取地理信息进行定位

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=(需要自 ...

  5. Android——调用高德地图API前期准备

    1.登陆高德开放平台注册账号http://lbs.amap.com/ 2.创建自己的应用并且添加新key 获取发布版安全码获取方法: 在AndroidStudio的Terminal中编译: 输入如下图 ...

  6. android 高德地图API 之 java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLibrary returned null错误

    错误场景: 运行android app时,在运行到调用高德地图API时,出现 “java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLi ...

  7. JS框架_(JQuery.js)高德地图api

    百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...

  8. 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  9. 【高德地图API】从零开始学高德JS API（六）——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

随机推荐

  1. microsoft visual c++ 14.0 is required问题解决办法

    方法有两个: 1.绕过pip,手动下载包 2.升级vc 详情参考:https://blog.csdn.net/amoscn/article/details/78215641

  2. HBASE小结--待续使用

    构建在HDFS之上的分布式,面向列的存储系统,使用zookeeper做协同服务,在需要实时读写和随机访问超大规模数据集的时候使用 缺点:非关系型,不支持SQL,数据类型单一(字符串,无类型),之支持单 ...

  3. CSS TYPOGRAPHY

    CSS TYPOGRAPHY Review Great job! You learned how to style an important aspect of the user experience ...

  4. getVisibleSize,getWinSize,getFrameSize,getViewPortRect

    cc.director.getVisibleSize();//获取运行场景的可见大小 cc.director.getWinSize();//获取视图的大小,以点为单位 cc.director.getW ...

  5. linux下mysql开启远程访问权限 防火墙开放3306端口

    linux下mysql开启远程访问权限 防火墙开放3306端口 转载  2017-01-21   作者:JAVA-ANDROID 这篇文章主要为大家详细介绍了linux下mysql开启远程访问权限,防 ...

  6. jQuery+php实现二级联动

    public function liandong(){ $arr = Db::table("city")->where("pid=0")->sele ...

  7. Structs复习 简单数据校验

    jar包 web.XML <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...

  8. GIS案例学习笔记-ArcGIS整图大图出图实例教程

    GIS案例学习笔记-ArcGIS整图大图出图实例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 1. 通过出图比例尺(1:2000),地图范围测算图纸大小. 图 ...

  9. 吴裕雄 python 机器学习-DMT（2）

    import matplotlib.pyplot as plt decisionNode = dict(boxstyle="sawtooth", fc="0.8" ...

  10. python 删除模块

    import systry:    import librabbitmqexcept Exception:    passelse:    version = getattr(librabbitmq, ...