具体脚本语言如下:

<!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. CKEditor 5

    1.官网 https://ckeditor.com/ckeditor-5/download/ 2.

  2. day09-数据库插入中文报错

    在向数据库表中插入中文时一直报错 MySQL的默认编码是Latin1,不支持中文,要支持中文需要把数据库的默认编码修改为gbk或者utf8. 1.需要以root用户身份登陆才可以查看数据库编码方式(以 ...

  3. day05-if-else语句

    1.Python条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块.Python程序语言指定任何非0和非空(null)值为true,0 或者 nu ...

  4. English-旅游英语及情景对话

    1.旅游英语:预订机票情景对话及常用句型 目前,越来越多的人都选择以飞机为出行方式.但是如何用一口流利的英语订机票呢?这里我们替你总结了一些情景对话,还有一些常用的句型.大家都来学一学吧~A:Good ...

  5. redis 学习笔记1(安装以及控制台命令)

    为什么要学习这个? 分布式技术必会,得益于redis的设计理念,内存数据库,epoll(多路复用)模型,单线程模型除去了锁和上下文切换,提高了性能.单线程保证执行顺序(轮询),在分布式环境下对于数据的 ...

  6. Android Studio安装插件提示was not installed: Cannot download的解决

    https://blog.csdn.net/xiayiye5/article/details/80510910 2.[Android Studio安装部署系列]三十二.Android模拟器Genymo ...

  7. docker-compose初试及命令基础

    转自:https://www.cnblogs.com/jsonhc/p/7811929.html 以一个简单的lnmp.yaml的配置文件进行讲解docker-compose命令的基础讲解,熟练掌握命 ...

  8. 尚硅谷springboot学习6-eclipse创建springboot项目的三种方法(转)

    方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效 新建spring boot项目 项目启动 方法二 1.创建Mave ...

  9. 【382】利用 namedtuple 实现函数添加属性

    namedtuple 能够实现类似类的效果,tuple 的元素可以通过属性的形式返回,如下所示: from collections import namedtuple Student = namedt ...

  10. jQuery图片延迟加载插件:jquery.lazyload

    ----------------------------------------------------------------------------------------------- clas ...