从零开始的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对象表示获取到的用户数据位置。此对象包含了coordstimestamp两个属性。

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响应的日期/时间

相关推荐