poly的coords顶点顺序必须连续单向不交叉，仅接受纯整数、逗号分隔无空格，数量为≥6的偶数，shape属性须小写"poly"，usemap与map name须完全一致。
poly的coords顶点顺序必须连续且不交叉
浏览器按coords字符串中数字出现的先后顺序，两两配对为(x, y)顶点，并依次连线；最终自动闭合首尾。所以顺序不是“随便列点”，而是决定多边形是否可识别、点击区域是否准确的关键。
常见错误现象：热区显示为细线、点击响应飘在图外、部分区域无法触发——大概率是顶点顺序跳变或交叉，比如本该顺时针绕一个省份轮廓，却把西北角、东南角、东北角、西南角混着写。
- 顺时针或逆时针都合法，但必须严格沿边界单向走（如从左上开始，一路描到右下再回起点）
- 禁止“Z字形”或“之字形”排列（如
"0,0,100,100,0,100,100,0"会画成X，不是四边形） - 凹多边形（如中国地图中的甘肃、山东半岛）可以正常工作，但人眼难校验，建议用Inkscape导出SVG路径后转坐标
coords里不能有小数、空格或单位，否则整个area失效
coords只接受纯整数、英文逗号分隔、无空格的字符串。任何偏差都会让浏览器静默丢弃该area，表现为点击完全无响应，开发者工具里也看不到高亮。
典型错误包括："100.5,200.3"（小数）、"100, 200"（空格）、"100px,200px"（带单位）、"100,200,150,180,"（末尾多余逗号）。
立即学习“前端免费学习笔记（深入）”；
- 取点工具务必关闭“相对坐标”“百分比输出”“SVG坐标系（Y轴向上）”等选项
- 优先基于图片原始尺寸（
img.naturalWidth/img.naturalHeight）取点，而非CSS缩放后的渲染尺寸 - 用
parseInt()或正则/\d+/g清洗导出坐标，再.join(",")拼接
shape="poly"拼写和大小写必须完全正确
shape属性只认四个小写字符串："rect"、"circle"、"poly"、"default"。写成"POLY"、"Poly"、"polygon"或漏掉引号，浏览器不会报错，但直接退化为无效热区。
更隐蔽的问题是：某些编辑器自动首字母大写，或复制粘贴时混入全角字符，导致看似一样实则不匹配。
- 检查
<area shape="poly" coords="...">这一行，确认poly是纯ASCII小写 -
usemap="#myMap"与<map name="myMap">必须完全一致（包括#号、大小写、有无空格） - 不要依赖“看起来像就能用”，用开发者工具的Elements面板确认
shape属性值确实被解析为"poly"
coords数量必须为偶数且≥6，少一个就彻底失效
coords字符串拆解后，数字个数必须是偶数，且至少6个（即3个顶点）。奇数个数字（如5个、7个）会导致最后一个坐标被截断，整个多边形无法构成；少于6个（如4个）会被浏览器忽略，area不参与热点计算。
例如coords="100,200,150,180,180,220"是合法三角形；但coords="100,200,150,180,180"（5个数）或coords="100,200,150,180"（4个数）均无效。
- 手写时用文本编辑器显示行号或括号高亮，确保逗号数+1 = 数字总数
- JS动态生成时，先
split(",")再filter(x => x.trim())去空，最后检查length % 2 === 0 && length >= 6 - 首尾点**绝不重复**——
"100,200,150,180,180,220,100,200"是错的，8个数反而可能让浏览器误读为4个点，第4点覆盖前3点逻辑
shape写对了，其实复制时带了不可见Unicode字符。这些细节不排查，光调coords数值毫无意义。 
