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，仍面临三个硬性障碍：
