+不适合世界地图导航，因其coords为绝对像素值，遇缩放、响应式即偏移；不支持经纬度投影、交互弱、触控区难保障；仅适用于固定尺寸静态图。
直接用 <map></map> 做世界地图区域导航，只适合静态、固定尺寸、不缩放的场景；真要支持点击高亮、悬停提示、拖拽编辑或响应式，必须换 SVG 或 Leaflet。
为什么 <map></map> + <area> 不适合世界地图导航
世界地图图片通常宽高比大、分辨率高，且用户会缩放、滚动、切换设备。而 <map></map> 的 coords 是绝对像素值，原点在左上角，一旦图片被 CSS 缩放、max-width 限制或容器弹性变化，所有热区立刻偏移失效。
- 常见错误现象：
<img style="max-width:90%" alt="HTML世界地图区域映射导航教程" >下点击北京区域却触发了蒙古的<area> - 坐标系硬伤：世界地图涉及球面投影（如 Web Mercator），但
<area shape="poly">只认平面直角坐标，无法表达经纬度语义 - 交互能力极弱：不支持 hover 高亮、无内置选中态、不能动态增删区域、无法判断“鼠标是否在某国多边形内”
- 移动端最小触控区难保障：44×44px 是底线，但小国（如马尔代夫、斐济）在缩放后像素面积远低于此
<map></map> 能用的前提和实操底线
如果你确认满足以下全部条件，才考虑用原生 <map></map>：
- 图片是固定尺寸 PNG（比如 1200×600），且页面中
<img alt="HTML世界地图区域映射导航教程" >也严格按此尺寸显示（不用%、vw、max-width） - 热区坐标由工具导出，不是手填 —— 推荐在线工具 Image Map Generator 或 VS Code 插件
Image Map -
<area>的shape用poly，coords必须是偶数个整数，顶点按顺时针/逆时针列，首尾不重复（浏览器自动闭合） -
href必须是有效 URL，href="#china"不生效，得写成href="./country.html#china"或href="javascript:void(0)"配合 JS 监听 - 每个
<area>只能绑定一个跳转地址，想做 hover 提示得靠title属性（原生支持，但样式不可控）
Leaflet 实现可点击世界地图的轻量路径
Leaflet 不强制加载底图，纯前端即可完成国家区域绘制、点击响应、缩放适配。关键是把 GeoJSON 国界数据喂进去，而不是手动描点。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用公开的简化版世界 GeoJSON（如
world-countries.json，约 500KB，含properties.name字段） - 初始化地图时设为离线模式：
L.map('map').setView([20, 0], 2)，然后立即map.eachLayer(l => l.remove())清掉瓦片层 - 加载 GeoJSON：
L.geoJSON(data, { onEachFeature: (f, l) => { l.on('click', () => alert(f.properties.name)) } }).addTo(map) - 高亮点击国：在
onEachFeature中加l.setStyle({ fillColor: '#ff8a00' })，再监听click重置其他区域颜色 - 性能注意：不要对每个国家都调
bindPopup，用事件委托更稳；若需 hover 效果，监听mouseover+mouseout即可
SVG 方案更适合静态展示与设计可控性
把世界地图导出为 SVG（Inkscape / Figma → “导出为 SVG”，勾选“保留 ID”），然后用 CSS 和少量 JS 控制交互，比 <map></map> 灵活得多。
- 每个国家路径应有唯一
id（如<path id="CN"></path>），方便 JS 查询和样式控制 - 用 CSS 写 hover 效果：
svg path:hover { fill: #4a90e2; cursor: pointer; } - 点击事件直接绑在
<path></path>上：document.querySelector('#CN').addEventListener('click', ...) - 响应式关键：SVG 设为
width: 100%; height: auto;，内部坐标自动缩放，热区不会偏移 - 缺点：无法原生做路径规划、地理计算；若需“某点是否在加拿大境内”，还得引入
point-in-polygon库手动算
最常被忽略的一点：世界地图的坐标系不是统一的。你拿到的 PNG 地图如果是墨卡托投影，而 GeoJSON 是 WGS84 经纬度，直接叠在一起会错位。Leaflet 默认处理这个转换，但自己用 Canvas 或 SVG 手绘时，必须确认数据源投影一致。
