area 标签必须嵌套在 map 内且通过 usemap 属性与 img 关联，coords 坐标需按 shape 类型规范书写，click 事件须绑定到 area 元素本身，alt 属性不可省略，仅适用于静态粗粒度热区。
area 标签必须嵌套在 map 内部才能生效
单独写 @#@#@#@#@#@#@#@#@#@0）导出 coords，手算极易错位
<li>poly 形状至少需要 3 个点（6 个数字），少于 6 个会被忽略</li>
<h3>click 事件监听需绑定到 area 元素本身</h3>
<p>不能只给 <code><img> 加 click —— 热区逻辑在 <area> 上。推荐用事件委托或直接绑定：
<area shape="poly" coords="120,80,135,75,142,90,130,105" href="#" alt="新疆">
如果用 jQuery，注意 $('area') 在某些旧版 IE 中可能不生效，建议用原生方法。
补充说明：
-
alt属性不是可选的，它是无障碍访问和调试的关键依据 - 避免同时设置
href和 JS click —— 容易触发两次行为，优先用 JS 控制逻辑 - 移动端需加
cursor: pointer和touch-action: manipulation提升响应感
高精度地图热区的实际限制
用 <area> 实现省级热区可行，但想精确到地级市甚至县域，就会遇到硬伤：
- 全国地图图片缩放后，小区域 coords 偏差被放大，用户点击边缘容易失效
- 相邻省份边界线复杂（如甘肃、陕西、四川交界），poly 坐标极易重叠或漏缝
- 无法响应 hover 或 tooltip，仅支持 click（CSS 伪类对
<area>无效）
真要支持缩放、悬停、数据联动，得换 SVG 地图 + <path></path> + D3 或 Leaflet；<area> 只适合静态、固定尺寸、粗粒度（省/直辖市）的简单跳转场景。
document.querySelectorAll('map area').forEach(area => {
area.addEventListener('click', function(e) {
e.preventDefault(); // 阻止 href 跳转（如有）
console.log(this.alt); // 输出 '新疆'、'广东' 等
});
});前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
