从零开始的HTML5之旅（六）

WebVincent

2020-03-25

关注关注

HTML5地理定位

??HTML5 Geolocation（地理定位）用于定位用户的位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

??IE9、Firefox、Chrome、Safari以及Opera支持地理定位。对于拥有GPS的设备，定位将更加准确。

地理定位

??用getCurrentPosition()方法获得用户的位置。

getCurrentPosition(successCallback, errorCallback,PositionOptions);

??``getCurrentPosition()方法内包含了三个对象，分别是successCallback对象、errorCallback对象、PositionOptions`对象。

`successCallback`对象

??successCallback对象表示获取到的用户数据位置。此对象包含了coords和timestamp两个属性。

`coords`属性

值	描述
accuracy	精确度
latitude	纬度
longitude	经度
altitude	海拔
altitudeAcuracy	海拔高度的精确度
heading	朝向
speed	速度

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此处显示坐标</p>
    <button onclick="getLocation()">获取坐标</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //检测是否支持地理定位
        if (navigator.geolocation) {
            /*
            运行getCurrentPosition()方法。如果运行成功，
            则向参数showPosition中规定的函数返回一个coordinates对象
            */
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            d1.innerHTML = "无法获取您的位置";
        }
    }

    function showPosition(position) {
        /*
        通过coordinates对象获取到latitude属性和longitude属性
        */
        d1.innerHTML = "维度：" + position.coords.latitude + "<br />" + "经度：" + position.coords.longitude;
    }
</script>

`errorCallback`对象

??errorCallback对象表示返回的错误代码。对象中包含了message属性和code属性。

`code`属性

值	描述
unknow_error	表示不包括在其他错误代码中的错误，可以在message中查找信息。
permission_denied	表示用户拒绝浏览器获取位置信息的请求。
position unavalablf	表示网络不可用或者连接不到卫星。
timeout	表示获取超时时。必须在options中指定了timeout值时才有可能发生这种错误。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此处显示坐标</p>
    <button onclick="getLocation()">获取坐标</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //检测是否支持地理定位
        if (navigator.geolocation) {
            /*
            运行getCurrentPosition()方法。如果运行成功，
            则向参数showPosition中规定的函数返回一个coordinates对象
            运行getCurrentPosition()方法的第二个参数用于处理错误，
            它规定了获取用户位置失败时运行的函数
            在getCurrentPosition()方法运行成功后会向showError函数返回一个errorCallback对象。
            errorCallback对象表示返回的错误代码
            */
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            d1.innerHTML = "无法获取您的位置";
        }
    }

    function showPosition(position) {
        /*
        通过coordinates对象获取到latitude属性和longitude属性
        */
        d1.innerHTML = "维度：" + position.coords.latitude + "<br />" + "经度：" + position.coords.longitude;
    }

    function showError(error) {
        /*
        error.code获取errorCallback对象中的code属性。
        code属性中有四个值，如下
        */
        switch (error.code) {
            case error.PERMISSION_DENIED: //用户不允许定位
                d1.innerHTML = "用户拒绝了地理位置定位请求。";
                break;
            case error.POSITION_UNAVAILABLE:  //无法获取当前位置
                d1.innerHTML = "位置信息不可用。";
                break;
            case error.TIMEOUT:  //超时
                d1.innerHTML = "获取用户位置的请求超时。";
                break;
            case error.UNKNOWN_ERROR:  //未知错误
                d1.innerHTML = "出现未知错误。";
                break;
        }
    }
</script>

`PositionOptions`属性

??PositionOptions接口不继承任何属性。数据格式为json，有3个属性。

属性	描述
enableHighAcuracy	布尔值，表示是否启用高精确度模式，如果启用这个模式，浏览器在获取位置信息时可能需要耗费更多的时间。
Timeout	整数，表示浏览器需要在指定的时间内获取位置信息，否则触发errorCallback。
maximumAge	整数/常量，表示浏览器重新获取位置信息的时间间隔。

`getCurrentPosition()`方法

??若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间