用+做点击区域仅适合静态固定尺寸场景；响应式缩放会导致coords偏移，usemap="#xxx"与必须严格配对且#不可省略，坐标基于原始图片尺寸，不支持原生响应式与无障碍访问。
直接说结论：用 <map></map> + <area> 做点击区域，只适合静态、尺寸固定、区域不随缩放变化的场景；一旦图片被 CSS 缩放或响应式拉伸，coords 就会偏移，热区“点不准”——这不是 bug，是设计使然。
usemap="#xxx" 和 <map name="xxx"></map> 必须严格配对
这是最常卡住人的第一步。浏览器要求 usemap 属性值**必须带 # 前缀**，且大小写、拼写、空格都要和 <map></map> 的 name 完全一致。
-
usemap="#province-map"→ 对应<map name="province-map"></map>（✅ 正确） -
usemap="province-map"→ 缺少#，完全失效（❌ 常见错误） -
usemap="#Province-Map"→ 大小写不匹配，Chrome 里可能“看似有效”，但 Safari 或旧版 Edge 会忽略（❌ 兼容性坑）
调试时右键图片 → “检查元素”，看 <img> 是否能高亮到对应的 <map></map>；如果没反应，先查这一步。
coords 坐标永远基于图片原始尺寸，不是显示尺寸
假设你有一张 1200×800 的中国地图 PNG，你在 PS 里量出广东省区域的多边形顶点是 102,345,138,320,165,355,...。这些数字只对 1200×800 有效。
- 如果用
<img style="max-width:90%" style="max-width:90%">显示，坐标不用改——浏览器会自动按比例映射（✅ OK） - 如果用
style="width: 50%"或max-width: 100%让图片响应式缩放，坐标就失效了（❌ 偏移必然发生） - 想支持缩放？只能用 JavaScript 监听
resize和load，按当前img.naturalWidth / img.offsetWidth比例重算所有coords（⚠️ 复杂且易出错）
area 的 shape 和 coords 写法要一一对应
三种基础形状的 coords 格式不能混用，否则区域不渲染或行为异常：
-
shape="rect"：需 4 个值，coords="left,top,right,bottom"（例如"100,200,300,400"） -
shape="circle"：需 3 个值，coords="centerX,centerY,radius"（例如"500,300,80"） -
shape="poly"：至少 6 个值，每对x,y表示一个顶点，"x1,y1,x2,y2,x3,y3,..."（首尾不自动闭合，要自己补）
漏写 alt 属性会导致部分屏幕阅读器跳过该区域，也影响 SEO；href 不写则无跳转，但建议显式写成 href="#" 并用 JS 阻止默认行为，避免意外跳页。
为什么现代项目越来越不用 <map></map>？
核心限制就两个：coords 无法响应式、无障碍支持弱。
- 没有键盘焦点管理，
tab键无法进入<area>，aria-label也不能直接加在<area>上（得靠 JS 模拟） - 区域高亮只能靠换图或 JS 操控
style，没法像 SVG 那样直接用 CSS 伪类或 transition 动画 - 真正需要地理精度或动态数据绑定时，SVG 或 Canvas + D3/Leaflet 是更可持续的选择
所以，如果你手头只有一张设计师给的 PNG，且区域固定、页面不缩放、不需要键盘导航——<map></map> 依然快、轻、可控；否则，别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
