shape="poly"的coords必须首尾闭合，即最后一个坐标点需与第一个完全相同；坐标为相对于图片左上角的绝对像素值，不随响应式缩放变化；多区域重叠时dom顺序决定点击优先级。
shape="poly" 的 coords 坐标格式必须闭合
多边形热区用 shape="poly" 时，coords 列表里的坐标点**必须首尾闭合**——也就是说，最后一个点要和第一个点完全相同。浏览器不会自动补全，漏掉会导致热区显示异常或点击失效。
常见错误现象：<area shape="poly" coords="10,20,40,30,35,80"> 看似三个顶点，但没闭合，实际渲染可能不完整或被忽略。
- 正确写法示例：
<area shape="poly" coords="10,20,40,30,35,80,10,20"> - 坐标顺序按顺时针或逆时针均可，但必须连续、无跳变
- 建议用图像编辑工具（如 Photoshop）或 MapEdit 导出时勾选“自动闭合”选项，避免手误
coords 坐标值单位是像素，且原点在图片左上角
coords 所有数值都是相对于 <img> 左上角（0,0）的绝对像素位置，不是百分比，也不随容器缩放变化。这点直接影响响应式表现。
使用场景中容易踩坑：图片在移动端被 CSS 缩放后，热区仍按原始尺寸坐标触发，导致点击偏移甚至完全错位。
- 若图片宽高固定（如
width="800" height="600"），直接用工具测得的像素坐标可直接填入coords - 若图片使用
max-width: 100%; height: auto响应式布局，必须配合 JavaScript 库（如rwd-image-maps）动态重算坐标 - 调试时可用浏览器开发者工具临时加
outline: 1px solid red到area，观察是否覆盖目标区域（注意：area不支持 outline，需用 JS 模拟辅助线）
多边形顶点数不是越多越好
理论上 poly 支持任意数量顶点，但实际项目中，坐标点过多会带来两个隐性问题：HTML 体积膨胀、移动端渲染延迟。
性能影响明显出现在复杂地图类热区（如中国各省轮廓），单个 <area> 的 coords 超过 200 个数值时，部分低端 Android 浏览器会出现点击响应卡顿。
- 推荐策略：用 10–20 个关键锚点勾勒主体轮廓，舍弃毛刺细节（UI 同事通常也接受）
- 对精度要求高的区域，可拆分为多个小
poly区域，而非堆砌顶点 - MapEdit 或在线工具导出时，启用“简化路径”或“减少节点”选项，能自动合并相近点
area 标签顺序影响点击优先级
当多个 <area> 区域在视觉上重叠时，**DOM 顺序决定点击捕获优先级**：排在后面的 area 会覆盖前面的，哪怕它在 coords 上更小。
这跟 CSS 层叠无关，是浏览器客户端图像映射的底层行为。最容易被忽略的是默认区域（shape="default"）放在最后，结果所有点击都落到它身上。
- 调试技巧：把疑似被遮挡的
area临时移到<map></map>最末尾，看是否恢复响应 - 避免重叠设计：用图像工具预览各区域边界，确保逻辑上互斥
- 若必须重叠（如“整个图标+内部按钮”），优先用
shape="default"做兜底，并明确控制其href和alt
poly，而是让同一组 coords 在不同设备上都准——原图尺寸、CSS 缩放、DPR、浏览器解析差异，都会悄悄偏移那几个像素。别迷信“一次导出，到处可用”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
