前言
你好，我是喵喵俠。
還記得那天傍晚，我正對著電腦調試一個騰訊地圖的熱力圖頁面。項目是一個區域人流密度可視化模塊，我加了一個淡藍色的輪廓圖層用于表示區域范圍，熱力圖放在下面用于展示人流熱度。效果一預覽，瞬間眉頭皺了起來：熱力圖幾乎被輪廓“蓋沒了”！
經過一番摸索與咨詢官方技術支持，問題終于迎刃而解。這篇文章就來分享這次踩坑經歷，告訴你該怎么正確“安排”這兩張圖層的關系。
問題復現
為了復現這個問題，我在官方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）)
