结论：用+做旅游线路图大概率失效，因其coords基于原始像素且不响应缩放；必须用JS动态重算坐标，并确保href、alt、name与usemap严格匹配，否则热区静默失效。
直接说结论：用 + 做静态线路映射可行，但只要页面有响应式要求、图片尺寸不固定、或需要支持移动端点击精度，就必须加 JavaScript 动态重算 coords，否则热区必然错位。
为什么原生
旅游线路图（比如「云南6日游路线示意图」）通常具备三个典型特征：图片被 CSS 缩放、在不同设备上渲染宽度变化大、区域形状复杂（多边形居多）。而 的 coords 是硬编码像素值，只对原始图片尺寸有效。
常见错误现象：
- PC 端看着坐标精准，手机 Safari 上点不到任何区域
- Chrome 开发者工具里用「截图选区」框住某个景点图标，
却偏移 30px 以上 - 横屏切换后，所有热区集体右移，
href完全不可用
根本原因：浏览器不会自动按缩放比换算 coords。你导出的坐标如果是从 PS 里量的 1200×800 原图，但实际 375 / 1200 和 250 / 800 才对。
coords 坐标怎么动态重算才不出错
核心是两步：拿到原始尺寸、实时计算缩放比。不能依赖 window.innerWidth，得用图片自身渲染宽高与自然宽高的比值。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
id="route-map"，并确保它已加载完成再执行逻辑（监听load事件） - 用
img.naturalWidth和img.naturalHeight获取原始尺寸（这是唯一可靠来源） - 用
img.offsetWidth和img.offsetHeight获取当前渲染尺寸（不是getBoundingClientRect()，后者含 margin/border） - 对每种
shape分别处理：rect要缩放全部 4 个值；circle缩放圆心 x/y 和半径；poly必须成对处理，x₁,y₁,x₂,y₂… 每两个数一组分别乘对应缩放比 - 把重算逻辑封装成函数，同时绑定
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
示例关键片段：
function updateCoords() {
const img = document.getElementById('route-map');
const scaleX = img.offsetWidth / img.naturalWidth;
const scaleY = img.offsetHeight / img.naturalHeight;
document.querySelectorAll('area').forEach(area => {
const coords = area.coords.split(',').map(Number);
if (area.shape === 'rect') {
area.coords = [
coords[0] * scaleX,
coords[1] * scaleY,
coords[2] * scaleX,
coords[3] * scaleY
].join(',');
} else if (area.shape === 'poly') {
area.coords = coords.map((v, i) => i % 2 ? v * scaleY : v * scaleX).join(',');
}
});
}
area 标签写法里最容易被忽略的兼容性陷阱
很多旅游网站上线后在旧版 Safari 或微信内置浏览器里热区完全不响应，问题往往不在坐标，而在标签本身。
必须满足的条件：
- 每个
必须带href属性，哪怕只是href="#day1"，缺了就无点击行为 - 每个
必须带alt属性，如alt="大理古城-第2天行程"；缺了不仅读屏软件无法识别，iOS 14 以下 Safari 会直接跳过该热区 -
的name值必须和usemap值严格匹配，包括大小写和开头的#（usemap="#route"对应） - 不要用
target="_blank"以外的target值，部分安卓 WebView 不支持target="iframe-name"
另外， 顺序很重要：后写的会盖住先写的。如果「昆明」和「石林」区域有重叠，且都指向不同页面，把更小、更精确的区域（如石林）放在后面定义，避免用户点不中。
真正麻烦的不是写几行 ，而是当设计稿换了三次尺寸、运营临时要求加一个「高铁站接驳点」热区、或者某天发现 Safari iOS 15.6 下 offsetWidth 返回 0——这些时刻，你得清楚到底是缩放比没取对，还是 load 事件漏绑了，又或者 alt 里混进了中文顿号导致解析失败。细节堆起来，就是线上能不能点得中的全部区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
