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

黄舟
Lepaskan: 2017-03-15 16:03:08
asal
1657 orang telah melayarinya

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;
        }
Salin selepas log masuk
    <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>
Salin selepas log masuk
        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;
        }
Salin selepas log masuk

Atas ialah kandungan terperinci html5之使用地理定位的代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan