html5之使用地理定位的代码分享

百变鹏仔 2个月前 (10-18) #H5教程

文章标签地理

1)使用地理定位：

通过navigator.geolocation访问地理定位功能，返回一个Geolocation对象；

1.1）Geolocation对象成员：

getCurrentPosition(callback,errorCallback,options)——获取当前位置；

watchPosition(callback,error,options)——开始监控当前位置；

立即学习“前端免费学习笔记（深入）”；

clearWatch(id)——停止监控当前位置；

1.1.1）浏览器调用getCurrentPosition的callback函数的参数时，会传入一个提供位置详情的position对象；

position对象成员：

coords——返回当前位置的坐标，即Coordinates对象；

timestamp——返回获取坐标信息的时间；

Coordinates对象成员：

latitude——返回用十进制表示的纬度；

longitude——返回用十进制表示的经度；

altitude——返回用米表示的海拔高度；

accuracy——返回用米表示的坐标精度；

altitudeAccuracy——返回用米表示的海拔精度；

heading——返回用度表示的行进方向；

speed——返回用米/秒表示的行进速度；

2）处理地理定位错误：

getCurrentPosition(callback,errorCallback,options)方法的第二个参数，它让我们可以指定一个函数，在获取位置发生错误时调用它。此函数会获得一个PositionError对象；

PositionError对象成员：

code——返回代表错误类型的代码；

=1——用户未授权使用地理定位功能；

=2——不能确定位置；

=3——请求位置的尝试已超时；

message——返回描述错误的字符串；

3）指定地理定位选项：

getCurrentPosition(callback,errorCallback,options)方法提供的第三个参数是一个PositionOptions对象。

PositionOptions对象的成员：

enableHighAccuracy——告诉浏览器我们希望得到可能的最佳结果；

timeout——限制请求位置的事件，设置多少毫秒后会报告一个超时错误；

maximumAge——告诉浏览器我们愿意接受缓存过的位置，只要它不早于指定的毫秒数；

4）监控位置：

watchPosition方法不断获得关于位置的更新。所需参数与getCurrentPosition方法相同，工作方式也一样。

区别在于：随着位置发生改变，回调函数会被反复地调用。

       table{           border-collapse: collapse;       }        th,td{            padding: 4px;        }        th{            text-align: right;        }

    <table border="1">        <tr>            <th>经度：</th><td id="longitude">-</td>            <th>纬度：</th><td id="latitude">-</td>        </tr>        <tr>            <th>海拔高度：</th><td id="altitude">-</td>            <th>坐标精度：</th><td id="accuracy">-</td>        </tr>        <tr>            <th>海拔精度：</th><td id="altitudeAccuracy">-</td>            <th>行进方向：</th><td id="heading">-</td>        </tr>        <tr>            <th>速度：</th><td id="speed">-</td>            <th>时间：</th><td id="timestamp">-</td>        </tr>        <tr>            <th>错误类型:</th><td id="errcode">-</td>            <th>错误信息</th><td id="errormessage">-</td>        </tr>    </table><pre name="code" class="html">    <button id="pressme">Cancel Watch</button>

        var options={            enableHighAccuracy: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 properties=["longitude","latitude","altitude","accuracy","altitudeAccuracy","heading","speed"];            for(var i=0;i<properties.length;i++){                var value=pos.coords[properties[i]];                document.getElementById(properties[i]).innerHTML=value;            }            document.getElementById("timestamp").innerHTML=pos.timestamp;        }        function handleError(err){            document.getElementById("errcode").innerHTML=err.code;            document.getElementById("errmessage").innerHTML=err.message;        }

文章推荐

html5之使用地理定位的代码分享

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集