行使地理定位

地理定位(吉优location)API让我们能够收获用户日前地理地方的音信(恐怕至少是正在运转浏览器的连串的岗位)。它不是HTML五正经的一有个别,但经常被归组到与HTML伍有关的新职能中。

1.
使用地理定位

必发bifa88手机客服端,我们通过全局属性 navigator.geolocation 访问地理定位功效,它会回去一个吉优location对象。

必发bifa88手机客服端 1

 

赢伏贴前地方

顾名思义,getCurrentPosition方法能取稳妥前的职位,但是地方音信不是由函数自己再次来到的。大家要求提供三个中标的回调函数,它会在职位音讯可用时接触(那样做思量到了请求地点和音讯变得可用之间或者会有延迟)。上面包车型大巴以身作则展示了什么样使用那个点子赢得地方信息:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取当前位置</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }
</script>
</body>
</html>

这一个事例中的脚本调用了getCurrentPosition,并传递displayPosition函数作为该措施的参数。当地方消息变得可用时,浏览器就会调用钦点函数,并传到1个提供岗位详情的Position对象。Position对象13分不难,如下表所示:

 必发bifa88手机客服端 2

我们的确感兴趣的是Coordinates
对象,它由Position.coords属性重临。下表介绍了Coordinates对象的属性:

必发bifa88手机客服端 3

不是颇具Coordinates对象的数量值都时刻可用。浏览器获取地点音信的体制未有统一的规定,所利用的技能也有无数。移动装备进而多地配置了GPS、加快度计和电子罗盘设备,那就意味着那么些平台具有最纯粹和最完好的多寡。

咱俩还能为任何设施获得地点音讯:浏览器选择的一种地理定位服务会尝试依据互连网新闻鲜明地方。借使你的系统里有Wi-Fi适配器,那么频域信号范围内的网络就会与壹份网络目录实行对照,那份目录是街道级景象侦察(如谷歌(谷歌(Google))街景服务)结果的一有的。假诺未有Wi-Fi,也得以用ISP所提供的IP地址获得大约的岗位。

那东西实在很可怕,所以当文书档案使用地理定位成效时,全体浏览器会做的首先件事就是摸底用户是还是不是对其授权,从下图能够观察IE浏览器是什么样做的:

必发bifa88手机客服端 4

若果用户同意此呼吁,浏览器就能获得地方消息,并在音信可用时调用回调函数。下图是台式机里IE浏览器展现的作用:

必发bifa88手机客服端 5

然后是手提式有线电话机上呈现的效果:

必发bifa88手机客服端 6

2.
甩卖地理定位错误

小编们能够给getCurrentPosition方法提供第贰个参数,它让我们得以钦命二个函数,在获取地点产生错误时调用它。此函数会获得贰个PositionError对象,它定义的性质如下:

必发bifa88手机客服端 7

code 属性有多个或许的值:

必发bifa88手机客服端 8

上面包车型大巴示范展现了怎么用PositionError对象吸收错误。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用PositionError处理错误</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition,handleError);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

制作错误最简易的措施是在浏览器提示时拒绝授权。其出示效果如下:

必发bifa88手机客服端 9

 

三.点名地理定位接纳

我们可以给getCurrentPosition 方法提供的第柒个参数是多少个PositionOptions
对象。这一个成效允许大家得以部分决定地方音信的获得格局。下表突显了这些目的定义的习性:

必发bifa88手机客服端 10

设置highAccuracy属性为true只是请求浏览器给出恐怕的一流结果,并不保险收获的职位一定会更加纯粹。对活动设备来说,得到更加准确地方的或许格局是剥夺节约财富情势,或然在1些意况下开辟GPS效率(低精度地点消息大概出自Wi-Fi
或基站数量)。别的装置则恐怕一点都不大概取得更加高精度的数目。修改前边例子的JavaScript代码如下,其出示了在呼吁地方时怎么接纳PositionOptions对象:

<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    navigator.geolocation.getCurrentPosition(displayPosition,handleError,options);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>

其1剧本有一处不通常的地方:那里未有开创3个新的PositionOptions
对象,而是创设了1个常见的Object,并定义了报表里的那个属性。此例申明了不供给赢得最高级的精度,并准备在呼吁超时前等待贰秒,而且愿意接受缓存了不抢先30秒的数据。

 

四.监察和控制地方

可以用watchPosition 方法不断赢得有关地点的更新。那一个主意所需的参数和
getCurrentPosition
方法同样,工作格局也1律。它们的界别在于:随着地点产生变更,回调函数会被一再地调用。上边包车型大巴例证展现了怎么着采用watchPosition 方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用watchPosition</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<button id="pressme">Cancel Watch</button>
<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    var watchID = navigator.geolocation.watchPosition(displayPosition,handleError,options);
    document.getElementById("pressme").onclick = function(e){
        navigator.geolocation.clearWatch(watchID);
    }
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

在那么些事例里,脚本用
watchPosition方法来监督地点。当大家想要甘休监控时,能够把此措施重临的ID值传递给
clear沃特ch。那里选拔在button按钮被按下时实施这些操作。

 

来源:《HTML5权威指南》(《The Definitive Guide to
HTML5》)

相关文章