手绘地图嵌入HTML需用<picture>+srcset适配多屏，POI用CSS绝对定位并以原图尺寸为基准计算坐标，弹窗用<dialog>+焦点管理确保可访问性，弃用Leaflet等地理引擎。
手绘地图怎么嵌进 HTML 页面不糊还响应式
直接用 <img> 标签加载高清 PNG 手绘图，但必须加 srcset 和 sizes 属性适配不同屏幕——否则在 iPhone 上缩成一团、在 iPad 上拉伸变形是常态。别信“设个 max-width: 100% 就完事”，那只是防止溢出，不是真适配。
实操建议：
- 导出原图时保留 2x 分辨率（比如设计稿是 2400×1600，就导出 4800×3200 的 PNG）
- 用
<picture>包裹，提供<source media="(min-width: 768px)" srcset="map-lg.png 2x">和<img src="map-sm.png" alt="景区手绘地图"> - 给容器加
position: relative，后续的定位标记才能以它为基准
怎么让手绘地图上的景点能点、能弹窗、不卡顿
用绝对定位 <div class="poi"> 叠在图片上是最轻量方案，比 Canvas 或 SVG 绘制整张地图快得多，也方便后期维护。关键不是“怎么画点”，而是“怎么算点的位置”。
常见错误现象：top: 20% + left: 35% 在不同设备上偏移不一致——因为百分比是相对于父容器宽高，而手绘图缩放后，容器宽高比可能变。
立即学习“前端免费学习笔记（深入）”；
使用场景：用户点击“游客中心”立刻显示开放时间+电话，点击“观景台”显示海拔+步行距离。
实操建议：
- 统一以原始图像尺寸为坐标系（比如图宽 4800px，高 3200px），所有 POI 的
left/top按这个基准计算百分比 - 用 JS 初始化时读取
img.naturalWidth和img.naturalHeight，动态重算位置，避免硬编码失效 - 给每个
.poi加data-id="info-center"，弹窗内容从 JSON 配置里取，不写死在 HTML 中
点击 POI 弹窗内容怎么保持可访问又不遮挡地图
用 aria-modal="true" 和 role="dialog" 是底线，否则屏幕阅读器用户根本不知道弹出了什么。但更常被忽略的是焦点管理：弹窗打开后，Tab 键必须困在弹窗内；关闭后，焦点得回到触发它的 .poi 元素上。
性能影响：如果弹窗里塞了大量 HTML 或未压缩的 SVG 图标，首次点击会明显卡顿，尤其低端安卓机。
实操建议：
- 弹窗结构用
<dialog>标签（现代浏览器支持良好），配合showModal()方法调用 - 关闭按钮必须有
type="button"，否则默认是 submit，可能意外触发表单提交 - 弹窗内容延迟加载：只在用户真正点击 POI 后，才用
fetch()拉对应data-id的 JSON，而不是一次性把全部信息塞进页面
为什么用 CSS 定位 POI 比用 Leaflet 或 OpenLayers 更合适
Leaflet 是为真实地理坐标设计的，你手绘地图没有经纬度，强行套用 L.latLng() 和投影转换只会增加复杂度和 bug 数量。OpenLayers 更重，连基础缩放都要配 View 实例，而你只需要“点哪亮哪”。
兼容性影响：Leaflet 默认依赖 transform 和 will-change，在 iOS Safari 14 以下版本中缩放动画掉帧严重；纯 CSS 定位无此问题。
实操建议：
- 放弃任何“地图引擎”思路，把 POI 当作普通交互按钮来处理
- 用
pointer-events: none放在地图图层上，再用pointer-events: auto单独开给每个.poi，确保点击穿透准确 - 如果未来要加路线指引，用 SVG
<path>动态绘制贝塞尔曲线，而不是尝试让 Leaflet 跟手绘图对齐
手绘地图导览最难的不是“怎么标点”，而是“怎么让点的位置在各种缩放、旋转、字体放大设置下依然精准”。很多团队卡在测试阶段才发现 iOS 的“显示更大文字”系统设置会让 rem 基准偏移，进而导致所有 POI 错位——这事得在真机上开辅助功能测，模拟器测不出来。
