结论：所有坐标拾取工具输出的 coords 均基于图片原始像素尺寸，而非 css 或 html 缩放后的尺寸，因此页面中点不准主因是未对齐原图宽高。
直接说结论：别信“自动适配缩放”的坐标拾取工具，所有工具输出的 coords 都是按图片原始像素尺寸算的，你贴进页面后点不准，八成是因为没对齐原始尺寸。
为什么用工具拾取的坐标在页面里点不中
几乎所有在线或桌面坐标拾取工具（比如 MapEdit、tooltt.com/img-coord、Figma 插件）都默认读取图片文件本身的宽高（即 naturalWidth/naturalHeight），而不是你在 HTML 里用 width/height 或 CSS 缩放后的尺寸。
- 你导出的
coords="120,80,240,160"是针对一张 800×600 原图的坐标 - 但你的
<img src="map.png" style="max-width:90%">把它压到了一半大小 → 实际可点击区域只占屏幕 60×40px，肉眼根本对不准 - 浏览器不会帮你换算，它就认原始像素值
MapEdit 工具导出坐标后必须做的三件事
MapEdit 是目前最稳定、支持多边形描点和批量导出的桌面工具（v5.2），但它导出的 HTML 不是开箱即用的。
- 检查导出的
<map name="xxx"></map>和<img usemap="#xxx">中的 name 是否完全一致（含大小写、连字符，且usemap必须带#） - 删掉导出代码里所有换行和多余空格 ——
coords值里只允许数字和逗号，例如coords="10,20,30,40,50,60"，不能是coords="10, 20, 30, 40"（空格会中断解析） - 确认每个
<area>都有href和非空alt—— 缺alt会导致部分屏幕阅读器跳过，缺href则 Chrome/Firefox 可能静默忽略该热区
用 ismap + URL 参数方式手动验证坐标的可靠性
这是最轻量、零依赖的坐标校验法，适合快速定位错位原因：
- 新建一个临时 HTML 文件，只放一行：
<img src="your-image.png" style="max-width:90%" style="max-width:90%" ismap> - 确保
width和height与原图尺寸一致（用img.naturalWidth在控制台确认） - 在浏览器中打开这个页面，鼠标点击任意位置，观察地址栏末尾是否出现类似
?123,456的参数 —— 这就是当前点击点的真实原始坐标 - 把工具导出的某组
coords（比如矩形"0,0,100,100"）画在纸上，用尺子比对图片左上角，再实际点一次看是否命中
poly 多边形顶点导出后常出问题的两个细节
多边形热区最容易“画歪”，不是工具不准，而是导出后没清理格式或顺序错乱：
-
coords值总数必须是偶数 —— 每个点由 x,y 一对组成；如果导出结果是 59 个数字，说明漏了一个或多了个逗号分隔符 - 首尾点无需重复 —— 浏览器会自动连接最后一个点回到第一个点闭合路径；但如果你手动补了起点（如
x1,y1,...,x1,y1），反而可能因浮点误差或渲染策略导致边缘点击失效 - 交叉多边形（比如五角星）在 Safari 和旧版 Edge 中行为不一致，建议拆成多个 non-overlapping
<area>或改用 SVG
真正麻烦的从来不是怎么拿到坐标，而是怎么让坐标在不同设备、不同缩放、不同加载时机下依然准——area 标签天生不响应 CSS 变化，一旦图片尺寸靠 JS 或媒体查询动态调整，coords 就得同步重算，这时候你得直面 img.naturalWidth 和 getBoundingClientRect() 的精度差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
