HTML的area标签通过JS获取动态坐标的方法-html教程-PHP中文网

area元素无真实布局，需通过img尺寸与coords计算真实坐标：先获img视口位置和缩放比，再将coords数值按比例转换并叠加偏移。

html的area标签通过js获取动态坐标的方法

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转成页面中的真实像素位置

假设你有一个，原始图是 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）：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

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 值和不匹配（大小写、#前缀、空格）
area 不在内部，或被注释/条件渲染代码包裹（React/Vue 中未挂载完成就执行 JS）
图片用了 background-image，而 area 只对标签生效
多个 area 区域重叠时，DOM 后序元素会覆盖前序——z-index 无效，顺序即层叠顺序
使用了 transform: scale() 缩放图片，此时 getBoundingClientRect() 已含变换，但 coords 仍需按原始尺寸换算，容易重复缩放