JavaScript通过Geolocation API可获取用户地理位置,需用户授权且仅限HTTPS或localhost;需检测支持性、调用getCurrentPosition()获取坐标、watchPosition()监听变化,并注意安全上下文、用户交互触发及错误处理。

JavaScript可以通过浏览器内置的Geolocation API获取用户设备的地理位置,但需要用户明确授权,且仅在安全上下文(HTTPS 或 localhost)中可用。
一、检查浏览器是否支持 Geolocation API
不是所有环境都支持该 API,使用前应先检测:
navigator.geolocation 是核心对象,若为 undefined,说明不支持或被禁用:
if ("geolocation" in navigator) {
console.log("支持地理位置");
} else {
console.log("不支持地理位置");
}
二、请求用户位置并获取坐标
调用 getCurrentPosition() 发起一次定位请求,它接受两个回调函数和一个可选配置对象:
立即学习“Java免费学习笔记(深入)”;
- 成功回调:接收一个 Position 对象,其中 coords.latitude 和 coords.longitude 是关键经纬度值
- 失败回调:接收一个 PositionError 对象,code 字段可判断原因(如 1 表示用户拒绝,2 表示位置不可用)
- 选项参数 可设置 enableHighAccuracy(启用高精度,可能更慢、更耗电)、timeout(毫秒级超时)、maximumAge(允许返回缓存位置的最大毫秒数)
示例:
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`纬度:${latitude},经度:${longitude}`);
},
(error) => {
console.error(`定位失败:${error.message}`);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 60000
}
);
三、监听位置变化(可选)
如果需要持续跟踪用户移动(例如导航类应用),可用 watchPosition()。它返回一个唯一 watchId,可用于后续停止监听:
const watchId = navigator.geolocation.watchPosition(
(position) => {
console.log("位置更新:", position.coords);
},
(error) => {
console.error(error);
}
);
// 停止监听(例如页面卸载时)
// navigator.geolocation.clearWatch(watchId);
四、注意事项与常见问题
- 必须在用户交互(如点击按钮)后调用,避免被浏览器静默拦截
- HTTP 网站(非 HTTPS)在现代浏览器中会被完全禁用,除非是 localhost
- 移动端可能返回精度较低的结果(如基于基站或 WiFi),coords.accuracy 字段表示误差半径(单位:米)
- 部分设备或系统设置中关闭了定位服务,即使用户点“允许”,API 仍会报错 code: 2
- 不要假设定位一定成功,始终处理错误分支,提供降级方案(如手动输入城市)










