navigator.geolocation.getCurrentPosition是浏览器原生获取用户地理位置的唯一可靠API，需用户手势触发、HTTPS环境及明确授权，支持现代所有主流浏览器，返回经纬度等坐标信息并需完整错误处理。
点击按钮触发 navigator.geolocation.getCurrentPosition 就行
浏览器原生支持定位，不需要地图 SDK 也能拿到经纬度。关键不是“画地图”，而是“点一下就获取当前位置”。navigator.geolocation 是唯一可靠入口，所有现代浏览器都支持（iOS Safari、Chrome、Edge 没问题；IE 已淘汰，不用考虑）。
常见错误是直接调用没加错误处理，结果用户拒绝授权后页面卡住或报错：Geolocation error: User denied Geolocation permission。必须包在 try/catch 里，并显式处理拒绝、超时、不可用三种情况。
实操建议：
- 按钮
onclick里只调用定位函数，别塞地图渲染逻辑——先确保坐标拿得到 - 首次调用前检查
navigator.geolocation是否存在（极老安卓 WebView 可能没有） - 传参推荐加
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 }：提高精度、避免卡死、允许用缓存位置加快响应 - 不要在页面加载时自动定位——多数浏览器会静默阻止，必须由用户手势（如 click）触发
拿到坐标后怎么显示在网页上（不依赖高德/百度地图）
如果只是想“看到当前位置”，用 <input> 或 <div> 显示经纬度最轻量。例如：
立即学习“前端免费学习笔记（深入）”；
<button onclick="getLocation()">定位</button>
<div id="location"></div>
<p><script>
function getLocation() {
if (!navigator.geolocation) {
document.getElementById("location").textContent = "浏览器不支持定位";
return;
}
navigator.geolocation.getCurrentPosition(
(pos) => {
const lat = pos.coords.latitude.toFixed(6);
const lng = pos.coords.longitude.toFixed(6);
document.getElementById("location").textContent = <code>纬度：${lat}，经度：${lng}</code>;
},
(err) => {
document.getElementById("location").textContent = <code>定位失败：${err.message}</code>;
},
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 }
);
}
</script>注意：pos.coords.latitude 和 pos.coords.longitude 是标准字段，别写成 lat 或 lng——那是某些地图库的简写，原生 API 没这属性。
如果真要嵌入简易地图，可用 OpenStreetMap 的静态图 URL（无需 API Key）：
https://tile.openstreetmap.org/18/${Math.round(lat * 100000)}/${Math.round(lng * 100000)}.png但这是瓦片图链接，不能交互。真要可拖拽缩放的地图，才需要引入 Leaflet 或 maplibre —— 那已是下一步，和“定位按钮”本身无关。
为什么点按钮没反应？90% 是 HTTPS 或权限问题
Chrome、Firefox、Safari 在非 HTTPS 页面（即 http://localhost 以外的 http://）下会直接禁用 navigator.geolocation，控制台报错：Only secure contexts can use geolocation。本地开发用 http://localhost 是被允许的，但用 file:// 协议打开 HTML 文件一定失败。
另一个高频坑：用户之前点过“拒绝”，之后再点按钮，浏览器不会再次弹窗，而是直接进 error 回调。此时需引导用户手动去浏览器地址栏左侧点锁形图标 → “网站设置” → 把“位置”改为“允许”。
验证是否真被屏蔽的小技巧：
- 在浏览器地址栏输入
chrome://settings/content/location（Chrome）或about:preferences#privacy（Firefox），查当前域名的权限状态 - 用手机 Chrome 访问，确认是否因省电模式关闭了后台定位（部分安卓厂商 ROM 会强制限制）
- 别在 iframe 里调用——父页面未授权时，子 frame 调用会静默失败
要不要用第三方地图 SDK 做定位按钮？
没必要。高德、百度、腾讯地图的 JS SDK 都封装了 getCurrentPosition，但多一层抽象，还强依赖网络和 Key。如果你只要“定位”，它们反而增加失败路径（比如 Key 过期、CDN 加载失败、跨域限制）。
只有两个场景值得上 SDK：
- 需要把定位点标在可交互地图上（带标记、弹窗、路线规划）
- 需要持续追踪移动轨迹（用
navigator.geolocation.watchPosition）且要兼容旧安卓 WebView
否则，原生 API 更快、更稳、无依赖。记住：定位是浏览器能力，不是地图功能。
真正容易被忽略的是 error 回调里的 err.code 值——它比 err.message 更稳定，可用于区分是用户拒绝（err.code === 1）、超时（2）还是服务不可用（3），而不是靠字符串匹配做判断。
