站長資訊網
        最全最豐富的資訊網站

        HTML5地理定位實例講解

        HTML5 Geolocation(地理定位)用于定位用戶的位置。

        定位用戶的位置

        HTML5 Geolocation API 用于獲得用戶的地理位置。

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

        瀏覽器支持

        Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).

        注意: Geolocation(地理定位)對于擁有 GPS 的設備,比如 iPhone,地理定位更加精確。

        HTML5 – 使用地理定位

        請使用 getCurrentPosition() 方法來獲得用戶的位置。

        下例是一個簡單的地理定位實例,可返回用戶位置的經度和緯度:

        實例

        <script>  var x=document.getElementById("demo");  function getLocation()    {    if (navigator.geolocation)      {      navigator.geolocation.getCurrentPosition(showPosition);      }    else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}    }  function showPosition(position)    {    x.innerHTML="Latitude: " + position.coords.latitude +     "<br>Longitude: " + position.coords.longitude;     }  </script>

        實例解析:

        檢測是否支持地理定位

        如果支持,則運行 getCurrentPosition() 方法。如果不支持,則向用戶顯示一段消息。

        如果getCurrentPosition()運行成功,則向參數showPosition中規定的函數返回一個coordinates對象

        showPosition() 函數獲得并顯示經度和緯度

        上面的例子是一個非常基礎的地理定位腳本,不含錯誤處理。

        function showError(error)    {    switch(error.code)       {      case error.PERMISSION_DENIED:        x.innerHTML="用戶拒絕對獲取地理位置的請求。"        break;      case error.POSITION_UNAVAILABLE:        x.innerHTML="位置信息是不可用的。"        break;      case error.TIMEOUT:        x.innerHTML="請求用戶地理位置超時。"        break;      case error.UNKNOWN_ERROR:        x.innerHTML="未知錯誤。"        break;      }    }

        錯誤代碼:

        Permission denied – 用戶不允許地理定位

        Position unavailable – 無法獲取當前位置

        Timeout – 操作超時

        在地圖中顯示結果

        如需在地圖中顯示結果,您需要訪問可使用經緯度的地圖服務,比如谷歌地圖或百度地圖:

        function showPosition(position)  {  var latlon=position.coords.latitude+","+position.coords.longitude;  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="  +latlon+"&zoom=14&size=400x300&sensor=false";  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";  }

        在上例中,我們使用返回的經緯度數據在谷歌地圖中顯示位置(使用靜態圖像)。

        Google地圖腳本
        上面的鏈接向您演示如何使用腳本來顯示帶有標記、縮放和拖曳選項的交互式地圖。

        給定位置的信息

        本頁演示的是如何在地圖上顯示用戶的位置。不過,地理定位對于給定位置的信息同樣很有用處。

        實例:

        更新本地信息

        顯示用戶周圍的興趣點

        交互式車載導航系統 (GPS)

        getCurrentPosition() 方法 – 返回數據

        T若成功,則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。

        Geolocation 對象 – 其他有趣的方法

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

        clearWatch() – 停止 watchPosition() 方法

        下面的例子展示 watchPosition() 方法。您需要一臺精確的 GPS 設備來測試該例(比如 iPhone):

        <script>  var x=document.getElementById("demo");  function getLocation()    {    if (navigator.geolocation)      {      navigator.geolocation.watchPosition(showPosition);      }    else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}    }  function showPosition(position)    {    x.innerHTML="緯度: " + position.coords.latitude +     "<br>經度: " + position.coords.longitude;     }  </script>

        【相關推薦】

        1. 特別推薦:“php程序員工具箱”V0.1版本下載

        2. 免費h5在線視頻教程

        3. php.cn原創html5視頻教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 精品久久无码中文字幕| 国产精品久久久久无码av| 精品一区二区三区免费毛片爱| 国产高清精品在线| 国产精品无码专区| 午夜三级国产精品理论三级| 欧美精品在线一区| 国产成人A人亚洲精品无码| 亚洲中文字幕无码久久精品1| 国产午夜亚洲精品国产成人小说| 麻豆精品久久久一区二区| 国产精品一区二区久久不卡| 亚洲精品成人片在线观看精品字幕| 国产亚州精品女人久久久久久| 蜜臀精品国产高清在线观看| 亚洲欧美精品丝袜一区二区| 亚洲精品免费视频| 国产69精品久久久久777| 正在播放酒店精品少妇约| 久久九九久精品国产免费直播| 一区二区三区精品国产欧美| 精品精品国产高清a毛片牛牛| 国产精品久久久久国产A级| 亚洲日韩一页精品发布| 亚洲精品国产va在线观看蜜芽| 欧美精品福利在线视频 | 亚洲福利精品电影在线观看| 精品无码国产污污污免费网站国产| 9999国产精品欧美久久久久久| 国产精品久久久久影院嫩草| 国产精品嫩草视频永久网址| 国产精品久久久久久搜索| 国产伦精品一区二区三区女 | 国产精品电影在线| 国产精品成人h片在线| 国产成人精品久久| 国产国拍亚洲精品福利| 久久99精品国产一区二区三区| 老司机国内精品久久久久| 国产A级毛片久久久精品毛片 | 午夜精品视频在线|