HTML5 地理定位

HTML5 地理定位 (Geolocation) API 允许 Web 应用程序在用户同意的情况下，获取其设备的地理位置信息。这为开发基于位置的服务 (LBS, Location-Based Services) 提供了可能，例如：

在地图上标出用户当前位置
提供本地化的搜索结果
“附近的人”功能

隐私注意: 地理定位是一个涉及到用户隐私的功能。因此，浏览器在任何时候尝试获取用户位置信息前，都必须弹窗请求用户的明确授权。

获取当前位置

获取用户位置的核心方法是 navigator.geolocation.getCurrentPosition()。

这个方法会异步地尝试获取设备的位置，并接受三个参数：

successCallback: 获取成功时调用的回调函数。该函数会接收一个 Position 对象作为参数，其中包含了位置信息。
errorCallback (可选): 获取失败时调用的回调函数。该函数会接收一个 PositionError 对象。
options (可选): 一个配置对象，用于设置获取位置的参数，如精度、超时时间等。

示例代码

html

<button onclick="getLocation()">获取我的位置</button>
<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
  // 检查浏览器是否支持地理定位
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "您的浏览器不支持地理定位。";
  }
}

// 成功获取位置的回调函数
function showPosition(position) {
  x.innerHTML = "纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
}

// 获取位置失败的回调函数
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "用户拒绝了地理定位请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "位置信息不可用。"
      break;
    case error.TIMEOUT:
      x.innerHTML = "请求用户位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "发生未知错误。"
      break;
  }
}
</script>

`Position` 对象

当成功获取位置时，successCallback 会收到一个 Position 对象，其 coords 属性包含了关键的位置数据：

position.coords.latitude: 纬度 (十进制度数)
position.coords.longitude: 经度 (十进制度数)
position.coords.accuracy: 位置的精度 (米)
position.coords.altitude: 海拔高度 (米，如果可用)
position.coords.speed: 速度 (米/秒，如果可用)
position.coords.heading: 方向 (度，如果可用)

`PositionError` 对象

当获取位置失败时，errorCallback 会收到一个 PositionError 对象，其 code 属性可以帮助我们判断失败的原因：

1: PERMISSION_DENIED - 用户拒绝授权。
2: POSITION_UNAVAILABLE - 无法获取当前位置（例如，网络问题或无法连接到 GPS 卫星）。
3: TIMEOUT - 请求超时。

在地图上显示位置

获取到经纬度后，最常见的应用就是将其显示在地图上。你可以使用各种地图服务提供商（如 Google Maps, OpenStreetMap, 高德地图等）的 API 来实现这一点。

以下是一个使用 Google Maps 的简单示例链接：

javascript

function showPosition(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var mapUrl = `https://maps.google.com/maps?q=${lat},${lon}`;
  window.open(mapUrl, '_blank');
}

HTML5 地理定位 ​

获取当前位置 ​

示例代码 ​

Position 对象 ​