HTML5 无法调用地图，仅能通过 navigator.geolocation 获取坐标；定位失败主因是权限未触发或被拒绝、设备定位条件不足、超时或非 HTTPS 环境；获取坐标后需按 SDK 要求传入对应顺序的经纬度，并做好用户教育与降级处理。
HTML5 无法“调用地图”，只能通过 navigator.geolocation 获取用户地理位置坐标；是否显示地图、如何渲染，完全由你选的 JS 地图 SDK（如高德、百度、腾讯、Leaflet、Mapbox）负责，且它们不参与授权流程。
为什么 navigator.geolocation.getCurrentPosition() 会失败？
常见错误不是“没调用地图”，而是定位权限未触发或被拒绝：
-
Permission denied：用户点击了“拒绝”，或浏览器默认禁用定位（如 Safari 隐私模式、Chrome 无 HTTPS） -
Position unavailable：设备无 GPS、Wi-Fi 关闭、在室内信号弱，或系统级定位服务被关闭（iOS 设置 > 隐私与安全性 > 定位服务；Android 设置 > 位置信息） -
Timeout expired：timeout设得太小（建议 ≥ 10000），或网络未连通（Geolocation API 依赖 IP + Wi-Fi 基站辅助定位）
必须 HTTPS 才能触发授权弹窗
现代浏览器（Chrome 50+、Firefox 55+、Safari 11.1+）强制要求：只有在 HTTPS 协议或 localhost 下，navigator.geolocation 才会弹出授权提示；HTTP 页面直接静默失败，控制台报 Only secure contexts can request geolocation。
开发时可用：
立即学习“前端免费学习笔记（深入）”；
-
http://localhost:3000（允许） -
https://yourdomain.com（允许） -
http://127.0.0.1:8080（部分旧版 Chrome 允许，但不保证） -
http://example.com（拒绝，无弹窗）
获取坐标后怎么传给地图 SDK？
拿到 position.coords.latitude 和 position.coords.longitude 后，直接作为中心点传入地图初始化参数，例如：
// 高德地图示例
const map = new AMap.Map('map-container', {
center: [position.coords.longitude, position.coords.latitude], // 注意：高德是 [lng, lat]
zoom: 14
});
注意坐标顺序差异：
- 高德 / 百度 / 腾讯：通常为
[lng, lat] - Leaflet / Mapbox：通常为
[lat, lng] - 务必查你所用 SDK 文档，传反会导致地图定位到南极或太平洋中间
真正的难点不在“怎么写代码”，而在于用户教育和降级处理——比如定位失败时展示城市选择器，或用 IP 地址粗略估算（fetch('//ip-api.com/json/')），这些逻辑比调用 getCurrentPosition 更影响体验。
