我们常常看到一些分析报告中将用户实际分布信息展示在地图中，可以很直观地看到具体哪些片区的用户活跃度高，根据这些片区的特征可以有效分析出用户群体的一些基本性质，以生鲜电商为例，比如提取出近半年较为活跃的用户订单配送地址均为一些小区，那么可以判断出这些用户都是一些家庭用户，可以根据这些家庭用户的性质策划一些场景化的活动，比如周末聚餐，食材与菜谱全套推荐等。
热力图样例
那么如何制作这样的热力图呢？其实非常简单，没有编程经验的同学也能很快学会，只需要简单的Excel操作就可以了。
1.数据准备
用户在使用App或者线上购物时，其位置信息都会被记录在后台，以经纬度的形式存储在公司数据库中，只要把这些经纬度信息提取出来就可以了，随便找一个研发小哥都能很快把数据调取出来，拿到的数据是这样的：
经纬度原始数据
数量可以是这个地址的订单量、用户数量、App打开次数等等指标，只要是想衡量某个地区某个指标的密度就行。
接下来在excel里处理一下，将三个字段连接在一起，每一行加工成如下的形式，加粗的部分为经纬度数值。
{"lng":116.191031,"lat":39.988585,"count":10},
{"lng":116.389275,"lat":39.925818,"count":11},
{"lng":116.287444,"lat":39.810742,"count":12},
{"lng":116.481707,"lat":39.940089,"count":13},
{"lng":116.410588,"lat":39.880172,"count":1999},
{"lng":116.394816,"lat":39.91181,"count":15},
{"lng":116.416002,"lat":39.952917,"count":16}
2. 修改代码
用notepad或者记事本将本段代码复制进去，找到var points 这一行，将刚刚加工好的数据复制进去，注意最后一行没有逗号。
<!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://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
<div class="input-item">
<button class="btn" onclick="heatmap.show()">显示热力图</button>
</div>
<div class="input-item">
<button class="btn" onclick="heatmap.hide()">关闭热力图</button>
</div>
</div>
<script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的key值"></script>
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.418261, 39.921984],
zoom: 11
});
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'
}
*/
});
var points =[
{"lng":116.191031,"lat":39.988585,"count":10},
{"lng":116.389275,"lat":39.925818,"count":11},
{"lng":116.287444,"lat":39.810742,"count":12},
{"lng":116.481707,"lat":39.940089,"count":13},
{"lng":116.410588,"lat":39.880172,"count":1999},
{"lng":116.394816,"lat":39.91181,"count":15},
{"lng":116.416002,"lat":39.952917,"count":16}
];
//设置数据集：
heatmap.setDataSet({
data: points,
max: 100
});
});
//判断浏览区是否支持canvas
function isSupportCanvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>
</body>
</html>
复制位置示意
3.执行代码，完成热力图
打开浏览器，输入地址：https://lbs.amap.com/api/javascript-api/example/selflayer/heatmap ；进入高德地图开放平台，界面如下。
高德地图开放平台界面
将刚刚修改完的代码复制到红框中，点击运行，热力图就制作完成了。
4.补充说明
提取数据时一定要确定清楚，取得的经纬度是否与高德地图坐标系一致，如果不一致，还需要对经纬度进行转换，高德地图与腾讯地图用的一套坐标系，百度地图用的另一套坐标系。
如果您觉得我的文章有意思，欢迎关注哦，定期分享原创运营、数据分析干货知识
网友评论