area标签不支持自适应，coords始终绑定图片naturalwidth/height；css缩放必致热区偏移，需js监听load/resize动态重算并setattribute('coords')，或改用原生响应式svg方案。
area 标签本身不支持自适应，必须用 JS 重算 coords
浏览器原生 area 的 coords 值永远绑定图片原始尺寸（img.naturalWidth/img.naturalHeight），CSS 缩放、max-width: 100%、width: 50vw 都会让热区偏移——这不是 bug，是规范行为。所谓“自适应插件”，本质就是监听缩放并动态更新 area.coords 字符串的 JS 脚本，没有魔法。
常见错误现象：图片在桌面显示正常，移动端点击失效；或热区只在刷新瞬间准，滚动/旋转后立刻错位。
- 必须等
img完整加载（load事件）后才能读取naturalWidth，否则值为 0 - 需同时监听
resize和orientationchange（iOS Safari），仅靠resize不够 - 不要直接修改
area.coords属性，应赋值给area.setAttribute('coords', newCoords)，避免部分浏览器忽略属性变更 - 缩放比 =
img.offsetWidth / img.naturalWidth（宽高比不一致时，取 min 或分别计算，按 shape 类型决定）
如何手写一个最小可用的自适应函数
不用引入任何插件，20 行内可搞定基础适配。关键不是“多强大”，而是“不漏事件、不崩错值”。
function updateImageMap(img, mapName) {
const imgEl = document.querySelector(img);
const mapEl = document.querySelector(`map[name="${mapName}"]`);
if (!imgEl || !mapEl) return;
<p>const scale = imgEl.offsetWidth / imgEl.naturalWidth;
mapEl.querySelectorAll('area').forEach(area => {
const coords = area.coords.split(',').map(Number);
const scaled = coords.map(v => Math.round(v * scale));
area.setAttribute('coords', scaled.join(','));
});
}</p><p>// 使用示例：@@##@@
updateImageMap('#floor-img', 'floor');
window.addEventListener('resize', () => updateImageMap('#floor-img', 'floor'));
document.querySelector('#floor-img').addEventListener('load', () => updateImageMap('#floor-img', 'floor'));
</p>
- 矩形
rect和圆形circle只需统一缩放所有坐标值 - 多边形
poly同样适用，但要注意顶点顺序不能乱，map()保持原顺序 - 如果图片宽高比被 CSS 强制拉伸（如
height: 100%且父容器高度不定），则需分别计算 X/Y 缩放比，再对 coords 中奇偶位分别处理
为什么推荐 SVG 替代 map+area？
不是“插件不好”，而是 map+area 的坐标模型与响应式天然冲突。SVG 的 <rect></rect>、<circle></circle>、<polygon></polygon> 天然基于 viewBox 缩放，无需 JS 计算，且支持完整 ARIA、伪类、transition。
-
<svg viewbox="0 0 1200 800"><image href="plan.png"></image><rect x="50" y="30" width="130" height="90" href="./room.html"></rect></svg>—— 所有尺寸自动适配 - 每个热区可加
aria-label、tabindex="0"、:hover样式，无障碍和交互体验远超area - 工具链成熟：Figma 导出 SVG 热区、VS Code 插件校验结构、Lighthouse 自动检测可访问性
- 唯一代价：需要把
area的href搬到<a></a>包裹的 SVG 元素上，或用 JS 绑定click
容易被忽略的兼容性断点
很多项目调试半天才发现问题不在 JS，而在 DOM 结构或上下文隔离。
-
<map></map>必须和<img src="plan.png" usemap="#floor" id="floor-img">在同一文档流，若img在<picture></picture>、<figure></figure>或 Shadow DOM 内，usemap默认失效 - 某些 CMS 或前端框架（如 Vue SSR、Next.js）会在服务端渲染时剥离
<map></map>，导致首屏无热区，需在useEffect或mounted钩子中补全 - iOS Safari 对小面积
poly热区触控精度差，即使坐标算准了，也可能点不中——必须保证缩放后最小边 ≥ 44px，否则加touch-action: manipulation到img -
area不支持title，也不响应mouseenter，所有悬停反馈、键盘导航、焦点管理都得 JS 补足，别指望纯 HTML
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
