area标签的coords值必须基于图像原始像素尺寸计算，而非显示尺寸或设计稿标注；shape仅支持rect、circle、poly、default四种值，且coords数量与格式须严格匹配；推荐用mapedit等工具按原始尺寸描点导出。
area 标签的 coords 值不是靠猜的，也不是靠 CSS 测量的——它必须基于图像原始像素尺寸，从左上角 (0,0) 开始数。用错坐标单位、混淆缩放状态、或误信设计稿标注，是 90% 的热区错位根源。
coords 坐标必须对应图像原始尺寸，不是显示尺寸
浏览器只认原始图片文件的宽高（比如 china-map.png 是 1200×800 像素），coords 所有数值都按这个基准计算。即使你用 CSS 把图片缩放到 600×400 显示，coords 依然要填原始尺寸下的像素值。
- 错误做法：用浏览器开发者工具直接在缩放后的图片上取点，抄下 DevTools 显示的 clientX/clientY
- 正确做法：把图片在图像编辑器（如 Photoshop、GIMP）或 MapEdit 中打开，启用标尺/网格，确认当前视图是 100% 缩放，再读取像素坐标
- 验证方法：临时把
<img>的width和height属性设为原始尺寸（如width="1200" style="max-width:90%"），此时热区应严丝合缝贴合图形
shape 和 coords 的组合规则不能写错
shape 只接受四个合法值：rect、circle、poly、default。任何其他字符串（比如 square、triangle、ellipse）都会被忽略，导致该 <area> 失效或退化为 rect 行为。
-
shape="rect"→coords必须且仅能有 4 个值：x1,y1,x2,y2（左上角 + 右下角） -
shape="circle"→coords必须且仅能有 3 个值：cx,cy,r（圆心 x、y + 半径） -
shape="poly"→coords至少 6 个值（即 ≥3 个顶点），格式为x1,y1,x2,y2,x3,y3,...；浏览器会自动闭合多边形，无需重复首尾点 -
shape="default"→coords不需要写，写了也无效
用 MapEdit 工具导出坐标比手动测量靠谱得多
手动数像素点效率低、易出错，尤其对省界、海岸线这类复杂轮廓。MapEdit（v5.2）是目前最稳定的免费桌面工具，支持导出标准 HTML <area> 代码。
- 导入图片后，务必先点击菜单 Image → Set Image Size，填入图片真实宽高（不是屏幕显示尺寸）
- 描点多选“Snap to edge”可吸附到边界，减少抖动；每个省份建议 30–50 个点，太少失真，太多无意义
- 导出时勾选 “Use absolute coordinates”，避免生成相对百分比坐标（HTML 原生不支持）
- 导出的
coords值可能带空格或换行，粘贴进 HTML 前用正则\s+替换为单个逗号，确保格式为120,340,180,370,210,350
常见错位现象和快速排查路径
热区点不中、偏移、大小异常——别急着重画，先看这三项：
- 检查
<img>的usemap是否指向正确的<map name="xxx"></map>，注意#符号是否遗漏，name 值是否含空格或特殊字符 - 用浏览器 DevTools 查看
<map></map>是否被解析：右键<map></map>元素 → Break on > subtree modifications，刷新页面，看是否有 JS 动态删改了它 - 临时禁用所有 CSS（包括
img { max-width: 100% }），观察热区是否回归正常位置——如果恢复，说明是缩放干扰，需用原始尺寸+CSS 容器控制布局
真正难的不是描点，而是让所有人（设计师、前端、测试）对「原始尺寸」和「坐标基准」达成一致。一旦底图换了分辨率，所有 coords 都得重算，没有捷径可绕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
