用+无法用于全景图热点，因等距柱状投影下像素坐标与经纬度呈非线性关系；应采用Three.js的Raycaster球面映射或原生JS手动换算经纬度，并注意移动端touch事件坐标校准及缩放兼容性问题。
用 <map></map> + <area> 给全景图加热点区域行不通
直接套用传统图像映射（<img usemap="#map" alt="HTML怎么给全景图做局部映射区域" >）在全景图上会失效——因为全景图（尤其是球面/等距柱状投影）的像素坐标和视觉角度是非线性映射的。<area shape="rect" coords="x1,y1,x2,y2"> 这套基于平面直角坐标的定位逻辑，对经纬度展开的全景图完全不适用。你拖动视角后，热点位置立刻偏移甚至消失。
Three.js 中用 Raycaster 实现球面坐标到屏幕坐标的实时映射
真正可行的方式是把全景图作为 Three.js 球体内表面纹理，所有交互基于三维空间计算：
- 用户点击或悬停时，用
raycaster.setFromCamera( mouse, camera )发射一条射线 -
raycaster.intersectObjects( [sphere] )获取交点世界坐标point - 将
point转为球面坐标：theta = Math.atan2(point.x, point.z)（经度），phi = Math.acos(point.y / radius)（纬度） - 再把
(theta, phi)映射回你预设的热点区域范围（比如某展厅的「入口」区域定义为theta ∈ [-0.3, 0.1],phi ∈ [0.2, 0.45]）
注意：球面半径必须与全景图纹理贴图方式一致（如使用 THREE.SphereGeometry(500, 64, 64)，则 radius = 500）；否则 phi 计算结果会失真。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
不用 Three.js？用 CSS + JS 手动做等距柱状图（Equirectangular）坐标换算
如果项目受限只能用原生 HTML/CSS/JS（无 WebGL），且全景图是标准等距柱状投影（宽高比通常 2:1），可手动换算：
立即学习“前端免费学习笔记（深入）”；
- 监听
mousemove，用event.offsetX / event.offsetY得到鼠标在<img alt="HTML怎么给全景图做局部映射区域" >上的归一化坐标：u = x / width,v = y / height - 转球面经纬度：
lon = (u - 0.5) * 2 * Math.PI,lat = (0.5 - v) * Math.PI - 每个热点区域存的是经纬度范围（如「咖啡区」：
lon ∈ [-0.8, -0.5],lat ∈ [0.1, 0.3]），每次移动都做包含判断 - 必须配合
transform: scale()或object-fit: cover的容器控制缩放，否则offsetX/Y会被 CSS 缩放干扰——建议固定<img alt="HTML怎么给全景图做局部映射区域" >尺寸并设style="max-width:90%"防模糊
容易被忽略的兼容性陷阱
移动端 touch 事件的 targetTouches[0].clientX 默认相对于视口，不是图片本身。必须用 getBoundingClientRect() 手动减去图片左上角偏移，再除以当前缩放比例（window.devicePixelRatio 在高清屏下常为 2 或 3）。漏掉这一层，iOS Safari 上热点会整体偏右下约 20%。另外，Safari 对 transform-style: preserve-3d 在 <img alt="HTML怎么给全景图做局部映射区域" > 上的支持不稳定，别试图用 CSS 3D 模拟球面——直接切到 Canvas 或 Three.js 更省事。
