亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    解析HTML5 geolocation的實例教程

    測試demo的github地址: github.com/lily1010/html5_geolocation

    HTML5 Geolocation API 用于獲得用戶的地理位置。鑒于該特性可能侵犯用戶的隱私,除非用戶同意,否則用戶位置信息是不可用的。

    一 基于瀏覽器的HTML5查找地理位置

    html5中的GPS定位功能封裝在 navigator.geolocation 屬性里,有三種方法:

    (1) getCurrentPosition 只獲取一次用戶的位置

    (2) watchPosition 返回用戶的當前位置,并繼續(xù)返回用戶移動時的更新位置(就像汽車上的 GPS)。

    (3) clearWatch() – 停止 watchPosition() 方法

    二 getCurrentPosition和 watchPosition方法使用格式是

    getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)

    (1)successCallback表示調用函數(shù)成功以后的回調函數(shù),該函數(shù)帶有一個參數(shù),對象字面量格式,表示獲取到的用戶位置數(shù)據(jù)。

    解析HTML5 geolocation的實例教程

    (2)errorCallback表示返回的錯誤代碼。它包含以下兩個屬性:

    1、message:錯誤信息  2、 code:錯誤代碼。    其中code錯誤代碼包括以下四個值:  1 位置服務被拒絕  2 暫時獲取不到位置信息  3 獲取信息超時  4 未知錯誤

    (3)positionOptions數(shù)據(jù)格式為JSON,有三個可選的屬性:

    1、enableHighAcuracy — 布爾值: 表示是否啟用高精確度模式,如果啟用這種模式,瀏覽器在獲取位置信息時可能需要耗費更多的時間。  2、timeout — 整數(shù): 表示瀏覽需要在指定的時間內獲取位置信息,否則觸發(fā)errorCallback。  3、maximumAge — 整數(shù)/常量: 表示瀏覽器重新獲取位置信息的時間間隔。

    下面來看一下測試例子:(注意要開啟定位后才可以看效果)

    <!DOCTYPE html>    <html>    <head>        <meta charset="utf-8"/>        <title>基于瀏覽器的HTML5查找地理位置</title>       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />     <script>    var options={         enableHighAccuracy:true,   //高精度定位參數(shù)         maximumAge:1000     }     function getLocation(){         if(navigator.geolocation){             //瀏覽器支持geolocation             navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只獲取一次用戶的地理位置函數(shù)             //onSuccess成功返回的回調函數(shù)(必選),onError失敗返回的回調函數(shù)(可選),設置精確度等參數(shù)(可選options)                          //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 繼續(xù)獲取用戶的位置,適合于導航             //onSuccess成功返回的回調函數(shù)(必選),onError失敗返回的回調函數(shù)(可選),設置精確度等參數(shù)(可選options)         }else{             //瀏覽器不支持geolocation             alert ('您的瀏覽器暫不支持定位');         }     }     //成功時     function onSuccess(position){       //返回用戶位置       //經(jīng)度       var longitude =position.coords.longitude;              //緯度       var latitude = position.coords.latitude;              //精確度       var accuracy = position.coords.accuracy;              //高度精確度       var altitudeAccuracy = position.coords.altitudeAccuracy;              //設備正北順時針前進的方位       var heading = position.coords.heading;              //設備外部環(huán)境的移動速度(m/s)       var speed = position.coords.speed;              //當位置捕獲到時的時間戳       var timestamp = position.timestamp;              document.getElementById("container").innerHTML= "您的經(jīng)度是="+longitude+'<br>'       +"您的緯度是="+latitude+'<br>'+"您的精確度是="+accuracy+'<br>'       +"您的高度精確度是="+altitudeAccuracy+'<br>'+"您的設備正北順時針前進的方位是="+heading+'<br>'       +"您的設備外部環(huán)境的移動速度(m/s)是="+speed+'<br>'+"您的當位置捕獲到時的時間戳是="+timestamp+'<br>';     }     //失敗時     function onError(error){       switch(error.code){         case 1:alert("位置服務被拒絕");break;         case 2:alert("暫時獲取不到位置信息");break;         case 3:alert("獲取信息超時");break;         case 4:alert("未知錯誤");break;       }     }     window.onload=getLocation;     </script>  </head>  <body>     <p id="container" style="300px;height: 300px"></p>  </body>  </html>

    上面代碼最好用手機測試,因為谷歌瀏覽器因為被國內封的緣故,定位嘛,你們懂得

    二 HTML5 geolocation調用百度地圖api

    百度地圖的手冊地址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1

    事先說明,html5不是精確定位,所以在地圖上查看效果時總有幾百米的誤差

    <!DOCTYPE html>    <html>    <head>        <meta charset="utf-8"/>        <title>基于瀏覽器的HTML5查找地理位置和調取百度地圖api</title>       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />      <!-- 百度API -->           <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>      <script>     var options={         enableHighAccuracy:true,   //高精度定位參數(shù)         maximumAge:1000     }     function getLocation(){         if(navigator.geolocation){             //瀏覽器支持geolocation             navigator.geolocation.getCurrentPosition(onSuccess,onError,options);  //getCurrentPosition 只獲取一次用戶的地理位置函數(shù)             //onSuccess成功返回的回調函數(shù)(必選),onError失敗返回的回調函數(shù)(可選),設置精確度等參數(shù)(可選options)                          //navigator.geolocation.watchPosition(onSuccess,onError,options);  //watchPosition 繼續(xù)獲取用戶的位置,適合于導航             //onSuccess成功返回的回調函數(shù)(必選),onError失敗返回的回調函數(shù)(可選),設置精確度等參數(shù)(可選options)         }else{             //瀏覽器不支持geolocation             alert ('您的瀏覽器暫不支持定位');         }     }     //成功時     function onSuccess(position){       //返回用戶位置       //經(jīng)度       var longitude =position.coords.longitude;       //緯度       var latitude = position.coords.latitude;       //使用百度地圖API       //創(chuàng)建地圖實例         var map =new BMap.Map("container");       //創(chuàng)建一個坐標       var point =new BMap.Point(longitude,latitude);       //地圖初始化,設置中心點坐標和地圖級別         map.centerAndZoom(point,15);       map.addOverlay(new BMap.Marker(point)); //在地圖上你的位置顯示紅色點點     }     //失敗時     function onError(error){       switch(error.code){         case 1:alert("位置服務被拒絕");break;         case 2:alert("暫時獲取不到位置信息");break;         case 3:alert("獲取信息超時");break;         case 4:alert("未知錯誤");break;       }     }     window.onload=getLocation;     </script>  </head>  <body>     <p id="container" style="300px;height: 300px"></p>  </body>  </html>

    上面代碼已經(jīng)在手機上測試通過了,誤差有點大,還是不適合精確定位,定位到城市還是不錯的

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號