Javascript 简明教程

JavaScript - Geolocation API

Geolocation API

Geolocation API 是一种 Web API，提供 JavaScript 接口以访问用户地理位置数据。Geolocation API 包含可在你的网站上用于访问用户位置的各种方法和属性。

使用设备的 GPS 检测用户所在位置。位置的准确性取决于 GPS 设备的准确性。

由于位置信息会危害用户的隐私，因此它在访问位置之前会要求获得许可。如果用户授予许可，网站就可以访问纬度、经度等信息。

有时，开发人员需要在网站上获取用户的位置。例如，如果你正在创建类似 Ola 和 Uber 的应用程序，则需要了解用户的位置，以便接送他们乘坐。

Geolocation API 允许用户与特定网站共享位置。

Real-time use cases of the Geolocation API

以下是 Geolocation API 的实时用例。

  1. 获取用户的位置坐标，在地图上显示它们。

  2. 在照片上标记用户的位置。

  3. 向用户推荐附近的商店、美食广场、加油站等。

  4. 获取产品或食品配送的当前位置。

  5. 从他们的当前位置接送用户乘车。

Using the Geolocation API

若要使用地理位置 API，可以使用窗口对象的“navigator”属性。Navigator 对象包含“geolocation”属性，该属性包含各种属性和用于操作用户位置的方法。

Syntax

按照以下语法使用地理位置 API。

var geolocation = window.navigator.geolocation;
OR
var geolocation = navigator.geolocation;

在此，地理位置对象可让你访问位置坐标。

Example: Checking the browser support

使用 navigator，你可以检查用户的浏览器是否支持 Geolocation.geolocation 属性。

下面的代码会根据地理位置是否得到支持来对应地打印消息。

首先，我们将数据转换为 JSON 格式。然后，我们将数据转换为字符串并在网页上打印。

<html>
<body>
  <div id = "output"> </div>
  <script>
    const output = document.getElementById("output");
    if (navigator.geolocation) {
      output.innerHTML += "Geolocation is supported by your browser."
    } else {
      output.innerHTML += "Geolocation is not supported by your browser."
    }
  </script>
  </body>
</html>
Geolocation is supported by your browser.

Geolocation Methods

以下是地理位置 API 的方法。

Method

Description

getCurrentPosition()

用于获取网站用户的当前地理位置。

watchPosition()

用于持续更新用户的实时位置。

clearWatch()

若要使用 watchPosition() 方法清除持续监视用户的定位，请执行此操作。

The Location Properties

getCurrentPosition() 方法会执行你作为参数传递的回调函数。该回调函数取对象作为一个参数。参数对象包含有关用户位置信息的不同属性。

在此，我们在下表中列出了位置对象的所有属性。

Property

Type

Description

coords

objects

它是作为 getCurrentPosition() 方法回调函数的参数所获得的对象。它包含以下属性。

coords.latitude

Number

它包含当前纬度，以十进制度为单位。数值范围为 [-90.00，+90.00]。

coords.longitude

Number

它包含当前经度，以十进制度为单位。数值范围为 [-180.00，+180.00]。

coords.altitude

Number

它是可选属性，且以高于 WGS 84 椭圆体的高度（以米为单位）指定高度估计值。

coords.accuracy

Number

它也是可选属性，且包含纬度和经度估计值的精度（以米为单位）。

coords.altitudeAccuracy

Number

【可选】它包含高度估计值的精度（以米为单位）。

coords.heading

Number

【可选】它包含设备当前顺时针相对于真北的运动方向信息（以度为单位）。

coords.speed

Number

[可选]。它包含以米/秒为单位的设备当前的地速。

timestamp

date

它包含在检索位置信息和创建 Position 对象时的信息。

Getting User’s Location

您可以使用 getCurrentPosition() 方法获取用户的当前位置。

Syntax

用户可以遵循以下语法以使用 getCurrentPosition() 方法获取用户的当前位置。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Parameters

getCurrentPosition() 对象采用 3 个参数。

  1. successCallback − 在该方法成功检索到用户位置时会调用此函数。

  2. errorCallback − 在该方法在访问用户位置时抛出错误时会调用此函数。

  3. Options − 它是一个可选参数。它是一个包含超时时间、最大年龄等属性的对象。

Permitting the website to access your location

每当任何网站尝试访问您的位置时，浏览器都会弹出权限警报框。如果您单击“允许”，它可以获取您的位置详细信息。否则，它会抛出错误。

您可以在下图中看到权限弹出窗口。

Example

在以下代码中，我们使用 getCurrentPosition() 方法以获取用户的位置。该方法调用getCords() 函数以获取当前位置。

在getCords() 函数中，我们打印cords 对象各种属性的值。

首先，我们将数据转换为 JSON 格式。然后，我们将数据转换为字符串并在网页上打印。

<html>
<body>
  <h3> Location Information </h3>
  <button onclick = "findLocation()"> Find Location </button>
  <p id = "output"> </p>
  <script>
    const output = document.getElementById("output");
    function findLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getCords); //
      }
      else {
        output.innerHTML += "Geo Location is not supported by this browser!";
      }
    }
    // Callback function
    function getCords(coords) {
      output.innerHTML += "The current position is: <br>";
      output.innerHTML += "Latitude: " + coords.coords.latitude + "<br>";
      output.innerHTML += "Longitude: " + coords.coords.longitude + "<br>";
      output.innerHTML += "Accuracy: " + coords.coords.accuracy + "<br>";
      output.innerHTML += "Altitude: " + coords.coords.altitude + "<br>";
    }
  </script>
</body>
</html>

Geolocation Errors

getCurrentPosition() 方法将回调函数作为第二个参数以处理错误。回调函数可以将错误对象作为参数。

在以下情况下，可能会发生错误。

  1. 当用户拒绝访问位置时。

  2. 当位置信息不可用时。

  3. 当用于位置的请求超时时。

  4. 它还可以生成任何随机错误。

以下是错误对象属性的列表。

Property

Type

Description

code

Number

它包含错误代码。

message

String

它包含错误消息。

以下是不同错误代码的列表。

Code

Constant

Description

0

UNKNOWN_ERROR

当地址对象的方法无法获取地址时，它返回 0 码表示未知错误。

1

PERMISSION_DENIED

当用户已拒绝访问地址的权限。

2

POSITION_UNAVAILABLE

当它无法查找设备的地址。

3

TIMEOUT

当地址对象的方法无法查找用户的地址。

Example: Error Handling

我们在下面的代码中使用 findLocation() 函数中的 getCurrentPosition() 方法。我们已将 errorCallback() 函数传递为 getCurrentPosition() 方法的第二个参数，以处理错误。

在 errorCallback() 函数中，我们使用 switch case 语句，根据错误代码打印不同的错误消息。

当您单击找出位置按钮时，它将向您显示一个弹出框，要求访问地址的权限。如果您单击“阻止”，它将向您显示一个错误。

首先，我们将数据转换为 JSON 格式。然后，我们将数据转换为字符串并在网页上打印。

<html>
<body>
<div id = "output"> </div>
<button onclick = "findLocation()"> Find Location </button>
<script>
const output = document.getElementById("output");
function findLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getCords, errorCallback); //
  }
  else {
    output.innerHTML += "Geo Location is not supported by this browser!";
  }
}
// Callback function
function getCords(coords) {
  output.innerHTML += "The current position is: <br>";
  output.innerHTML += "Latitude: " + coords.coords.latitude + "<br>";
  output.innerHTML += "Longitude: " + coords.coords.longitude + "<br>";
}
// Function to handle error
function errorCallback(err) {
  switch (err.code) {
    case err.PERMISSION_DENIED:
      output.innerHTML += "You have denied to access your device's location";
      break;
    case err.POSITION_UNAVAILABLE:
      output.innerHTML += "Your position is not available.";
      break;
    case err.TIMEOUT:
      output.innerHTML += "Request timed out while fetching your location.";
      break;
    case err.UNKNOWN_ERROR:
      output.innerHTML += "Unknown error occurred while fetching your location.";
      break;
  }
}
</script>
</body>
</html>

Geolocation Options

getCurrentPosition() 方法将包含选项的对象作为一个第三参数。

以下是您可以传递给选项对象的键形式的选项的列表。

Property

Type

Description

enableHighAccuracy

Boolean

它表示您是否希望获取最准确的地址。

timeout

Number

它将毫秒数作为值，表示您要等待获取位置数据的时间。

maximumAge

Number

它将毫秒数作为值，指定缓存地址的最大过时时间。

Example

下面的代码将查找最准确的地址。此外，我们已将毫秒数设置为 options 对象的最大年龄和超时属性。

首先，我们将数据转换为 JSON 格式。然后，我们将数据转换为字符串并在网页上打印。

<html>
<body>
<div id = "output"> </div>
<button onclick = "findLocation()"> Find Location </button>
<script>
  const output = document.getElementById("output");
  function findLocation() {
    if (navigator.geolocation) {
      // Options for geolocation
      const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      };
      navigator.geolocation.getCurrentPosition(getCords, errorfunc, options);
    }
    else {
      output.innerHTML += "Geo Location is not supported by this browser!";
    }
  }
  // Callback function
  function getCords(coords) {
    output.innerHTML += "The current position is: <br>";
    output.innerHTML += "Latitude: " + coords.coords.latitude + "<br>";
    output.innerHTML += "Longitude: " + coords.coords.longitude + "<br>";
  }
  function errorfunc(err) {
    output.innerHTML += "The error message is - " + err.message + "<br>";
  }
</script>
</body>
</html>

Watching the Current Location of the User

watchPosition() 方法允许您跟踪用户的实时地址。它返回一个 ID，我们可以在您想停止跟踪用户时使用 clearWatch() 方法。

Syntax

按照以下语法，使用 watchPosition() 方法来跟踪用户的实时地址。

var id = navigator.geolocation.watchPosition(successCallback, errorCallback, options)

errorCallback 和 options 是可选参数。

如果您想要停止追踪用户，您可以按照以下指令执行。

navigator.geolocation.clearWatch(id);

clearWatch() 方法将 watchPosition() 方法返回的 ID 作为其参数。

Example

在下面的代码中，我们使用地理位置对象的 watchPosition () 方法来获取用户的连续位置。

我们使用 getCords() 函数作为 watchPosition() 方法的回调，在这里打印用户位置的经度和维度。

在 findLocation() 方法中，我们使用 setTimeOut() 方法在 30 秒后停止追踪。

在输出中，您可以看到代码多次打印用户的的位置。

首先，我们将数据转换为 JSON 格式。然后，我们将数据转换为字符串并在网页上打印。

<html>
<body>
  <button onclick = "findLocation()"> Find Location </button>
  <div id = "output"> </div>
  <script>
    let output = document.getElementById("output");
    function findLocation() {
      if (navigator.geolocation) {
        let id = navigator.geolocation.watchPosition(getCoords);
        setTimeout(function () {
          navigator.geolocation.clearWatch(id);
          output.innerHTML += "<br>Tracking stopped!";
        }, 30000); // Stop tracking after 30 seconds.
      } else {
        output.innerHTML += "<br>Geo Location is not supported by this browser!";
      }
    }
    // Callback function
    function getCoords(location) {
      let latitude = location.coords.latitude;
      let longitude = location.coords.longitude;
      output.innerHTML += `<br> Latitude: ${latitude}, Longitude: ${longitude}`;
    }
  </script>
</body>
</html>