浏览器需通过navigator.geolocation获取经纬度，但必须满足HTTPS和用户主动触发两个条件；国内推荐用高德AMap.Geolocation提升精度，百度BMapGL.Geolocation需显式启用WebGL并注意坐标系转换。
浏览器直接用 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，并在 <script> 标签中带上 key 参数加载 SDK。
实操建议：
- 初始化地图容器前，先 new 一个
AMap.Geolocation实例，调用locate()方法（它内部已封装原生 API 并降级） - 注意
showMarker: false（默认为 true），否则会在地图上强行打个蓝点，干扰自定义标记 - 回调里的
data.position是AMap.LngLat对象，不是原生的coords，直接传给map.setCenter()即可 - 如果页面已加载地图但尚未定位，别重复 new AMap.Map，只调用
geolocation.locate()即可
百度地图 API 的 BMapGL.Geolocation 要手动开启 WebGL 模式
百度新版地图（v3.0+）默认用 WebGL 渲染（BMapGL），但它的定位类 BMapGL.Geolocation 不像高德那样开箱即用。如果你引入的是 https://api.map.baidu.com/api?v=3.0&ak=YOUR_KEY，实际加载的是旧版 BMap；要启用新版，必须显式加参数 &v=3.0&type=webgl，否则 BMapGL.Geolocation 会报 undefined。
常见错误现象：Cannot read property 'Geolocation' of undefined（没加 type=webgl）、Invalid key（Key 未开通 WebGL 权限，需在百度控制台手动勾选）。
实操建议：
- 加载 SDK 时 URL 必须包含
&type=webgl，例如：https://api.map.baidu.com/api?v=3.0&ak=xxx&type=webgl -
BMapGL.Geolocation的getCurrentPosition()返回的是 Promise，要用.then()接，不是回调函数 - 返回的坐标是百度坐标系（BD09），若后续要叠加第三方 POI 数据（如 WGS84），必须先用
BMapGL.Convertor.translate()转换，否则偏移几公里
定位成功后设置地图中心，但别忽略 zoom 和 pitch
拿到经纬度只是第一步，直接 map.setCenter([lng, lat]) 可能导致用户看到一片空白——因为默认缩放级别太小（比如 3 级），或者 3D 地图的俯仰角（pitch）为 0，视角太平看不到地面细节。
实操建议：
- 高德地图推荐设
zoom: 14（街道级）、pitch: 30（轻微俯视，适合定位点展示） - 百度
BMapGL默认pitch: 0，设成45更直观；同时检查map.centerAndZoom()是否传了Zoom值，不传会维持上一次缩放 - 移动端要注意：iOS Safari 下
map.setCenter()如果在定位回调里异步执行，可能因渲染时机问题导致中心偏移，建议加setTimeout(() => { map.setCenter(...) }, 0)微任务调度
真正麻烦的不是代码怎么写，而是每个地图服务商对「用户授权状态」的响应逻辑不同、对「坐标系」的默认处理不一致、以及移动端 WebView 环境下定位权限链路更长。上线前务必用真机测 iOS 和安卓主流浏览器，别信开发工具里的模拟定位。
