JavaScript 地理位置 API 指南

摘要：在本教程中，您将学习如何使用地理位置 API，以便在您同意共享的情况下，允许 Web 应用程序访问您的位置。

什么是地理位置 API

地理位置 API 允许 Web 应用程序在您同意共享的情况下访问您的位置。

为什么使用地理位置 API

地理位置 API 对于需要根据用户位置工作的 Web 应用程序非常有用，例如搜索引擎、电子商务网站、地图和天气应用程序。

例如，电子商务网站可以要求您共享您的位置。一旦获得信息，它就可以根据您的位置向您显示产品可用性以及价格和折扣。

类似地，像 Google.com 这样的搜索引擎可以根据您的搜索词和位置返回本地搜索结果。

例如，如果您在旧金山并搜索披萨，Google 会显示您附近的一系列披萨餐厅。

地理位置对象

地理位置 API 可通过 navigator.geolocation 对象获得。

检查是否支持地理位置 API

要检查浏览器是否支持它，您可以测试 geolocation 属性是否存在于 navigator 对象上，如下所示

if (!navigator.geolocation) {
    console.error(`Your browser doesn't support Geolocation`);
}
Code language: JavaScript (javascript)

获取当前位置

要获取用户的当前位置，您可以调用 navigator.geolocation 对象的 getCurrentPosition() 方法。

getCurrentPosition() 方法发送一个异步请求以检测用户的位置，并查询定位硬件（如 GPS）以获取最新数据。

getCurrentPosition() 方法可能会成功或失败。它接受两个可选回调函数，它们将分别在每种情况下执行。

如果 getCurrentPosition() 成功，您将获得用户的定位信息，以 GeolocationCoordinates 对象的形式。

GeolocationCoordinates 对象具有表示位置的 latitude 和 longitude 属性。

JavaScript 地理位置示例

以下示例展示了一个具有一个按钮的简单应用程序。当您点击该按钮时，浏览器会要求您共享您的位置。如果您同意，它将显示您当前的经度和纬度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Geolocation Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <button id="show" class="btn">Show my location</button>
        <div id="message"></div>
    </div>
    <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

以下是 app.js 文件的内容

(() => {
    const message = document.querySelector('#message');

    // check if the Geolocation API is supported
    if (!navigator.geolocation) {
        message.textContent = `Your browser doesn't support Geolocation`;
        message.classList.add('error');
        return;
    }

    // handle click event
    const btn = document.querySelector('#show');
    btn.addEventListener('click', function () {
        // get the current position
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    });


    // handle success case
    function onSuccess(position) {
        const {
            latitude,
            longitude
        } = position.coords;

        message.classList.add('success');
        message.textContent = `Your location: (${latitude},${longitude})`;
    }

    // handle error case
    function onError() {
        message.classList.add('error');
        message.textContent = `Failed to get your location!`;
    }
})();Code language: JavaScript (javascript)