如何用index.html调用地图API显示位置

本文深入解析了在网页中通过index.html调用地图API精准显示用户位置的核心要点与实战避坑指南：强调必须优先确保浏览器原生`navigator.geolocation`在HTTPS环境和用户主动触发下可靠获取经纬度，再针对性选用高德AMap.Geolocation（多源融合、精度高、自动兜底）或百度BMapGL.Geolocation（需显式启用WebGL、注意BD09坐标系转换），同时提醒缩放级别、俯仰角设置及真机测试的关键性——真正决定定位成败的，往往不是代码语法，而是对权限机制、坐标体系和移动端真实环境的深刻理解。

浏览器直接用 navigator.geolocation 获取位置，别先想地图

网页调用地图 API 显示当前位置，第一步不是引入高德或百度 SDK，而是确认浏览器能否拿到经纬度。现代浏览器（Chrome、Edge、Firefox）都支持 navigator.geolocation，但必须满足两个硬性条件：HTTPS 协议 和 用户主动交互触发（比如点击按钮），否则会静默失败或直接拒绝。

常见错误现象：Geolocation not supported（老 IE 或 HTTP 环境）、Permission denied（自动执行未等用户点按）、Timeout expired（WiFi 无 GPS 时定位慢，建议设 timeout: 10000）。

实操建议：

• 用 if (navigator.geolocation) 兜底判断，避免脚本报错
• 把 getCurrentPosition() 放在按钮 onclick 或 addEventListener('click') 里，不要写在 DOMContentLoaded 里自动跑
• 始终传入 error 回调，打印 error.code 和 error.message —— code: 1 是用户拒绝，code: 2 是位置不可用，code: 3 是超时

高德地图 JS API：用 AMap.Geolocation 替代原生定位更稳

原生 navigator.geolocation 在国内经常返回偏差大、城市级粗略坐标（尤其 iOS Safari）。高德 JS API 的 AMap.Geolocation 插件做了多源融合（基站+WIFI+IP+GPS），且自动处理 HTTPS/跨域/权限兜底，实际定位成功率更高。

使用前提：去 高德开放平台 申请 Web 端 Key，并在