具体脚本语言如下：

<!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. HTML5 实现获取 gzip 压缩数据，并进行解压，同时解决汉字乱码，相关 pako.js

    1, 下载 pako.js => http://nodeca.github.io/pako/#Deflate.prototype.onData 2, 首先需要了解一下 XMLHttpReques ...

  2. kubernetes下安装mysql

    参考文档:https://blog.csdn.net/sealir/article/details/81177747 注:有mysql安装在k8s集群内,集群外且通过k8s service endpo ...

  3. leetcode983

    public class Solution { public int MincostTickets(int[] days, int[] costs) { ; ; ]; dp[] = ; ; i < ...

  4. Django笔记（2）Json字段处理

    1) Django里面让Model用于JSON字段,添加一个JSONField自动类型如下: [python] view plain copy class JSONField(models.TextF ...

  5. oracle删除表数据的两种的方式

    转自:https://blog.csdn.net/qq_37840993/article/details/82490787 平时写sql中我们都会用到删除语句,而平时删除表数据的时候我们经常会用到两种 ...

  6. oracle数据库启动流程及登录认证方式详解

    转自:https://www.2cto.com/database/201803/726644.html ■  oracle启动流程-windows下 1) lsnrctl start  (启动监听) ...

  7. WIN10 常用bug解决办法

    1.没开始菜单,点不出来,无法关机 建立批处理,右键管理员运行. shutdown -s -t 0 2.没开始菜单,点不出来,无法重启 建立批处理,右键管理员运行. shutdown -r -t 0 ...

  8. Spring boot 自定义starter

    以下配置来自尚硅谷.. 常用如何配置 @Configuration //指定这个类是一个配置类 @ConditionalOnXXX //在指定条件成立的情况下自动配置类生效 @AutoConfigur ...

  9. android平台yuv缩放相关<转>

    Android的视频相关的开发,大概一直是整个Android生态,以及Android API中,最为分裂以及兼容性问题最为突出的一部分.摄像头,以及视频编码相关的API,Google一直对这方面的控制 ...

  10. spring-mvc.xml与spring-mybatis.xml配置文件中命名空间问题

    首先贴出配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...