poly的coords必须为偶数个纯整数，两两组成(x,y)坐标点，按顺序解析并自动闭合，原点为图片左上角，需基于naturalWidth/Height取点；常见错误包括奇数坐标、小数、单位、错序或图片缩放失配。
poly的coords必须是偶数个整数，两两配对当顶点
不是“随便列一堆数字”，poly 的 coords 是严格按顺序解析的：每两个连续数字组成一个 (x, y) 坐标点，总数必须为偶数。少一个、多一个、错一位，整个区域就偏移或失效。
常见错误现象：点击区域完全不响应，或高亮框飘在图外、形状扭曲成细线——大概率是坐标数奇数、混入小数、漏掉逗号或用了单位（如 10px）。
-
coords只能是纯整数，例如"120,80,135,60,150,80,140,110"→ 解析为 (120,80)→(135,60)→(150,80)→(140,110)，浏览器自动闭合回 (120,80) - 首尾点**不要重复**，写成
"120,80,135,60,150,80,140,110,120,80"反而可能让第 5 对点覆盖前 4 对，导致区域异常 - 坐标原点是图片左上角
(0,0)，单位是像素 —— 所以必须用图片原始尺寸（naturalWidth/naturalHeight）做基准取点，不能靠截图后缩放再量
描点顺序影响区域填充方向，但不决定是否生效
顺时针或逆时针都行，浏览器都能正确填充。真正要命的是顺序错乱：比如把本该连成“耳朵”的三个点，写成 耳尖,下巴,耳垂，结果连线直接横穿脸中部。
使用场景里最常出问题的是人体结构图、中国省份轮廓这类带凹陷或孔洞的图形。虽然 poly 支持自相交和凹多边形，但人眼难校验，建议用工具辅助。
立即学习“前端免费学习笔记（深入）”；
- MapEdit、Inkscape 导出 SVG 再转坐标，比手敲可靠得多
- 描点时优先选边界转折处（如省界拐角、关节突起），一般 30–50 个点就能兼顾精度与维护性
- 用 Chrome 开发者工具悬停
<area>元素，看高亮是否贴合预期区域；不贴合就说明坐标没对齐原始图
为什么点了没反应？先查这三件事
90% 的“poly 不工作”不是语法错，而是环境错位。代码看着对，但实际运行时坐标已失效。
-
<img>的usemap属性值（如"#map-china"）必须和<map name="map-china">的name完全一致，包括大小写和有无#前缀（usemap要带#，<map>的name不带） - CSS 没偷偷缩放图片：
width: 100%、transform: scale()、zoom都会让像素坐标失准 ——poly不会自动适配 - 多个
<area>重叠时，DOM 顺序决定响应优先级：前面的area会挡住后面的，调试时可临时删掉其他区域单独测
想响应式？别硬算比例，换 SVG 或 JS 动态重映射
poly 的坐标是死的，只认原始图尺寸。页面缩放、屏幕 DPR 变化、容器宽度调整，都会让它“脱靶”。硬写 JS 监听 resize 并按比例重算所有 coords，逻辑脆弱且易漏边缘 case。
真正可行的路只有两条：
- 改用
<svg>+<path>：天然矢量、缩放不失真、支持 CSS 选择器和事件委托 - 保留
<map>，但用 JS 在load和resize时，按img.naturalWidth / img.clientWidth动态重写每个area.coords - 复杂轮廓（如带岛屿的省份、内脏器官）直接放弃
poly，上 Leaflet 或 Canvas 自绘 ——<map>本质是静态快照，不是交互引擎
最易被忽略的一点：你拿到的坐标，是不是从一张被压缩、裁剪、加了边框的图上取的？只要原始图和线上图像素尺寸不一致，coords 就全作废。
