html5之使用地理定位

当前位置 : 首页 > 网页制作 > html5 > html5之使用地理定位

html5之使用地理定位

来源: 作者: 时间:2016-01-14 17:05
1)使用地理定位:通过navigator geolocation访问地理定位功能,返回一个Geolocation对象;1 1)Geolocation对象成员:getCurrentPosition(callback,errorCallback,options)获取当前位置;watchPosition(

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;
        }
    
经度: - 纬度: -
海拔高度: - 坐标精度: -
海拔精度: - 行进方向: -
速度: - 时间: -
错误类型: - 错误信息 -

        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

 

 

Tag:
上一篇:HTML5 Mobile Upload
下一篇:html5之拖放
网友评论

<