html5知识点补充—GeoLocation API位置感知

2024年5月27日 127次阅读 来源: 两仪

简单使用getCurrentPosition获取当前位置

Geolocation API的基本功能是查询浏览器当前所处的位置。getCurrentPosition方法能够通过JavaScript异步调用为你提供这样的信息。已通常JavaScript的同步运行或程序流程不同的是，这里的调用从本质来说就是异步的。通过异步函数的调用，JavaScript在后台运行该调用，并在完成时返回给某个函数。异步调用的形式能使查询不阻塞页面其他部分的运行。

getCurrentPosition方法获取浏览器的当前位置。它接受一个必须参数（一个成功时的回调函数）和两个可选参数（一个错误回调函数和一个位置选项对象）：

getCurrentPositon(successCallback [,errorCallback] [,positionOptions])

getCurrentPosition包括下列参数。

  • successCallback: 处理返回坐标的回调

  • errorCallback: (可选) 处理任何错误的函数

  • options: (可选) options对象用来处理如何获取位置

因为getCurrentPosition是异步的，所以它需要知道成功返回时运行哪个函数并为潜在的错误准备处理函数。示例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geolocation</title>
</head>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
    var x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        x.innerHTML = "Latitude: " + position.coords.latitude +
                "<br />Longitude: " + position.coords.longitude;
    }

    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="User denied the request for Geolocation.";
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="Location information is unavailable.";
                break;
            case error.TIMEOUT:
                x.innerHTML="The request to get user location timed out.";
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="An unknown error occurred.";
                break;
        }
    }
</script>
</body>
</html>

使用PositionOptions确定距离

为了更好控制位置信息，你需要使用getCurrentPosition方法的第三个参数PositionOptions。

PositionOptions做为一个对象传递给getCurrentPosition方法，它允许你对该方法的行为进行一定的控制。对于此应用类型，该参数能够有一定的帮助作用。例如，如果应用为基于位置的餐厅移动应用，那么通常返回的位置精确范围太大、无法满足需求。getCurrentPosition的PositionOptions能够设置三种选项，如下所示：

  • enableHighAccuracy: 布尔值，为真时告诉浏览器希望得到设备能够提供的最精确的wehi只。默认不开启。

  • maximunAge: 浏览器会缓存最近获取的的位置以节约电量。此项定义缓存的最长时限。以毫秒为单位，默认为0。

  • timeout: 浏览器返回位置信息的最大超时，以毫秒为单位。默认值为0。

使用watchPositon跟随移动中的位置

watchPosition方法与getCurrentPositon雷同，接受同样的参数。在调用watchPosition后，浏览器会创建一个后台任务并返回一个引用ID用于监视进程。后台任务会获取当前位置、将位置发送给成功回调函数、设置定时器监视位置。定时器每次触发都会获取一个新的位置，并且对位置进行比较确认是否存在“重大”区别。如果新位置与上次位置差别很大，则会使用新位置信息调用成功函数。该进程将一直运行知道使用监视ID调用clearWatch,或者窗口关闭。下面分别是wathcPosition和clearWatch方法的接口。

long watchPosition(successCallback [, errorCallback] [, positionOptions])

参数介绍如下：

  • successCallback: 浏览器确定新位置后，传入位置对象并调用的函数。

  • errorCallback: (可选) 用于处理任何错误的函数。

  • options: (可选) 处理如何获取位置的选项对象。

    void clearWatch(watchID)

参数介绍如下：

  • watchId : 需要终止的监视进程的长整形ID。

    原文作者：两仪
    原文地址: https://segmentfault.com/a/1190000003500164
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞