的coords在地图上总对不准，因为coords是绑定图片naturalWidth/naturalHeight的绝对像素值，CSS缩放、容器变化或设备DPR差异均导致坐标系失配，浏览器不自动重算；poly需严格闭合、无小数、偶数坐标，且不支持:hover。
直接用 <map></map> + <area> 做中国省份区域映射，技术上可行，但实际项目中基本不可维护——坐标是固定像素值，一换图、一响应式、一缩放就全错位。
为什么<area>的coords在地图上总对不准
因为 coords 是按原始图片分辨率写的绝对像素值，比如一张 1200×800 的中国政区图，某省轮廓用 poly 写了 37 个点，每个点都是类似 120,340,125,338,132,345... 这样的整数。一旦图片被 CSS 缩放、容器变宽高、或者用户用手机横屏查看，这些点就彻底漂移。
- 浏览器不会自动缩放
coords，它只认你写的原始数字 - 多边形顶点顺序必须严格闭合（首尾点最好重合），否则部分区域无法触发点击
- Chrome 和 Safari 对
poly的容错略不同：Safari 要求至少 6 个坐标（3 个点），Chrome 可能少一个也不报错但不响应 - 没有 hover 效果支持——
<area>不支持:hover伪类，想加高亮必须靠 JS 模拟
用<map></map>做省份映射时shape和coords怎么填
三种形状对应不同坐标规则，不是“画完导出就能用”，得手动校验：
-
shape="rect"：需 4 个值，left,top,right,bottom（左上 + 右下），例如coords="100,50,320,180" -
shape="circle"：需 3 个值，centerX,centerY,radius，例如coords="210,115,70" -
shape="poly"：需偶数个值，按顺时针或逆时针依次列出所有顶点x,y，例如coords="120,340,125,338,132,345,120,340"（末尾重复首点闭合）
注意：coords 中不能有空格以外的分隔符，逗号后不能跟空格；工具导出的坐标若带小数（如 120.5,340.2），部分老浏览器会直接忽略该 <area>。
立即学习“前端免费学习笔记（深入）”；
替代方案：为什么推荐 SVG 而不是<map></map>
SVG 天然矢量、可缩放、可绑定事件、可 CSS 控制样式，且坐标系与地理逻辑更兼容：
- 每个省份可用
<path></path>描述，d属性本身就是路径指令，缩放时不丢失精度 - 直接给
<path></path>加id="guangdong"和data-code="440000"，JS 获取数据比解析coords简单得多 - 支持原生
mouseenter/click，配合fill: rgba(0,100,255,0.2)就能实现悬停填充 - 用
viewBox+ 百分比宽高，自动适配容器尺寸，无需 JS 重算坐标 - 已有现成中国省级 SVG 地图（如
china-provinces-simple.svg），可直接嵌入或内联
如果非要用<map></map>，怎么最小化翻车风险
仅限静态展示、固定尺寸、无交互增强需求的简单场景。必须做三件事：
- 图片必须用原始分辨率插入，禁止用
width/height属性缩放，只允许用 CSSmax-width: 100%+height: auto并搭配 JS 监听 resize 后重写所有<area>的coords - 每个
<area>必须加alt属性（如alt="广东省"），否则屏幕阅读器无法识别，违反 WCAG 2.1 - 不要依赖
default形状兜底——它覆盖整个图片但无法区分点击位置，且在部分 Android WebView 中行为异常
真正麻烦的不是写出来，而是改：换一张更高清的地图，所有 coords 得重新量、重新算、重新测。这点常被忽略，直到上线后运营要求把地图放大 1.5 倍才暴露问题。
