用这些步骤，就能在网页展示高德地图热力图看人流密度啦

众多开发者于进行高德地图热力图接入操作时，极易在数据格式转换以及图层加载顺序方面遭遇阻碍停顿下来不行，常常代码撰写无误然而于地图之上却呈现出全然空白一片的状况。在本篇文章之中我会凭借实际操作所获取的经验，一步一步亲自带着你避开这些容易出问题让你踩坑的地方，达成一个具备高精度性能、能够实现相互交互的热力图。

获取Key的避坑指南

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

好多人在申请高德地图Key这点上面的时候，是直接通过复制粘贴这种方式处理完就算得了，然而呢，页面出现了报错情况显示“INVALID_USER_KEY”。这里存在一个细节之处：要是你处于本地测试这种状况（运用的是127.0.0.1或者localhost），那么在申请Key之际一定要于“服务平台”当中选择“Web端”，而且在IP白名单那里要留空或者填写0.0.0.0/0，不然的话会因为域名校验失败从而没办法加载地图。

又一个常见的误区在于，错误地使用了JavaScript API的安全密钥。高德自2.0版本起引入了securityJsCode，这一代码需在你初始化地图之前，经由window._AMapSecurityConfig来进行配置。如若你的代码出现了安全错误，你便可以检查一下，是否遗漏了此配置步骤，尤其是那些运用了全新控制台的开发者。

地图容器的样式陷阱

打造地图容器之际，好些新手径直于HTML之中放置一个div，然而却忘掉去设定其宽度与高度。这乃是地图无法呈现出来的最为常见的缘由。我提议你于CSS里硬性给此容器设定一个确切明晰的高度，诸如height: 100vh亦或是固定的像素数值，与此同时父亲元素同样得具备高度，不然地图会收缩成为一条线。

用来盛放内容的容器，也就是代码里的div，其id属性，必须得保证在JavaScript代码当中被引用时的名称，是完全一模一样的。我有过这样的经历，曾经因为不小心，把表示容器的代码写成了id="container"，却写成了id="containers"，最后调试了好长一段时间，才发现是这个问题的相应案例。提议采用具备语义化的命名方式，就像那种样式，比如代码中的 map-hot-container ，如此一来，在后续进行维护的时候，也会显得更加清晰明了。

初始化地图的核心参数

当对地图对象进行初始化操作时，new AMap.Map()内的参数配置会对用户体验起到决定性作用，除了那个必须填写的容器id之外，zoom初始缩放级别推荐被设置成11，此级别不但能够清晰地看清城市轮廓，而且还不会致使数据点变得过于密集，center中心点坐标建议依据你的数据集中计算得出一个平均值，而并非直接写入一个固定坐标。

var map = new AMap.Map('map', {
    zoom: 11,
    center: [116.397428, 39.90923] // 这里是地图初始化时的中心点经纬度
});

存在着一个关乎性能优化的非常关键的要点，在开始进行初始化操作的时候，能够把那称作viewMode的设置成3D这种状态，如此一来热力图叠加之后所呈现出的视觉方面的效果就会显得更加具有立体感。与此同时，为了达成减少初始化阶段资源消耗的目的，建议把一些并非必要的图层予以关闭，就像举例的features: ['bg', 'point']这种情况，仅仅加载背景以及兴趣点，能够使得地图加载的速度提高大概20%。

热力图数据格式的精髓

很多人手上拿着数据，却不晓得该如何将其喂给热力图，实际上，高德所要求的数据格式极为严格，它是一个数组，数组当中的每一项都是一个对象，这个对象必须包含lng、lat这两个经纬度字段，以及count权重值。这里存在一个坑，如果你的count值过大或者过小，就会致使热力图呈现出一片红或者根本看不见。

拿我的经验来讲，在把数据传进去之前，要先进行一回归一化处理。就好比你后台返回的数据当中，最大值是10000，能够用Math.log(count)去取对数当作权重，利用这样的方式能够防止个别极值点将整体分布给掩盖掉。除此之外，当数据量超出2000个点的时候，建议在前端开展一次聚合抽稀，不然的话就会致使浏览器出现卡顿的情况。

var heatmap;
map.plugin(["AMap.Heatmap"], function() {
    heatmap = new AMap.Heatmap(map, {
        radius: 25, // 热力图的半径
    });
});

图层配置的参数优化

当去创建热力图图层之际，AMap.Heatmap的配置选项乃是决定图是否好看的关键所在。radius半径需要依据你的缩放级别进行动态调整，于市区级别设置为20，等到全国级别时就要设置为5，不然的话就会糊成一团。我一般会监听地图的zoom事件，从而实时更新这个值。

需对opacity透明度以及gradient颜色渐变做精心调校，透明度设定为0.6为宜，如此既能看清底图，又可突出热力，渐变颜色我常用['blue', 'green', 'yellow', 'red']这般序列，由冷至暖表示密度从低往高，十分直观，要记得设置visible: true，好多人会忘掉开启此开关。

var points = [
    {"lng":116.418261, "lat":39.921984, "count":50},
    {"lng":116.423332, "lat":39.916532, "count":51},
    {"lng":116.419787, "lat":39.930658, "count":15},
    // 更多数据点
];
heatmap.setDataSet({
    data: points,
    max: 100 // 数据中的最大值
});

数据添加与图层挂载顺序

将数据给予热力图对象所用的那个setDataSet操作完成之后，先别急着把它用那个add操作添加到地图之上。这儿存在着一个挺小的技巧：需要先去调用一下热力图的那个hide方法，等到整个地图已经完全渲染完成（要经由监听那个complete事件来达成）之后，再用了那个show方法把它显示出来。这样做能够避免地图在初始化的整个过程当中由于同时去渲染数量众多的热力点从而出现白屏或者卡顿的情况。

此外，要是你想要进行动态更新数据，举例来说像是借助下拉框去切换不一样的区域，那就别反复地去创建新的 Heatmap 对象。正确的做法是重复使用同一个对象，调用它的 setDataSet 方法并传入新的数据，接着调用 reFresh 方法来强制实行重绘。如此一来内存的使用率就会大幅降低，在页面切换数据的时候也不会有延迟的感觉。

在看完这篇教程之后，你有没有在实际的开发过程当中遇到过别的有关地图渲染的奇怪问题呢？比如说热力图在某些手机浏览器之上不显示，欢迎在评论区域留言去分享你的踩坑经历，我们一同探讨解决方案，同时也不要忘记点赞收藏，以便于以后进行查阅。

heatmap.setMap(map);