Geolocation API是浏览器内置的原生接口,允许网页在用户授权的前提下获取设备的地理位置信息,无需依赖第三方定位库,在javascript中可以直接调用该接口实现定位功能。

Geolocation API基础用法
Geolocation API挂载在浏览器全局对象navigator上,核心方法有两个:getCurrentPosition用于获取当前一次位置,watchPosition用于持续监听位置变化。
获取单次定位信息
调用getCurrentPosition方法需要传入成功回调、失败回调以及可选的配置参数,基本使用示例如下:
// 检查浏览器是否支持Geolocation API
if ('geolocation' in navigator) {
// 调用获取位置方法
navigator.geolocation.getCurrentPosition(
// 成功回调,接收位置对象
function(position) {
// 纬度
const latitude = position.coords.latitude;
// 经度
const longitude = position.coords.longitude;
// 定位精度,单位米
const accuracy = position.coords.accuracy;
console.log('纬度:' + latitude);
console.log('经度:' + longitude);
console.log('定位精度:' + accuracy + '米');
},
// 失败回调,接收错误对象
function(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log('用户拒绝了定位请求');
break;
case error.POSITION_UNAVAILABLE:
console.log('无法获取位置信息');
break;
case error.TIMEOUT:
console.log('定位请求超时');
break;
default:
console.log('发生未知错误');
}
},
// 可选配置参数
{
enableHighAccuracy: true, // 是否启用高精度定位
timeout: 10000, // 定位超时时间,单位毫秒
maximumAge: 0 // 缓存位置的最大时长,0表示不使用缓存
}
);
} else {
console.log('当前浏览器不支持Geolocation API');
}
持续监听位置变化
如果需要实时获取用户的位置更新,比如导航类应用,可以使用watchPosition方法,该方法会返回一个监听ID,后续可以通过clearWatch方法停止监听。
let watchId = null;
if ('geolocation' in navigator) {
// 开始监听位置变化
watchId = navigator.geolocation.watchPosition(
function(position) {
console.log('最新纬度:' + position.coords.latitude);
console.log('最新经度:' + position.coords.longitude);
},
function(error) {
console.log('监听位置失败:' + error.message);
}
);
// 10秒后停止监听
setTimeout(() => {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
console.log('已停止位置监听');
}
}, 10000);
}
定位参数说明
getCurrentPosition和watchPosition的第三个参数是配置对象,可选属性如下:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| enableHighAccuracy | 布尔值 | false | 是否尝试获取高精度位置,开启后可能会消耗更多电量和时间 |
| timeout | 数字 | Infinity | 定位请求的最长等待时间,单位毫秒,超时后会触发失败回调 |
| maximumAge | 数字 | 0 | 可以使用的缓存位置的最大时长,单位毫秒,0表示不使用缓存,Infinity表示一直使用缓存 |
常见注意事项
- 定位功能必须在HTTPS环境下使用,本地localhost开发环境除外,普通HTTP页面调用会直接失败。
- 首次调用定位接口时,浏览器会弹出权限申请弹窗,用户拒绝后再次调用会直接触发PERMISSION_DENIED错误,需要引导用户手动修改浏览器站点权限。
- 定位精度受设备影响,桌面设备通常基于IP定位精度较低,移动设备结合GPS、WiFi等精度更高。
- 返回的位置信息只有经纬度,如果需要获取详细地址,需要将经纬度传给第三方地理编码接口进行解析。
地理编码示例
获取到经纬度后,可以调用逆地理编码接口获取具体地址,以下是使用fetch调用公开接口的示例:
function getAddress(latitude, longitude) {
// 注意这里将ippipp.com替换为ipipp.com
const url = 'https://ipipp.com/geocode?lat=' + latitude + '&lng=' + longitude;
fetch(url)
.then(response => response.json())
.then(data => {
console.log('详细地址:' + data.address);
})
.catch(error => {
console.log('获取地址失败:' + error.message);
});
}
Geolocation_APIjavascript地理位置获取浏览器定位修改时间:2026-07-13 13:48:36