具体脚本语言如下：

<!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. leetcode701

    class Solution: def insertIntoBST(self, root, val): """ Time: O(log(n)) [average case ...

  2. Shell 编程（实例一）

    创建一个脚本 admin.sh 完成如下作用: -h | --help : 提供帮助信息 --add  Users : 完成用户添加 -del User | --delete : 完成用户删除 -v ...

  3. day30-模块和包

    一.模块介绍 1.什么是模块 在python中,一个函数封装一个功能,当一个文件中包含很多个函数,而我们在其他程序中经常会用到这个文件中的功能时,那么我们就可以将这个包含多个函数的文件封装成一个模块, ...

  4. spring boot 的常用注解

    SpringBoot用于简化Spring应用的搭建,开发及部署:该框架采用注解的方式进行配置可以很方便的构建Spring应用. 1. @SpringBootApplication @SpringBoo ...

  5. UI5-Fiori初学者导航

    正文 你是UI5和Fiori的新手?来对地方了. 对我来说,今年是不得不“跟上时代”去提升自己ABAP世界以外的技术技能的困难的一年.幸运的是,有很多可免费获得的信息和课程可以帮你实现这个跳跃.不要等 ...

  6. SpringBoot配置定时任务的两种方式

    一.导入相关的jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  7. springmvc配置接口返回的数据是json

    首先要导入所需要的jar,使用maven方式管理jar包 <!-- 配置接口返回数据json --> <dependency> <groupId>com.faste ...

  8. django 之manytomany

    https://www.cnblogs.com/changbaishan/p/8056762.html https://blog.csdn.net/hpu_yly_bj/article/details ...

  9. 一例对一个或多个实体的验证失败。有关详细信息，请参阅“EntityValidationErrors”属性的解决

    这个问题相信只要是做MVC的,都碰到过,也都知道错误的原因,就是触发了定义的实例字段校验规则.比如定义的不为空,但是为空了,或者定义的字段长度为50,但是超过50了. 可是有时虽然知道是这样,但是具体 ...

  10. sublime text3：快捷键

    1.就近选择相同项:ctrl+d,按住ctrl,然后多次按d,就不断往下选择相同项 2.选择所有匹配项:alt+f3,一次性选中所有匹配项 3.ctrl+shift+a:在html中同时按这三个键,则 ...