具体脚本语言如下：

<!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. python中复数的几件事儿

    第8题相当于1.23e+4 + 0即9.87e+6j.real的实部其实是0,9.87e+6全是虚部 第15题相当于1.23e+4 + 9.87e+6,即加了9.87e+6j.imag的虚部的数值9. ...

  2. sql server 查看对象最后修改时间

    sql server 查看对象最后修改时间,根据最后修改时间排序 存储过程 SELECT * FROM sys.all_objects WHERE  TYPE='P' ORDER BY modify_ ...

  3. ActiveMQ 学习

    链接:  http://www.cnblogs.com/zhuxiaojie/p/5564187.html#autoid-1-0-0

  4. tips___代码规范

    函数变量尽可能置于最小作用域内,并在变量声明时进行初始化 变量声明的位置最好离第一次使用的位置越近越好:应使用初始化的方式代替声明再赋值. int x=0; rather than  int x; x ...

  5. 【x】 PAT/BasicLevel_C++/1002. 写出这个数 (20).cpp

    C++中的to_string()函数[C++11支持] - Bravo Yeung-羊较瘦之自留地 - CSDN博客https://blog.csdn.net/lzuacm/article/detai ...

  6. 【原】Win7 host 与 virtualbox ubuntu guest 相同ping通

    环境:Win7 host 与 virtualbox ubuntu guest 在 “设置”-->"网络" 中选择网卡1,修改连接方式为 “桥接网卡” 后, 主机和虚拟机可以相 ...

  7. ANg-别人家的笔记

    http://blog.csdn.net/scruelt/article/details/78997697 https://github.com/fengdu78/Coursera-ML-Andrew ...

  8. akka共享内存

    Akka共享内存 Akka中的共享内存是基于Actor模型的,Actor模型提倡的是:通过通讯来实现共享内存,而不是用共享内存来实现通讯,这点是跟Java解决共享内存最大的区别,举个例子: 在Java ...

  9. java-学习6

    public class arryTest4 { //对整型数组按照由小到大的顺序进行排序 public static void main(String[] args) { int score[]= ...

  10. 电脑cpu100%的原因

    这个本地系统占很高的cpu,主要原因是我关机之后,没有关透又重启了,就是管了机之后等10几秒再开机会好