合法圆形热区需三要素：图片用usemap="#name"绑定，定义映射，指定圆心坐标和半径；coords须为三个正整数，单位像素，原点在图片左上角。
<area> 标签的 shape="circle" 是唯一原生支持圆形热区的方式，但必须和 <map></map>、usemap 配合使用，且坐标单位是像素、原点在图片左上角——这不是 CSS 圆角能替代的。
怎么写一个合法的圆形映射区域
核心是三要素：图片绑定 usemap、<map></map> 定义命名、<area> 指定 shape="circle" 和 coords。
-
coords必须是三个整数，格式为"cx,cy,r"，例如coords="150,80,40"表示圆心在图片横向 150px、纵向 80px 处，半径 40px -
<img alt="HTML怎么设置圆形映射区域" >的usemap值要带#前缀，比如usemap="#city-map"，而对应<map></map>的name属性必须是city-map（不带 #） -
<map></map>最好同时写id和name，避免老浏览器兼容问题 - 别漏掉
alt属性，否则屏幕阅读器无法识别该热区用途
为什么圆点总点不中？常见坐标错误
几乎所有“点不中”都源于 coords 值不准或与图片实际尺寸脱节。
- 用截图工具或人眼估测坐标，误差常超 20px；应使用在线工具如 Image Map Generator 或 VS Code 插件 “Image Map” 直接在图上取点
- 图片加了
width/height或 CSSmax-width后，coords仍按原始尺寸计算，热区必然偏移 -
coords出现小数（如"150.5,80.2,40"）、负数、或逗号后多空格（如"150, 80, 40"）都会导致解析失败 - 圆心坐标
cx,cy超出图片宽高范围（比如图片只有 300×200px，却写了"400,100,30"），该区域将不可点击
响应式页面里圆形热区怎么保准
<map></map> 的 coords 是绝对像素值，天生不响应缩放——这不是 bug，是规范限制。
立即学习“前端免费学习笔记（深入）”；
- 最稳做法：让图片保持原始尺寸显示（不设
width/height，CSS 仅用max-width: 100%+height: auto），并在主流设备上实测像素尺寸是否稳定 - 若图片必须缩放，放弃
<map></map>，改用 SVG：<svg></svg>内嵌<circle></circle>，配合<a></a>包裹，天然响应缩放 - 或者用 JS 监听图片加载后读取
naturalWidth/naturalHeight，按比例重算coords并动态生成<area>（适合热区少、逻辑可控的场景）
地图类圆形范围别用 ，这是典型误用
如果目标是「在可缩放/拖拽的地图上画一个随视图同步的圆形范围」，<area> 完全无效——它只作用于静态图片，不会随地图移动或缩放。
- 腾讯地图必须用
qq.maps.Circle实例 +setMap()；高德用AMap.Circle+map.add()；百度用BMap.Circle+map.addOverlay() - 三者 radius 单位都是「米」，不是像素；center 必须是 SDK 要求的坐标实例（如
qq.maps.LatLng），传数组会静默失败 - 地图容器
<div id="map"> 必须有明确宽高（如 <code>style="width:600px;height:400px"），否则初始化失败真正难的从来不是写对
shape="circle"，而是确认你面对的是静态图还是动态地图——前者靠<map></map>，后者必须走地图 SDK 的 Circle 类，混用就白忙活。
