ismap属性最省事，点击图片URL即显示坐标，但仅支持单点且需原始尺寸；MapEdit适合复杂多边形，导出coords须去空格、配对shape；响应式下coords必错位，须JS按比例重算。
直接用 ismap 属性最省事，不用装工具、不写 JS，点一下 URL 就出坐标。
用 ismap 快速抓单点坐标
这是最轻量、最可靠的一次性取点法，适合取按钮、图标、小区域等少量坐标。
-
<img alt="HTML area标签快速获取图片坐标的方法" >标签加ismap属性（值可省略），且必须包裹在带href的标签里（如<a href=""></a>或<area href="">） - 图片必须显式声明
width和height（和原始尺寸一致），否则坐标会偏移 - 打开页面，鼠标移到图上任意位置点击，URL 地址栏末尾就会追加类似
?123,45的坐标——这就是当前点击点的x,y - 注意：这个方法只返回单点，不能描边、不能导出多边形；也不适用于响应式缩放后的图片
MapEdit 工具导出多边形 coords 的实操要点
要给中国地图这种复杂轮廓打点，MapEdit 仍是目前最稳的桌面工具（v5.2 可用，无 Web 版）。
- 启动后选「File → New HTML Document」再加载图片，别用截图或浏览器右键另存——确保加载的是原始分辨率文件
- 描点时在边界转折处下锚，每省 30–50 个点足够；避免在平滑弧线上密布点，反而增加 coords 长度和解析负担
- 导出前检查每个
<area>的alt是否填写（如alt="广东省"），这对无障碍和调试都关键 - 导出的 HTML 中
coords是纯数字逗号分隔，但可能含空格或换行；粘贴到项目里前务必删掉所有空白符，否则 Safari 会静默跳过该区域
shape 和 coords 必须严格配对
浏览器不报错，但填错就等于没写。常见失效不是代码漏了，而是格式错位。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords必须是 4 个数，且x1 、<code>y1 ；写成 <code>"100,200,50,150"区域会消失 -
shape="circle"→ 第三个数是半径，必须为正整数；"200,150,0"或"200,150,12.5"都无效 -
shape="poly"→ 坐标总数必须为偶数；少写一对、多写一个零、开头结尾重复，都可能导致路径扭曲或点击判定异常 - 千万别写
shape="polygon"或shape="square"——这些不是合法值，浏览器当不存在
响应式页面里 coords 一定会错位
只要图片用了 max-width: 100%、width: 100vw 或任何 CSS 缩放，原生 coords 就立刻失效。
-
coords永远基于图片原始像素尺寸（img.naturalWidth），和渲染尺寸无关 - 没有纯 HTML/CSS 解法；必须用 JS 动态重算：
scale = img.offsetWidth / img.naturalWidth，再遍历所有<area>的coords字符串，把每个数字乘以scale - 移动端测试不能只看 Chrome 模拟器——真机 DPR > 1 时，
offsetWidth和视觉宽度可能不一致，建议用window.devicePixelRatio辅助校准
真正麻烦的不是怎么取坐标，而是取完之后忘了它绑定的是原始像素、不是视口单位，也没验证 usemap="#xxx" 和 <map name="xxx"></map> 是否逐字节一致——这两个地方错一个字符，整个热区就静默报废。
