结论：+最轻量兼容（ie9+），但仅适用于固定尺寸静态图片；遇缩放、响应式或拖拽编辑需换svg或地图sdk。

直接说结论：用 <map></map> + @#@#@#@#@#@#@#@#@#@0 上传图后画区域，自动输出 <code>coords

本地用 VS Code 插件 “Image Map” 或浏览器插件 “Image Map Editor” 实时取点

poly 的 coords 必须是偶数个整数，按顺时针或逆时针列顶点，首尾不重复（浏览器会自动闭合）

矩形格式是 x1,y1,x2,y2（左上→右下），圆形是 cx,cy,r（圆心x、y、半径）

常见错误：坐标超出图片宽高、逗号后多空格、用了小数或负数、poly 点数为奇数。

移动端和响应式下为什么点不准

因为 <area> 的 coords 是绝对像素值，不随 <img src="map.png" usemap="#cn-map"> 缩放重算。只要图片用了 width、height 或 CSS max-width，热区就偏移。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 最稳做法：图片保持原始尺寸显示，用 CSS background-image + div + 绝对定位模拟热区（但失去原生 href 跳转）
• 折中方案：用 JS 监听 resize，按缩放比例重算 coords 并动态写入 <area>（需缓存原始坐标）
• 真要响应式 + 拖拽 + 高亮？直接上 SVG 或 Leaflet，<map></map> 不是为此设计的
• 移动端最小热区建议 ≥44×44px，否则点击易误触

href 跳转失败的几个硬坑

很多人写 href="#section1" 发现没反应——<area> 不支持纯锚点跳转，必须是有效 URL：

• ✅ 正确：href="./page.html#detail"、href="https://example.com"、href="javascript:void(0)"
• ❌ 失效：href="#"、href=""、href="section1"
• 如果想做 JS 交互，用 onclick 更可靠，比如 onclick="showInfo('shanghai')"
• alt 属性不能省，它影响可访问性，屏幕阅读器靠这个读出区域含义

复杂点在于：坐标系是静态的、缩放不可逆、移动端适配无原生支持——这些不是 bug，是设计限制。选方案前先确认需求边界，比调半天 coords 更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！