map和area热点错位主因是坐标未按原始尺寸填写、usemap与map name不匹配或响应式缩放后未重算；二者必须逐字一致（含#、大小写、连字符），coords需基于naturalWidth/Height，响应式下须动态计算缩放比并绑定load/resize事件。
map 和 area 热点错位，90% 是坐标没按原始尺寸填、usemap 与 name 不匹配，或响应式缩放后没重算——浏览器不报错，只静默失效。
usemap="#xxx" 和 <map name="xxx"></map> 必须逐字一致
漏掉 #、大小写错、连字符/下划线混用，都会导致整个热区不可用。浏览器不会提示，<area> 标签直接被忽略。
-
usemap="#product-map"✅ 必须对应<map name="product-map"></map> -
usemap="product-map"❌ 缺#，完全无效 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map name="product_map"></map>❌ 下划线 ≠ 连字符，不匹配
调试时别靠眼扫：右键图片 →「检查元素」→ 复制 usemap 的值，再复制 <map></map> 的 name，用编辑器比对是否完全相同。
coords 坐标必须基于图片原始像素，不是 CSS 渲染尺寸
原始图是 1200×800，你用 img { width: 375px; height: auto; } 显示，coords="0,0,100,100" 仍按 1200×800 解析，实际热区只有约 31×21px，远低于触控最小推荐尺寸 44×44px。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 设计稿给的是缩放后坐标？必须反向换算：
原始x = 渲染x × (naturalWidth / offsetWidth) - 用 Photoshop 或 image-map.net 取点时，确认导出的是原始尺寸下的坐标
- 临时加
border: 1px solid red到<img alt="HTML区域映射热点错位如何修正" >，截图比对顶点是否落在目标边缘上
响应式页面中 coords 不会自动缩放，必须动态重算
原生 <map></map> 没有响应式能力。图片缩放、窗口 resize、DPR 变化都会让热区偏移，尤其在移动端。
- 记录原始尺寸：
const w = img.naturalWidth; const h = img.naturalHeight; - 计算缩放比：
const sx = img.offsetWidth / w; const sy = img.offsetHeight / h; - 按
shape类型分别处理：rect缩放全部 4 个值，circle缩放圆心和半径，poly逐对缩放每个x,y - 绑定事件：
img.addEventListener('load', updateCoords)+window.addEventListener('resize', updateCoords)
别跳过这步——否则热区在 iPhone 上基本点不准，且问题难以复现。
HTML 结构非法会让热区“消失”而不报错
<map></map> 必须在文档流中、不能被 display: none 或 visibility: hidden 包裹；<area> 必须严格嵌套在 <map></map> 内部，不能放在 <div> 或其他容器里。
<ul><li>常见陷阱：<code><map></map> 被套进 <div style="display:none"> → 热区失效
<li>
<code><area> 放在 <map></map> 外面 → 浏览器静默忽略
<map></map> 实际位置偏移打开开发者工具 Elements 面板，确认 <map></map> 真实存在于 DOM 中，且 <area> 是它的直接子节点——这是最常被忽略的底层前提。
