前言
你好，我是喵喵侠。
还记得那天傍晚，我正对着电脑调试一个腾讯地图的热力图页面。项目是一个区域人流密度可视化模块，我加了一个淡蓝色的轮廓图层用于表示区域范围，热力图放在下面用于展示人流热度。效果一预览，瞬间眉头皱了起来：热力图几乎被轮廓“盖没了”！
经过一番摸索与咨询官方技术支持，问题终于迎刃而解。这篇文章就来分享这次踩坑经历，告诉你该怎么正确“安排”这两张图层的关系。
问题复现
为了复现这个问题，我在官方demo的基础上，写了一个问题demo如下：
<!--* @Author: Cooper cooperx@foxmail.com* @Date: 2025-06-11 09:24:38* @LastEditors: Cooper cooperx@foxmail.com* @LastEditTime: 2025-06-11 09:38:01* @FilePath: /mapjs/qqmap.html* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>腾讯地图热力图与轮廓示例</title><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">html,body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}#container {height: 90vh;width: 100vw;}#setOptions {position: absolute;top: 10px;left: 10px;z-index: 10;background: rgba(255, 255, 255, 0.9);border-radius: 8px;box-shadow: 0 2px 8px #0001;padding: 8px;}button {margin: 4px;padding: 6px 12px;border: 1px solid #555;border-radius: 4px;background: #f5f5f5;cursor: pointer;}</style><script charset="utf-8"src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head><body><div id="container"></div><div id="setOptions"><button id="show">显示/隐藏热力图</button><button id="data">更新数据</button><button id="radius">改变半径</button><button id="gradient">改变颜色</button><button id="opacity">改变透明度</button><button id="destroy">销毁热力图</button><button id="toggleContour">显示/隐藏轮廓</button></div><script>window.onload = function () {// 创建地图var map = new qq.maps.Map(document.getElementById("container"), {center: new qq.maps.LatLng(39.9847, 116.3074),zoom: 12});// 创建热力图对象var heat = new qq.maps.visualization.Heat({map: map,radius: 30,});// 获取热力数据var data = getHeatData();heat.setData(data);// 以热力图中心点为中心，生成覆盖热力图的轮廓function generateCircleContour(center, radius, pointsCount) {var contour = [];for (var i = 0; i < pointsCount; i++) {var angle = 2 * Math.PI * i / pointsCount;var lat = center.lat + radius * Math.sin(angle);var lng = center.lng + radius * Math.cos(angle);contour.push(new qq.maps.LatLng(lat, lng));}// 闭合多边形contour.push(contour[0]);return contour;}var center = { lat: 39.9847, lng: 116.3074 };var radius = 0.08; // 与热力图点分布半径一致var haidianPath = generateCircleContour(center, radius, 40);var contour = new qq.maps.Polygon({map: map,path: haidianPath,strokeColor: new qq.maps.Color(173, 216, 230, 0.8),fillColor: new qq.maps.Color(173, 216, 230, 0.5),});var contourVisible = true;// 按钮事件document.getElementById("setOptions").addEventListener("click", function (e) {var target = e.target;switch (target.id) {case "show":if (heat.visible) {heat.hide();} else {heat.show();}break;case "data":data = getHeatData(200);heat.setData(data);break;case "radius":let radius = heat.getRadius();heat.setRadius(radius + 10 > 80 ? 20 : radius + 10);break;case "gradient":let gradient = heat.getGradient();gradient[1.0] = "#fff";heat.setGradient(gradient);break;case "opacity":let opacity = heat.getOpacity();opacity = [0.1, 0.8];heat.setOpacity(opacity);break;case "destroy":heat.destroy();break;case "toggleContour":contourVisible = !contourVisible;contour.setMap(contourVisible ? map : null);break;default:}});function getHeatData(cnt, max, min) {let data = [];let center = { lat: 39.9847, lng: 116.3074 };cnt = cnt || 100;max = max || 100;min = min || 0;for (let index = 0; index < cnt; index++) {let r = Math.random() * 0.08;let angle = Math.random() * Math.PI * 2;let heatValue = Math.random() * (max - min) + min;data.push({lat: center.lat + r * Math.sin(angle),lng: center.lng + r * Math.cos(angle),value: heatValue});}return { max: max, min: min, data: data };}}</script>
</body></html>
可以看到这样效果如下图所示，热力图被盖住。
解决办法
我咨询官方给出解决办法是，设置热力图的层级比轮廓大就可以了，也就是设置zIndex。
设置了层级后，效果如下，这样就明显多了！
总结
通过本文的介绍，相信你已经掌握了腾讯地图中热力图被遮挡的解决技巧 —— 只需要添加 zIndex 属性，就能轻松让热力图“浮上来”。
这个问题本身不复杂，但由于文档提示不足，很容易被忽略。很多开发者第一时间想到的是换透明度、调整颜色，其实只差了一个小小的 zIndex。
这种操作看似简单，其实很多人都没用过，写这篇文章就是为了帮大家少走弯路。
如果你也觉得有帮助，记得点赞、收藏、关注支持我哟～我们下篇地图踩坑笔记再见！
)
，日历_项目里程碑示例（CalendarView01_22）)
