上面包车型地铁示范体现了什么样使用这一个法子获得地方音信,上边包车型地铁言传身教显示了怎么利用那几个办法赢得地点音信

地理定位(Geolocation)API让大家能够取得用户眼下地理地方的新闻(也许至少是正在运作浏览器的系统的岗位)。它不是HTML5规范的一部分,但平时被归组到与HTML5相关的新成效中。

地理定位(Geolocation)API让我们可以获得用户日前地理地点的音讯(只怕至少是正在运维浏览器的系统的职位)。它不是HTML5行业内部的一部分,但时常被归组到与HTML5连锁的新功用中。

1.
用到地理定位

1.
应用地理定位

大家经过全局属性 navigator.geolocation 访问地理定位成效,它会回去2个Geolocation对象。

我们经过全局属性 navigator.geolocation 访问地理定位功效,它会回去多个Geolocation对象。

图片 1

图片 2

 

 

获取当前岗位

取妥当前地点

顾名思义,getCurrentPosition方法能博妥当前的职责,可是地方音信不是由函数本人重临的。大家供给提供2个打响的回调函数,它会在地方音信可用时接触(那样做考虑到了请求地点和信息变得可用之间只怕会有延迟)。上边包车型客车示范展示了哪些行使那么些法子获得地点消息:

顾名思义,getCurrentPosition方法能收获当前的职分,可是地方音讯不是由函数本人再次来到的。大家供给提供3个打响的回调函数,它会在岗位音讯可用时接触(那样做考虑到了请求地点和新闻变得可用之间或然会有延迟)。下边包车型客车示范展现了怎么着使用这几个措施获得地点消息:

<!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>
<!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函数作为该情势的参数。当地点新闻变得可用时,浏览器就会调用内定函数,并传到二个提供岗位详情的Position对象。Position对象格外不难,如下表所示:

本条例子中的脚本调用了getCurrentPosition,并传递displayPosition函数作为该方法的参数。当地点音信变得可用时,浏览器就会调用钦定函数,并传播四个提供岗位详情的Position对象。Position对象十二分不难,如下表所示:

 图片 3

 图片 4

我们确实感兴趣的是Coordinates
对象,它由Position.coords属性再次回到。下表介绍了Coordinates对象的脾性:

小编们实在感兴趣的是Coordinates
对象,它由Position.coords属性再次来到。下表介绍了Coordinates对象的特性:

图片 5

图片 6

不是富有Coordinates对象的数目值都时刻可用。浏览器获取位置新闻的编写制定没有统一的规定,所选用的技艺也有诸多。移动设备越多地布署了GPS、加快度计和电子罗盘设备,这就象征那几个平台具有最可信和最完整的数据。

不是兼具Coordinates对象的多寡值都时刻可用。浏览器获取地点新闻的建制尚未统一的分明,所使用的技巧也有千千万万。移动设备进而多地布局了GPS、加速度计和电子罗盘设备,那就表示那三个平台具有最规范和最完好的数额。

咱俩照样能够为其余设备获得地方音信:浏览器采纳的一种地理定位服务会尝试依照网络音信明确地点。若是你的系统里有Wi-Fi适配器,那么信号范围内的互联网就会与一份互连网目录进行对照,那份目录是街道级景象调查(如谷歌(谷歌)街景服务)结果的一有个别。即使没有Wi-Fi,也能够用ISP所提供的IP地址获得差不离的职分。

作者们还能够为其余装备获得地方音讯:浏览器选取的一种地理定位服务会尝试根据网络新闻明确地点。要是您的体系里有Wi-Fi适配器,那么信号范围内的网络就会与一份网络目录举行相比较,这份目录是街道级景色调查(如谷歌(谷歌(Google))街景服务)结果的一部分。假若没有Wi-Fi,也能够用ISP所提供的IP地址得到大约的地点。

那东西实在很吓人,所以当文书档案使用地理定位功用时,全数浏览器会做的率先件事就是探听用户是不是对其授权,从下图能够看来IE浏览器是何等做的:

这东西实在很可怕,所以当文书档案使用地理定位功能时,全数浏览器会做的首先件事正是探听用户是还是不是对其授权,从下图能够看看IE浏览器是怎样做的:

图片 7

图片 8

若是用户同意此呼吁,浏览器就能博取地点音讯,并在新闻可用时调用回调函数。下图是台式机里IE浏览器显示的遵从:

假定用户同意此呼吁,浏览器就能赢得地点音讯,并在音信可用时调用回调函数。下图是台式机里IE浏览器呈现的法力:

图片 9

图片 10

接下来是手提式有线电话机上展现的效能:

下一场是手提式无线电话机上出示的功用:

图片 11

图片 12

2.
拍卖地理定位错误

2.
处理地理定位错误

笔者们可以给getCurrentPosition方法提供首个参数,它让我们得以钦点1个函数,在获取地点产生错误时调用它。此函数会获取3个PositionError对象,它定义的性质如下:

我们得以给getCurrentPosition方法提供第三个参数,它让大家能够钦点三个函数,在收获地点爆发错误时调用它。此函数会赢得三个PositionError对象,它定义的属性如下:

图片 13

图片 14

code 属性有四个恐怕的值:

code 属性有七个大概的值:

图片 15

图片 16

上边包车型地铁示范显示了什么样用PositionError对象吸收错误。

下边包车型大巴演示呈现了何等用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>
<!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>

塑造错误最简便易行的章程是在浏览器提示时拒绝授权。其出示效果如下:

创制错误最简便易行的格局是在浏览器提醒时拒绝授权。其出示效果如下:

图片 17

图片 18

 

 

3.点名地理定位选择

3.点名地理定位接纳

咱俩得以给getCurrentPosition 方法提供的第多少个参数是1个PositionOptions
对象。这几个效应允许大家得以部分决定地方新闻的拿走方式。下表展现了那几个指标定义的天性:

笔者们能够给getCurrentPosition 方法提供的第⑥个参数是一个PositionOptions
对象。那么些效应允许大家能够部分决定地方音讯的获得方式。下表呈现了这么些目的定义的性质:

图片 19

图片 20

安装highAccuracy属性为true只是请求浏览器给出大概的极品结果,并不有限支撑收获的岗位一定会更确切。对运动装备来说,获得更标准地点的或是格局是剥夺节约财富方式,大概在少数景况下开拓GPS作用(低精度地方音信大概出自Wi-Fi
或基站数量)。别的装备则或者不能够赢得更高精度的数量。修改前面例子的JavaScript代码如下,其出示了在伸手地点时如何使用PositionOptions对象:

设置highAccuracy属性为true只是请求浏览器给出可能的特级结果,并不保障收获的岗位一定会更纯粹。对移动装备来说,获得更可相信地点的大概情势是剥夺节能情势,恐怕在一些情状下打开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>
<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>

那么些剧本有一处有毛病的地点:那里没有创立一个新的PositionOptions
对象,而是创制了三个常备的Object,并定义了报表里的那几个属性。此例申明了不要求得到最高级的精度,并准备在伸手超时前等候2秒,而且愿意承受缓存了不抢先30秒的数额。

本条本子有一处不经常的地方:那里没有开创2个新的PositionOptions
对象,而是创造了一个平常的Object,并定义了表格里的这几个属性。此例申明了不供给赢得最高级的精度,并准备在伸手超时前等待2秒,而且愿意承受缓存了不抢先30秒的数量。

 

 

4.监督检查地点

4.监察和控制地点

能够用watchPosition 方法不断获得有关地方的立异。那几个点子所需的参数和
getCurrentPosition
方法一致,工作办法也同等。它们的区分在于:随着地方产生变更,回调函数会被一再地调用。下边包车型客车例子体现了什么样采用watchPosition 方法:

能够用watchPosition 方法不断取得有关地方的更新。那么些措施所需的参数和
getCurrentPosition
方法一致,工作办法也同样。它们的分别在于:随着地点爆发转移,回调函数会被频仍地调用。上边包车型大巴例证体现了何等行使
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>
<!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值传递给
clearWatch。那里选择在button按钮被按下时举办那几个操作。

在这几个事例里,脚本用
watchPosition方法来监督地点。当大家想要甘休监察和控制时,能够把此措施再次回到的ID值传递给
clear沃特ch。那里选拔在button按钮被按下时实施那一个操作。

 

 

来源:《HTML5上流指南》(《The Definitive Guide to
HTML5》)

来源:《HTML5独尊指南》(《The Definitive Guide to
HTML5》)

相关文章