HTML5无法实现离线地图，因Geolocation仅返回坐标而不提供地图渲染能力；可行方案仅有Mapbox GL JS+离线矢量瓦片或Leaflet+静态栅格瓦片包，且需规避浏览器文件系统限制与缓存容量瓶颈。
HTML5 本身不提供离线地图能力，navigator.geolocation 只能获取设备坐标，无法加载或渲染地图——离线地图必须依赖第三方 SDK 或本地资源，且绝大多数在线地图 API（如高德、百度、腾讯、Leaflet + 在线瓦片）在无网络时直接失效。
为什么 Geolocation 不能当离线地图用
navigator.geolocation.getCurrentPosition() 确实能在无网时返回经纬度（前提是设备 GPS 模块可用、定位权限已开），但它只输出坐标，不包含地图图层、POI、路径规划等任何可视化内容。常见误解是“能定位=能出地图”，实际二者完全解耦。
- Android/iOS 设备开启飞行模式后，
getCurrentPosition仍可能成功（依赖 GPS 芯片），但返回的coords.latitude和coords.longitude是纯数字，没有地图容器可渲染 - 浏览器调用该 API 时不会自动下载地图数据；所有地图渲染逻辑都由 JS SDK 控制，而 SDK 初始化阶段就会尝试加载远程配置、样式、瓦片服务地址——这些请求在网络不可达时必然失败
- 部分低端 Android WebView 甚至会因 DNS 预检失败直接拒绝触发定位，导致
error.code === 2（PositionUnavailable）
真正可行的离线地图方案（需主动集成）
要实现离线地图，必须绕过在线地图服务，改用可预置资源的方案。目前只有两类路径实际可用：
-
Mapbox GL JS + 离线矢量瓦片：用
mapbox-gl-js加载本地.mbtiles或预切好的vector pbf瓦片，需配合MapboxOfflinePlugin或自定义source的url为file://或Blob URL；注意 iOS Safari 对file://协议限制极严，仅适用于 Cordova/ Capacitor 封装的 App -
Leaflet + 静态栅格瓦片包：把某区域的
z/x/y.png瓦片（例如用tilelive+mbutil导出）打包进应用，通过L.tileLayer('offline/{z}/{x}/{y}.png')加载；缺点是体积大（1 级缩放覆盖全国约 20GB）、无法缩放平滑、不支持矢量标注 - 原生 SDK（如高德
AMap.offline、百度MKOfflineMap）仅限 Android/iOS 原生开发，Webview 中调用需桥接，且离线包需用户手动下载，无法通过 HTML5 自动触发
Web App 离线地图的关键限制
即使你把瓦片存到 IndexedDB 或 Cache API，仍面临三个硬性障碍：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不允许 JS 直接读取本地文件系统（
file://协议下fetch会被 CORS 阻断），所以瓦片必须通过服务端托管或 Service Worker 拦截请求并返回缓存响应 - 主流地图库（包括
leaflet、mapbox-gl-js）默认不校验瓦片是否真实存在，404 瓦片会留白或报错，需自行监听tileerror事件并 fallback - 离线包更新困难：无法像原生 App 那样后台静默下载增量包，Web 端每次更新需用户手动触发完整重载，且无空间清理机制，
Cache API容量上限通常仅 50–200MB
离线地图不是加个 manifest.json 就能跑起来的功能，它要求你彻底放弃“调用一个 API 就出图”的思维，转为管理地理数据生命周期——从切片、存储、索引、加载策略到降级提示，每个环节都得自己兜底。最常被忽略的是设备存储权限和 Safari 的 IndexedDB 限额，真正在移动端稳定运行，必须用 Cordova 或 Tauri 这类混合框架做底层支撑。
