热区点击不准主要因map与area的coords未对齐坐标系，需确保图片不缩放或动态换算coords，或改用svg热区；同时检查usemap与name一致性、pointer-events样式、移动端touch-action及地图来源是否适配html热区。
热区点击不准，多半是 map 和 area 的 coords 没对齐坐标系
HTML 原生的 <map></map> + <area> 实现热区，本质是靠像素坐标做矩形/圆形/多边形判断。但地图图片如果是缩放后展示（比如用 CSS width: 100% 自适应），coords 值仍按原始图片分辨率计算，就会点偏。
- 必须确保地图图片不缩放，或用 JS 动态换算
coords：监听window.resize，按图片实际渲染宽高 / 原图宽高比例缩放所有coords值 -
<img>的usemap属性值要和<map name="xxx"></map>的name完全一致（区分大小写） - 多边形热区用
shape="poly"，coords是逗号分隔的 x,y 对，如"10,20,30,40,50,60"，奇数位是 x，偶数位是 y，不能漏数、不能多空格
需要响应式？别硬调 coords，改用 SVG 热区替代
SVG 天然支持缩放和坐标系映射，比 <map></map> 更可靠。把地图导出为 SVG（或手写基础路径），每个区域用 <path></path> 或 <polygon></polygon> 包裹，绑定 click 事件即可。
- SVG 中的
viewBox决定坐标系，只要保持宽高比，缩放不会影响点击精度 - 用
getBBox()或getPointAtLength()可做更精细的点选判断，比如判断鼠标是否落在某条边界线 3px 范围内 - 注意：直接内联 SVG 到 HTML 中，避免跨域加载导致事件失效；若从外部加载，需用
fetch+DOMParser注入后绑定事件
pointer-events: none 导致热区失效，检查父容器样式
常见于地图容器套了遮罩层、阴影、伪元素，或者用了 position: absolute 且 z-index 错乱。浏览器会忽略 pointer-events 为 none 的元素及其子元素的事件捕获。
- 用浏览器开发者工具的「元素审查」→「Computed」面板，逐层检查
pointer-events是否被意外设为none - 如果热区在
<map></map>下但图片上层有透明 div，该 div 必须设pointer-events: none，否则会拦截点击 - SVG 中若给
<g></g>或<svg></svg>设了pointer-events: none，子元素也无效，得显式设回auto
移动端点击延迟或误触，加 touch-action: manipulation
原生热区在 iOS Safari 上可能有 300ms 延迟，且手指触摸范围远大于鼠标点，容易点错相邻区域。
- 给地图图片或 SVG 容器加 CSS：
touch-action: manipulation，能禁用双击缩放并加速点击响应 - 热区之间留至少 12px 间距（尤其多边形顶点密集时），避免手指覆盖多个区域
- 不要依赖
hover效果做反馈，移动端无 hover；改用:active或 JS 切换 class 显示临时高亮
<map></map> 根本没法用，得走地图 SDK 的 on('click', ...) 事件；只有静态单张地图图才适合 HTML 热区方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
