具体脚本语言如下：

<!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. django之urlresolver

    >>> from django.utils.regex_helper import normalize >>> bits=normalize(r'^static/( ...

  2. 【ASP.NET 插件】分享一个可视化HTML编辑器 CKEditor.NET

    因为公司网站的可视化HTML编辑器IE兼容性问题,js报错不能使用,于是在网上找到了个还行的,图片本地上传的话直接把图片拖到编辑窗口就可以了.这个编辑器是在开源中国看到的,个人觉得还不错! CKEdi ...

  3. gulp 添加版本号 解决浏览器缓存问题

    分别安装gulp-rev.gulp-rev-collerctor.gulp-asset-rev,安装了的略过 npm install gulp-rev --save-dev npm install g ...

  4. 关于 Level 和 Promotion，其实就那么简单

    曾经有读者和朋友问我:一般硅谷工作了三四年以后,会是什么 level?找工作会拿到什么 package?拿到这个问题之后,我想了想,还是没有回答.其实三四年的时间,对于曾经在同一个起点的两个人,因为际 ...

  5. 机器学习进阶-图像基本操作-边界补全操作 1.cv2.copyMakeBoder(img, top_size, bottom_size, left_size, right_size, cv2.BORDER_REPLICATE) 进行边界的补零操作 2.cv2.BORDER_REPLICATE(边界补零复制操作)...

    1.cv2.copyMakeBoder(img, top_size, bottom_size, left_size, right_size, cv2.BORDER_REPLICATE) 参数说明: i ...

  6. vector 内存释放相关

    在使用vector 存储char 类型时 new的数据 在vecto 执行rerase的时候或者 单项执行clear 内存是不能被释放的. 比如有下面的一个测试: class SnapshotInfo ...

  7. input点击后的 默认边框去除

    转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...

  8. MemSQL 架构初探(转)

    MemSQL 自称是最快的内存数据库.目前已发布了2.5版本. MemSQL 具有以下特点 1 高效的并行,尤其是分布式的MemSQL. 2 高效的并发,采用lock-free的内存数据结构skip ...

  9. Haskell语言开发工具

    Stack How to Script with Stack Originate Guides - Haskell Tool Stack 配置 Intellij Idea IntelliJ plugi ...

  10. adb INSTALL_FAILED_UPDATE_INCOMPATIBLE

    今天用Eclipse运行项目时出错: LOG: [2018-05-09 14:16:19 - Module_Android_Demo] ------------------------------ [ ...