JavaScript 定位 API

定位 API 是一个 Web API，提供了 JavaScript 接口来访问用户的地理位置数据。定位 API 包含了多种方法和属性，可以用来在你的网站上获取用户的地理位置。

它通过设备的 GPS 来检测用户的位置。位置的准确性取决于 GPS 设备的精度。

因为位置信息涉及用户的隐私，所以在访问位置信息前会请求权限。如果用户授予了权限，网站就可以访问纬度、经度等信息。

有时，开发者需要在网站上获取用户的位置。例如，如果你正在创建类似于 Ola、Uber 等类型的应用程序，你需要知道用户的位置以便接送他们。

定位 API 允许用户与特定的网站分享他们的位置。

定位 API 的实际应用场景

以下是定位 API 的实际应用场景：

获取用户的坐标，并在地图上显示它们。
在照片中标记用户的位置。
向用户推荐附近的商店、美食广场、加油站等。
获取当前位置以配送产品或食物。
从用户的当前位置接送他们。

使用定位 API

要使用定位 API，可以使用窗口对象的 navigator 属性。Navigator 对象包含 geolocation 属性，其中包含了各种用于操作用户位置的方法和属性。

语法

按照下面的语法使用定位 API。

var geolocation = window.navigator.geolocation;

或者

var geolocation = navigator.geolocation;

这里，定位对象允许你访问位置坐标。

示例：检查浏览器支持情况

使用 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.

定位方法

以下是定位 API 的方法。

方法	描述
getCurrentPosition()	用于检索网站用户的当前地理位置。
watchPosition()	用于连续更新用户的实时位置。
clearWatch()	清除使用 watchPosition() 方法进行的持续位置监控。

位置属性

getCurrentPosition() 方法会执行你传入的回调函数。回调函数接受一个对象作为参数，该对象包含有关用户位置的信息。

下面列出了位置对象的所有属性。

属性	类型	描述
coords	对象	这是一个作为 `getCurrentPosition()` 方法回调函数参数的对象。它包含下面的属性。
coords.latitude	数字	包含当前位置的纬度（十进制度）。范围是[-90.00, +90.00]。
coords.longitude	数字	包含当前位置的经度（十进制度）。范围是[-180.00, +180.00]。
coords.altitude	数字	可选属性，指定了相对于 WGS 84 椭球体的高度估计值（米）。
coords.accuracy	数字	也是可选属性，包含纬度和经度估计值的准确性（米）。
coords.altitudeAccuracy	数字	[可选]。包含高度估计值的准确性（米）。
coords.heading	数字	[可选]。包含关于设备当前运动方向的信息（度），从真北顺时针计算。
coords.speed	数字	[可选]。包含设备当前的地面速度（米/秒）。
timestamp	日期	包含关于位置信息检索的时间以及 Position 对象创建的时间。

获取用户位置

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

语法

用户可以按照下面的语法使用 getCurrentPosition() 方法来获取当前位置。

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

参数

getCurrentPosition() 方法接受三个参数：

successCallback：当方法成功获取用户位置时，将调用此函数。
errorCallback：当方法在访问用户位置时抛出错误时，将调用此函数。
Options：这是个可选参数，是一个包含诸如超时时间、缓存年龄等属性的对象。

允许网站访问您的位置

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

您可以在下面的图中看到权限提示。

示例

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

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

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

<html>
<body>
  <h3> 位置信息 </h3>
  <button onclick="findLocation()">查找位置</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!";
      }
    }
    // 回调函数
    function getCords(coords) {
      output.innerHTML += "当前位置是: <br>";
      output.innerHTML += "纬度: " + coords.coords.latitude + "<br>";
      output.innerHTML += "经度: " + coords.coords.longitude + "<br>";
      output.innerHTML += "精度: " + coords.coords.accuracy + "<br>";
      output.innerHTML += "海拔: " + coords.coords.altitude + "<br>";
    }
  </script>
</body>
</html>

定位错误

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

在以下情况下，可能会出现错误：

用户拒绝了访问位置的权限。
无法获得位置信息。
请求位置超时。
也可能产生任意错误。

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

属性	类型	描述
code	数字	包含错误代码。
message	字符串	包含错误信息。

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

代码	常量	描述
0	UNKNOWN_ERROR	当定位对象的方法无法检索位置时返回未知错误代码 0。
1	PERMISSION_DENIED	当用户拒绝了访问位置的权限。
2	POSITION_UNAVAILABLE	当无法找到设备的位置。
3	TIMEOUT	当定位对象的方法无法找到用户的位置。

错误处理示例

我们使用 getCurrentPosition() 方法在 findLocation() 函数中处理错误。我们在 getCurrentPosition() 方法中传入了 errorCallback() 函数作为第二个参数来处理错误。

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

当你点击“查找位置”按钮时，它会弹出一个提示框询问你是否授权访问位置。如果你点击“阻止”，它会显示错误信息。

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

<html>
<body>
<div id="output"></div>
<button onclick="findLocation()">查找位置</button>
<script>
const output = document.getElementById("output");
function findLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getCords, errorCallback);
  } else {
    output.innerHTML += "此浏览器不支持地理定位功能!";
  }
}
// 回调函数
function getCords(coords) {
  output.innerHTML += "当前位置是: <br>";
  output.innerHTML += "纬度: " + coords.coords.latitude + "<br>";
  output.innerHTML += "经度: " + coords.coords.longitude + "<br>";
}
// 错误处理函数
function errorCallback(err) {
  switch (err.code) {
    case err.PERMISSION_DENIED:
      output.innerHTML += "您拒绝了访问设备的位置";
      break;
    case err.POSITION_UNAVAILABLE:
      output.innerHTML += "您的位置不可用。";
      break;
    case err.TIMEOUT:
      output.innerHTML += "请求超时，无法获取您的位置。";
      break;
    case err.UNKNOWN_ERROR:
      output.innerHTML += "获取您的位置时发生了未知错误。";
      break;
  }
}
</script>
</body>
</html>

定位选项

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

下面是您可以作为选项对象键传递的选项列表：

属性	类型	描述
enableHighAccuracy	Boolean	表示您是否希望获取最准确的位置。
timeout	Number	接受毫秒数值，表示您等待获取位置数据的时间。
maximumAge	Number	接受毫秒数值，指定缓存位置的最大年龄。

示例

下面的代码查找最准确的位置。我们还设置了选项对象中的 maximumAge 和 timeout 属性的毫秒数。

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

<html>
<body>
<div id="output"></div>
<button onclick="findLocation()">查找位置</button>
<script>
const output = document.getElementById("output");
function findLocation() {
  if (navigator.geolocation) {
    // 定位选项
    const options = {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    };
    navigator.geolocation.getCurrentPosition(getCords, errorfunc, options);
  } else {
    output.innerHTML += "此浏览器不支持地理定位功能!";
  }
}
// 回调函数
function getCords(coords) {
  output.innerHTML += "当前位置是: <br>";
  output.innerHTML += "纬度: " + coords.coords.latitude + "<br>";
  output.innerHTML += "经度: " + coords.coords.longitude + "<br>";
}
function errorfunc(err) {
  output.innerHTML += "错误信息是 - " + err.message + "<br>";
}
</script>
</body>
</html>

监控用户的当前位置

watchPosition() 方法允许你跟踪用户的实时位置。它返回一个 ID，当你要停止跟踪用户时，可以使用这个 ID 和 clearWatch() 方法。

语法

遵循下面的 watchPosition() 方法语法来跟踪用户的实时位置。

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

errorCallback 和 options 是可选参数。

如果你想停止跟踪用户，可以遵循下面的语法。

navigator.geolocation.clearWatch(id);

clearWatch() 方法接受由 watchPosition() 方法返回的 id 作为参数。

示例

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

我们使用 getCords() 函数作为 watchPosition() 方法的回调函数，在其中打印用户的纬度和经度。

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

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

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

<html>
<body>
<button onclick="findLocation()">查找位置</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>跟踪已停止!";
    }, 30000); // 30秒后停止跟踪。
  } else {
    output.innerHTML += "<br>此浏览器不支持地理定位功能!";
  }
}
// 回调函数
function getCoords(location) {
  let latitude = location.coords.latitude;
  let longitude = location.coords.longitude;
  output.innerHTML += `<br> 纬度: ${latitude}, 经度: ${longitude}`;
}
</script>
</body>
</html>