area元素无真实布局，需通过img尺寸与coords计算真实坐标：先获img视口位置和缩放比，再将coords数值按比例转换并叠加偏移。
area元素本身没有getBoundingClientRect()，得靠img和coords联动
直接对 area 元素调用 getBoundingClientRect() 返回的是空矩形（{ width: 0, height: 0, top: 0, left: 0 }），因为 area 是纯语义标签，不渲染、不占布局流。真正有坐标的，是它所依附的 img 元素，以及你写死在 coords 里的像素值。
所以“获取 area 动态坐标”的本质是：读取 img.naturalWidth 和当前显示宽高 → 算出缩放比 → 把原始 coords 数值乘以该比例 → 再映射到页面视口坐标系中。
- 必须先确保
img已加载完成（监听load事件），否则naturalWidth可能为 0 -
img.offsetWidth/img.offsetHeight是当前渲染尺寸，不是 CSS 设置的width值（比如max-width: 100%下它会随容器变） - 不要用
img.clientWidth，它不含 border/padding，而视觉热区需覆盖整个渲染区域
如何用JS把coords转成页面中的真实像素位置
假设你有一个 <area shape="rect" coords="20,30,120,80">，原始图是 800×600，现在 img 渲染为 400×300，则缩放比为 0.5。你需要把每个 coords 值 × 0.5，再叠加 img 在页面中的偏移量。
实操步骤：
立即学习“前端免费学习笔记（深入）”；
- 用
img.getBoundingClientRect()获取图片左上角在视口中的left和top - 用
parseFloat(area.coords)拆解字符串（注意：不能用split(',')直接切，要防空格；推荐area.coords.match(/\d+/g)） - 按
shape类型分组处理：rect→4个数、circle→3个、poly→每2个为一组 - 对每组数字乘以缩放比（
img.offsetWidth / img.naturalWidth），再加到图片视口偏移上
示例片段（仅 rect）：
const img = document.querySelector('img[usemap]');
const area = document.querySelector('area[shape="rect"]');
const rect = img.getBoundingClientRect();
const scale = img.offsetWidth / img.naturalWidth;
const [x1, y1, x2, y2] = area.coords.match(/\d+/g).map(n => parseInt(n) * scale);
const realRect = {
left: rect.left + x1,
top: rect.top + y1,
right: rect.left + x2,
bottom: rect.top + y2
};移动端 resize 和 DPR 会让坐标计算更复杂
在 iPhone 或高 DPR 屏幕上，img.offsetWidth 返回的是 CSS 像素（device-independent pixels），但 getBoundingClientRect() 返回的是设备物理像素（受 window.devicePixelRatio 影响）。如果你要做精准点击判定（比如 canvas 覆盖热区），必须补偿 DPR。
- 不要只监听
resize，还要监听orientationchange（横竖屏切换时 layout 会重排） - DPR 变化时（如 Safari 切后台再回来），
getBoundingClientRect()可能突变，但offsetWidth不会——所以缩放比得重新算 - 避免用
document.body.clientWidth当基准，它不包含滚动条宽度，在 iOS Safari 中可能抖动
为什么 getBoundingClientRect() + coords 还是点不准
常见失效链路不是 JS 写错，而是 DOM 状态或结构问题：
-
img的usemap值和<map name="xxx"></map>不匹配（大小写、#前缀、空格） -
area不在<map></map>内部，或被注释/条件渲染代码包裹（React/Vue 中未挂载完成就执行 JS） - 图片用了
background-image，而area只对<img alt="HTML的area标签通过JS获取动态坐标的方法" >标签生效 - 多个
area区域重叠时，DOM 后序元素会覆盖前序——z-index 无效，顺序即层叠顺序 - 使用了
transform: scale()缩放图片，此时getBoundingClientRect()已含变换，但coords仍需按原始尺寸换算，容易重复缩放
最易被忽略的一点：poly 多边形顶点数为奇数时，浏览器解析失败但不报错，coords 被静默截断——务必检查 coords 字符串中逗号分隔后的数字总数是否为偶数。
