area标签必须嵌套在map内，href/src不能直接绑定JSON数据；需用JavaScript动态创建area元素并注入map，确保coords格式正确、name属性匹配、响应式下做坐标缩放校正。
area 标签必须嵌套在 map 内，且 href/src 不能直接绑定 JSON 数据
浏览器原生不支持把 area 的 href、alt 或坐标 coords 直接从 JSON 动态注入——这些属性必须由 JavaScript 手动创建并挂载。常见错误是试图在 HTML 里写 <area data-json="..."> 然后幻想浏览器自动解析，结果点击无响应或坐标错位。
正确路径是：先定义空的 <map>，再用 JS 读取 JSON，遍历生成 area 元素，最后用 appendChild 或 innerHTML 注入到对应 map 中。
- JSON 中每个热区项至少需包含
shape（"rect"/"circle"/"poly"）、coords（字符串，如"10,20,100,80"）、href（或data-action） -
shape值必须小写，且与coords格式严格匹配：比如"circle"要三个数字（x,y,r），"poly"必须偶数个数字 - 别漏掉
map的name属性，且<img usemap="#xxx">中的#xxx必须与之完全一致
JSON 中 coords 字符串格式错误会导致 area 完全失效
浏览器对 coords 的解析极脆弱：多一个空格、少一个逗号、出现负数但没加引号（其实不用引号，但 JS 拼接时容易误加），都会让整个 area 不响应点击。这不是警告，是静默失败——控制台无报错，只是点不动。
实操建议：在 JSON 中统一用字符串存 coords，JS 创建元素时不做任何 split/join 转换，直接赋值给 el.coords；若需运行时计算坐标（如适配不同屏幕），务必用 Math.round() 并检查是否为有效数字序列。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
{"coords": [10, 20, 100, 80]}→ JS 中若直接area.coords = item.coords，会转成"10,20,100,80"，看似对，但若数组含undefined就变成"10,,100,80"，失效 - 安全写法：
area.coords = Array.isArray(item.coords) ? item.coords.join(',') : item.coords - 调试技巧：插入后立即
console.log(area.coords)，确认输出是纯数字逗号分隔字符串，无空项、无引号、无空格
动态 area 绑定 click 事件必须用事件委托或逐个 attach
直接对 area 元素调用 addEventListener 是可行的，但要注意：如果后续 JSON 更新、热区重绘，旧的 area 被移除，其监听器不会自动销毁，可能引发内存泄漏或重复触发。更稳妥的是用事件委托——把监听器挂在 map 上，靠 event.target 判断是否为 area。
但注意：<map> 本身不冒泡 click 事件，必须监听其父容器（如包裹 img 和 map 的 <div>），或改用 mousedown/pointerdown（兼容性更好）。
- 推荐做法：给
img外层<div class="image-container">绑定pointerdown，再通过document.elementFromPoint(x, y)检查是否落在某个area上（需配合getBoundingClientRect()做坐标换算） - 简单场景可逐个绑定：
area.addEventListener('click', e => { e.preventDefault(); handleAreaClick(item); })，但每次重绘前必须先map.querySelectorAll('area').forEach(el => el.remove()) - 别用
onclick="..."字符串方式绑定，JSON 里的函数名无法被安全执行，XSS 风险高
响应式图像下 area 坐标会失准，必须做缩放校正
这是最常被忽略的一点：当 <img> 设置了 width: 100% 或 max-width，其实际渲染尺寸与原始像素尺寸不同，而 area.coords 是按原始图尺寸写的。浏览器不会自动缩放 coords，导致热区漂移。
解决方案不是“重写 JSON”，而是运行时按比例换算。关键数据是：原始图宽高（存在 JSON 中或服务端返回）、当前 img 的 clientWidth/clientHeight。
- 必须在
img加载完成（onload）和窗口大小变化（resize）后重新计算所有coords - 缩放因子 =
currentWidth / originalWidth（宽高缩放不一致时，优先按宽缩放，或取最小值避免溢出） - 对
"poly"坐标，要对每两个数字（x, y）分别乘以缩放因子；"circle"的半径也要乘，圆心坐标同理 - 不要依赖
window.devicePixelRatio，它影响的是绘制精度，不是布局尺寸
