一、什么是Geolocation？

简单来说，Geolocation就是HTML5提供的一个功能，可以让网站获取用户的地理位置信息。

核心要点：

  • 不是GPS：虽然它可以使用GPS，但更常用的是Wi-Fi、IP地址或手机基站定位
  • 需要用户同意：浏览器会先征求用户许可，用户同意后网站才能获取位置信息
  • 隐私保护：现代浏览器都有严格的隐私保护措施
  • 免费使用：不需要付费API，是HTML5内置功能

📌 注意：地理位置信息的精确度取决于用户使用的设备。手机通常比电脑更精确，因为手机有GPS芯片。

二、浏览器支持情况

几乎所有现代浏览器都支持Geolocation：

  • Chrome 5+
  • Firefox 3.5+
  • Safari 5+
  • Edge
  • Opera 10.6+
  • Android 2.0+
  • iOS Safari

⚠️ 重要提示：Internet Explorer 9+才支持Geolocation，旧版IE不支持。

三、使用前注意事项

1. 隐私保护

浏览器一定会先询问用户是否允许获取位置信息。用户可以选择”允许”或”拒绝”。

2. 安全要求

现代浏览器要求通过HTTPS协议使用Geolocation功能（本地开发localhost除外）。

3. 备用方案

如果用户拒绝提供位置信息，或者设备不支持，你的网站应该有备用方案。

📌 最佳实践：只有当你的网站真的需要位置信息时才请求，并清晰说明为什么需要这个信息。

四、核心方法详解

1. getCurrentPosition() – 获取当前位置

这是最常用的方法，用于获取用户当前的位置信息。

// 基本用法
navigator.geolocation.getCurrentPosition(
  function(position) {
    // 获取位置成功时执行
  },
  function(error) {
    // 获取位置失败时执行
  }
);

2. watchPosition() – 持续追踪位置

当用户移动时持续获取位置更新（比如导航应用）。

// 开始追踪位置
var watchId = navigator.geolocation.watchPosition(
  function(position) {
    // 每次位置更新时执行
  }
);

3. clearWatch() – 停止追踪

停止watchPosition()的持续追踪。

// 停止追踪位置
navigator.geolocation.clearWatch(watchId);

五、位置信息详解

成功获取位置后，返回的position对象包含以下信息：

// position对象的结构
{
  coords: {
    latitude: 37.4220656, // 纬度
    longitude: -122.0840897, // 经度
    accuracy: 20, // 精确度（米）
    altitude: null, // 海拔高度（米）
    altitudeAccuracy: null, // 海拔精确度
    heading: null, // 移动方向（度数）
    speed: null // 移动速度（米/秒）
  },
  timestamp: 1617192000000 // 时间戳
}

📌 注意：altitude、heading、speed这些属性在桌面浏览器上通常是null，在移动设备上才可能有值。

六、错误处理

获取位置可能失败，常见错误类型：

  • PERMISSION_DENIED (错误码1)：用户拒绝了位置请求
  • POSITION_UNAVAILABLE (错误码2)：位置信息不可用
  • TIMEOUT (错误码3)：请求超时
  • 未知错误 (错误码0)：其他错误
// 错误处理示例
function errorHandler(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert(“您拒绝了位置请求”);
      break;
    case error.POSITION_UNAVAILABLE:
      alert(“位置信息不可用”);
      break;
    case error.TIMEOUT:
      alert(“请求超时”);
      break;
    default:
      alert(“未知错误”);
  }
}

七、实际应用场景

  • 地图导航：显示用户位置和路线规划
  • 本地服务：查找附近的餐厅、商店等
  • 天气预报：获取用户所在位置的天气
  • 社交应用：显示附近的朋友
  • 电商网站：自动选择最近的配送点
  • 旅游应用：提供附近景点信息

位置信息演示

点击下方按钮获取您的位置（仅作演示，不会存储任何信息）

点击按钮后，这里将显示您的位置信息