area标签的coords属性无法动态响应，必须通过JS显式调用setAttribute或赋值才能触发浏览器重解析热区；响应式缩放时需基于naturalWidth/Height与实际宽高计算缩放比，并逐点更新coords字符串。
area 标签本身不支持“动态渲染坐标”——coords 是静态属性，必须由 JS 手动重写才能响应尺寸变化或数据更新。 直接用 Vue/React 的 v-bind:coords 或 :attrs="{ coords }" 不会触发浏览器重解析；area 元素一旦插入 DOM，其热区行为就锁定在当前 coords 值上，除非你显式修改它。
为什么直接绑定 coords 属性没用
浏览器对 area 的热区计算发生在元素插入或 coords 属性被 JS 显式赋值时。DOM 属性变更（如 el.setAttribute('coords', '...')）会触发重计算，但框架的响应式绑定若只是更新虚拟 DOM 节点的 props，而未真正调用 setAttribute 或 el.coords = '...'，热区就不会更新。
- Vue 中用
v-bind:coords仅设置初始属性，后续响应式更新不会同步到原生热区逻辑 - React 中
coords={str}同样只影响初次渲染，re-render 不会重触发 area 的坐标注册 - 即使你用
innerHTML替换整个map，旧area实例仍保留在浏览器热区索引中，新元素需重新挂载才生效
正确做法：用 JS 显式更新 coords 属性
核心是绕过框架抽象，直接操作原生 area 元素的 coords 属性，并确保每次更新都走 el.setAttribute('coords', newValue) 或 el.coords = newValue。
- 在 Vue 中，用
ref拿到area元素后，手动调用el.setAttribute('coords', newCoords) - 在 React 中，用
useEffect+useRef，在依赖项变化时执行areaEl.coords = newCoords - 避免用 innerHTML 替换整个
map—— 它会销毁所有已注册热区，且可能引发 Safari 静默跳过新area的问题 - 如果热区数量多（比如中国地图 34 个省），批量更新后建议加
setTimeout(() => {}, 0)让浏览器有间隙重绘热区高亮
响应式缩放时必须重算 coords
只要图片用了 width、max-width、transform: scale() 或在 Retina 屏上显示，原始 coords 就立刻失效。没有 CSS 自动适配机制。
立即学习“前端免费学习笔记（深入）”；
- 关键参数：用
img.naturalWidth和img.offsetWidth算出横向缩放比scaleX = img.offsetWidth / img.naturalWidth - 同理取
img.naturalHeight和img.offsetHeight得scaleY（注意：非等比缩放时必须分开处理） - 对每个
area的coords字符串，按shape类型拆解：rect 拆 4 个数、circle 拆 3 个、poly 每 2 个为一组，分别乘以对应比例 - 更新后必须调用
areaEl.setAttribute('coords', newCoordsStr)，不能只改 JS 变量
容易被忽略的兼容性坑
不是所有浏览器对动态 coords 更新反应一致，尤其在移动端和首次加载时。
- iOS Safari 对刚插入的
area有延迟注册现象，建议在img.onload后再执行 coords 更新 - Firefox 对含超 100 个坐标的
poly区域检测较慢，鼠标移入可能卡顿，可考虑合并相邻小区域或降点（30–50 点/省足够） - Chrome 开发者工具里悬停
area元素时，高亮框若明显偏移，说明 coords 还没被重算，或缩放比取错了 natural 尺寸 - 不要依赖
window.devicePixelRatio直接修正 coords —— 它影响的是渲染像素，不是热区坐标系；真正该用的是img.offsetWidth / img.naturalWidth
真正难的不是写几行 JS 更新 coords，而是保证每次图片尺寸变化、数据刷新、组件重挂载时，都能精确触发那一次 setAttribute 调用，并且传进去的数字确实是基于原始图尺寸缩放后的整数。
