HTML 地理定位 API

定位用户位置

地理定位 API 用于访问用户的当前位置。

由于这可能涉及隐私问题，因此除非用户批准，否则位置信息不可用。

注意：地理定位 API 仅在安全上下文（如 HTTPS）中可用。

提示：对于带有 GPS 的设备（如智能手机或智能手表），地理定位 API 的准确性最高。

浏览器支持

表格中的数字指定了完全支持地理定位的第一个浏览器版本。

使用 HTML 地理定位 API

地理定位 API 通过调用 navigator.geolocation 来访问。这将使浏览器询问用户是否允许访问其位置数据。如果用户接受，浏览器将搜索设备上可用的最佳功能来访问此信息（例如 GPS）。

getCurrentPosition() 方法用于返回用户的当前位置。

下面的示例返回用户当前位置的纬度和经度：

实例

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

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    x.innerHTML = "此浏览器不支持地理定位。";
  }
}

function success(position) {
  x.innerHTML = "纬度：" + position.coords.latitude +
  "<br>经度：" + position.coords.longitude;
}

function error() {
  alert("抱歉，无法获取位置信息。");
}
</script>

亲自试一试

示例解释：

• 检查是否支持地理定位
• 如果支持地理定位，则运行 getCurrentPosition() 方法。否则，向用户显示一条消息
• success() 函数以纬度和经度输出用户的位置
• 如果在 getCurrentPosition() 中浏览器检索到错误，error() 函数会弹出一个文本警告

错误处理和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它指定一个函数，在获取用户位置失败时运行。

下面是一个更具体的错误处理示例：

实例

function error(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;
  }
}

亲自试一试

特定位置的信息

地理定位对于特定位置的信息也非常有用，例如：

• 最新的本地信息
• 显示用户附近的兴趣点
• 逐向导航（GPS）

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 方法在成功时返回一个对象。纬度、经度和精度属性始终返回。如果可用，则返回其他属性：

地理定位对象 - 其他有趣的方法

地理定位对象还有其他有趣的方法：

• watchPosition() - 返回用户的当前位置，并在用户移动时持续返回更新的位置（如汽车中的 GPS）。
• clearWatch() - 停止 watchPosition() 方法。

下面的示例展示了 watchPosition() 方法。您需要一个精确的 GPS 设备来测试此方法（如智能手机）：

实例

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

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(success, error);
  } else {
    x.innerHTML = "此浏览器不支持地理定位。";
  }
}

function success(position) {
  x.innerHTML = "纬度：" + position.coords.latitude +
  "<br>经度：" + position.coords.longitude;
}

function error(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "用户拒绝了地理定位请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "位置信息不可用。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "发生未知错误。"
      break;
  }
}
</script>

亲自试一试