地理定位(Geolocation)API让咱可以得用户眼前地理位置的消息(或者至少是在周转浏览器的网的岗位)地理定位(Geolocation)API让咱可博用户眼前地理位置的音信(或者至少是正在运作浏览器的网的位置)

地理定位(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适配器,那么信号范围外之网络就见面和同客网络目录进行自查自纠,这卖目录是街道级景观调查(如谷歌街景服务)结果的平有些。如果没Wi-Fi,也得据此ISP所提供的IP地址获得约的岗位。

咱们照样可吧另外设施得到位置信息:浏览器采用的一样栽地理定位服务会尝试根据网络消息确定位置。如果你的网里生Wi-Fi适配器,那么信号范围外的网就是会跟同一客网络目录进行对照,这卖目录是街道级景观调查(如谷歌街景服务)结果的一模一样组成部分。如果没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值传递给
clearWatch。这里选择在button按钮被按下时实施此操作。

每当是事例里,脚本用
watchPosition方法来监督位置。当我们纪念要停监控时,可以管这措施返回的ID值传递给
clearWatch。这里选择在button按钮被准下经常实施这个操作。

 

 

来源:《HTML5高不可攀指南》(《The Definitive Guide to
HTML5》)

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

相关文章