唯独地点音信不是由函数自身重返的,下边的示范浮现了什么样利用那些措施得到位置音信

地理定位(Geolocation)API让大家可以得到用户眼前地理地方的信息(或者至少是正在运转浏览器的系统的地点)。它不是HTML5正式的一部分,但平日被归组到与HTML5连锁的新成效中。

地理定位(Geolocation)API让我们得以博得用户眼前地理地方的音讯(或者至少是正值运行浏览器的序列的地点)。它不是HTML5规范的一局地,但每每被归组到与HTML5皮之不存毛将焉附的新功用中。

1.
行使地理定位

1.
用到地理定位

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

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

公海赌船网址 1

公海赌船网址 2

 

 

得到当前职分

公海赌船网址,赢得当前地方

顾名思义,getCurrentPosition方法能得到当前的岗位,然而地点音讯不是由函数自身再次回到的。大家须求提供一个成功的回调函数,它会在职位音信可用时接触(那样做考虑到了请求地点和音讯变得可用之间或许会有延期)。上面的演示突显了怎么选取那几个方法取得地方信息:

顾名思义,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>
<!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适配器,那么信号范围内的互连网就会与一份网络目录进行比较,这份目录是街道级景色调查(如谷歌(Google)街景服务)结果的一局地。倘使没有Wi-Fi,也足以用ISP所提供的IP地址获得大致的职位。

咱俩仍是可以为任何设施获得地方消息:浏览器采纳的一种地理定位服务会尝试根据网络新闻确定地点。假若您的连串里有Wi-Fi适配器,那么信号范围内的网络就会与一份互连网目录举行对照,那份目录是街道级景象调查(如Google街景服务)结果的一部分。假诺没有Wi-Fi,也得以用ISP所提供的IP地址获得大约的地方。

那东西实在很吓人,所以当文档使用地理定位效能时,所有浏览器会做的首先件事就是询问用户是还是不是对其授权,从下图可以看看IE浏览器是什么做的:

那东西实在很吓人,所以当文档使用地理定位作用时,所有浏览器会做的首先件事就是摸底用户是不是对其授权,从下图可以观望IE浏览器是什么做的:

公海赌船网址 7

公海赌船网址 8

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

若果用户同意此呼吁,浏览器就能得到位置音信,并在信息可用时调用回调函数。下图是台式机里IE浏览器突显的效应:

公海赌船网址 9

公海赌船网址 10

接下来是手机上显得的法力:

下一场是手机上突显的成效:

公海赌船网址 11

公海赌船网址 12

2.
处理地理定位错误

2.
甩卖地理定位错误

俺们可以给getCurrentPosition方法提供第三个参数,它让大家得以指定一个函数,在取得位置暴发错误时调用它。此函数会获得一个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 方法提供的第两个参数是一个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秒的数码。

以此本子有一处不平凡的地点:那里没有开创一个新的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值传递给
clear沃特ch。这里拔取在button按钮被按下时实施这一个操作。

在那几个例子里,脚本用
watchPosition方法来监督地方。当我们想要截至监控时,可以把此措施再次回到的ID值传递给
clear沃特ch。那里选拔在button按钮被按下时实施那么些操作。

 

 

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

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

相关文章