area 标签必须嵌套在 map 内且通过 usemap 属性与 img 关联，coords 坐标需按 shape 类型规范书写，click 事件须绑定到 area 元素本身，alt 属性不可省略，仅适用于静态粗粒度热区。
area 标签必须嵌套在 map 内部才能生效
单独写 <area> 不会响应点击，浏览器直接忽略。必须配合 <map> 和 usemap 属性联动：<img> 的 usemap 值要和 <map> 的 name 完全一致（包括大小写），且不能带 # 前缀。
常见错误：
-
usemap="#china-map"对应<map name="china-map">✅ -
usemap="#china-map"对应<map name="China-Map">❌（大小写不匹配） -
usemap="china-map"对应<map name="china-map">✅（#不是必需的）
coords 坐标格式取决于 shape 类型
中国地图热区通常用 shape="poly" 描点，coords 是一串按顺时针/逆时针顺序排列的 x,y 坐标对，用英文逗号分隔，不能有空格或换行。
示例（新疆区域简化轮廓）：
立即学习“前端免费学习笔记（深入）”；
<area shape="poly" coords="120,80,135,75,142,90,130,105" href="#" alt="新疆">
关键注意点：
- 坐标是相对于图片左上角（0,0）的像素值，不是百分比
- 务必先用图像编辑工具（如 Photoshop、GIMP）或在线 map 工具（如 image-map.net）导出 coords，手算极易错位
- poly 形状至少需要 3 个点（6 个数字），少于 6 个会被忽略
click 事件监听需绑定到 area 元素本身
不能只给 <img> 加 click —— 热区逻辑在 <area> 上。推荐用事件委托或直接绑定：
document.querySelectorAll('map area').forEach(area => {
area.addEventListener('click', function(e) {
e.preventDefault(); // 阻止 href 跳转（如有）
console.log(this.alt); // 输出 '新疆'、'广东' 等
});
});
如果用 jQuery，注意 $('area') 在某些旧版 IE 中可能不生效，建议用原生方法。
补充说明：
-
alt属性不是可选的，它是无障碍访问和调试的关键依据 - 避免同时设置
href和 JS click —— 容易触发两次行为，优先用 JS 控制逻辑 - 移动端需加
cursor: pointer和touch-action: manipulation提升响应感
高精度地图热区的实际限制
用 <area> 实现省级热区可行，但想精确到地级市甚至县域，就会遇到硬伤：
- 全国地图图片缩放后，小区域 coords 偏差被放大，用户点击边缘容易失效
- 相邻省份边界线复杂（如甘肃、陕西、四川交界），poly 坐标极易重叠或漏缝
- 无法响应 hover 或 tooltip，仅支持 click（CSS 伪类对
<area>无效）
真要支持缩放、悬停、数据联动，得换 SVG 地图 + <path> + D3 或 Leaflet；<area> 只适合静态、固定尺寸、粗粒度（省/直辖市）的简单跳转场景。
