HTML5 地理定位

懒羊羊大王呀

于 2024-08-08 23:45:45 发布

阅读量630

点赞数 28

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_73777400/article/details/141039028

版权

地理定位

概述

实现方法：调用 Web Geolocation API，这是一个浏览器提供的、用于获取用户当前位置信息的 API。Web Geolocation API允许网页在用户同意的情况下访问其地理位置，以便提供基于位置的服务，例如地图显示、位置搜索等。

核心内容

核心的 Geolocation API 调用如下：

navigator.geolocation：这是访问Geolocation API的入口点。如果浏览器支持Geolocation API，navigator.geolocation对象将可用。
getCurrentPosition(successCallback, [errorCallback], [options])：这是navigator.geolocation对象的一个方法，用于获取当前位置。successCallback是位置获取成功时的回调函数，errorCallback是获取失败时的回调函数，options是可选参数，用于定义获取位置的超时时间、最大年龄等。
其中successCallback的形参position（假定）是一个对象，内容如下：
- coords: 一个对象，包含了位置的坐标集合。
  - latitude (纬度): 位置的纬度值，表示在地球上南北方向的角度距离，单位为度。
  - longitude (经度): 位置的经度值，表示在地球上东西方向的角度距离，单位为度。
  - altitude (海拔): 位置的海拔高度，单位为米。
  - accuracy (精度): 位置的估计精度，单位为米。
  - altitudeAccuracy (海拔精度): 海拔估计的精度，单位为米。
  - heading (方向): 旅行的方向，从正北方向开始，单位为度，范围0°至359°。
  - speed (速度): 移动速度，单位为米/秒。
- timestamp: 一个 DOMTimeStamp 表示获取位置信息的时间。
其中errorCallback中的形参error（假定）也是一个对象，内容如下：
- code：一个整数，表示错误类型，可能的值有：
  - PERMISSION_DENIED：用户拒绝了地理位置请求。
  - POSITION_UNAVAILABLE：无法获取位置信息。
  - TIMEOUT：获取位置请求超时。
  - UNKNOWN_ERROR：发生了未知错误。
- message：一个字符串，提供了错误的描述（不过是英文的）。

代码演示

<!DOCTYPE html>
<html>

<head> 
  <meta charset="utf-8"> 
  <title>获取地理位置</title> 
</head>

<body>
  <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
  <button onclick="getLocation()">点我</button>
  <script>
    var x = document.getElementById("demo");
    function getLocation() {
      // 可以使用 if-else 语句对结果进行错误处理，但是
      // 直接进行获取，使用更标准的参数代替 if 语句进行错误处理
      navigator.geolocation.getCurrentPosition(showPosition, showError);  //	第一个参数是成功处理之后回调函数的名字，第二个函数是失败之后回调函数的名字
    }
    function showPosition(position) {
      console.log(position);
      x.innerHTML = "纬度: " + position.coords.latitude +
        "<br>经度: " + position.coords.longitude;
    }
    function showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML = error.message
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "位置信息是不可用的。"
          break;
        case error.TIMEOUT:
          x.innerHTML = "请求用户地理位置超时。"
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML = "未知错误。"
          break;
      }
    }
  </script>
</body>

</html>