纯html无法实现地图热力图，需用leaflet+leaflet.heat组合；数据格式为[纬度,经度,权重]三元组，中国中心坐标35.8617,104.1956，缩放级4～5；注意经纬度顺序、坐标桥接与容器尺寸同步。
纯 HTML 做不了地图热力图——它没有坐标系、不理解经纬度、也不能自动把数值映射成颜色梯度。所谓“HTML 实现”，实际是选对技术栈+绕过常见坐标陷阱。
用 Leaflet + leaflet.heat 最快跑通中国热力图
这是当前（2026 年）前端项目里最稳、最轻、移动端兼容最好的组合，不需要后端、不卡顿、缩放不失真。
-
L.heatLayer内置坐标同步逻辑，自动响应moveend和zoomend，不用自己写重绘逻辑 - 数据格式必须是
[lat, lng, weight]三元组数组，不能是对象，否则leaflet.heat会静默失败 - 中国地理中心建议用
[35.8617, 104.1956]，不是北京坐标；缩放级别设为4～5才能完整显示疆域，设成10会只看到华北一小块 - 如果热力点全堆在左上角不动，大概率是经纬度顺序反了：Leaflet 要
[纬度, 经度]，而百度/高德是[经度, 纬度]，硬套会偏移上千公里
heatmap.js 直接挂 body 必然错位
很多人抄文档把 HeatmapOverlay 实例 append 到 document.body，结果热力点固定在页面左上角，拖动地图完全不跟着走——这不是 bug，是设计如此。
-
heatmap.js本身是通用 canvas 热力库，和地图坐标系零耦合；它只认像素坐标，不管你是地图还是 div - 必须用桥接层（如
HeatmapOverlay的onAdd方法）把地图的latLngToLayerPoint转换结果喂给它 - 更简单的方式：别单独引
heatmap.js，直接用leaflet.heat插件，它已封装好所有坐标桥接 - 若坚持用原生
heatmap.js，每次地图移动后得手动调heatmap.setData(points.map(p => map.latLngToLayerPoint(p)))
百度地图 API 的热力图要开插件权限
百度地图的 BMapLib.HeatmapOverlay 不是默认可用功能，需要在控制台单独开通「热力图」服务，否则 setDataSet 会报 undefined is not a function。
- 引入顺序不能错：
BMap必须在BMapLib之前加载，且src中的ak参数必须带全，漏一个字符就白屏 - 坐标必须用
BMap.Point(lng, lat)（注意：这里是经度在前），和 Leaflet 完全相反 - 热力图图层需显式调用
map.addOverlay(heatmapOverlay)，只 new 不 add 就不会显示 - 移动端 touch 事件默认被地图拦截，要加
map.disableDragging()才能让热力图响应 hover，但代价是地图不能拖拽——得权衡
Canvas 自绘热力图时 getBoundingClientRect() 比 window.innerWidth 可靠
当热力图嵌在 flex 或 grid 面板里，window.innerWidth 返回的是整个视口宽度，而容器可能只占一半；用它算格子尺寸会导致严重挤压或溢出。
- 必须用
container.getBoundingClientRect().width拿真实渲染宽度，再减去 padding/border - 别在
resize里直接重绘 canvas：高频触发会卡死，要用setTimeout防抖，延迟 100ms 再执行 - canvas 的
width和height属性是逻辑像素，CSS 设置的宽高是渲染像素；两者不一致时会模糊——重绘前务必同步：canvas.width = rect.width; canvas.height = rect.height; - 移动端横滚比缩放更可控，给容器加
overflow-x: auto，并禁用user-scalable=no，否则小屏下格子糊成色带
真正难的不是画出颜色，而是让每个点在任意缩放、任意设备、任意坐标系下，都落在它该在的位置——这取决于你选的坐标转换链是否闭环，而不是代码行数多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
