婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > HTML5的Geolocation地理位置定位API使用教程

HTML5的Geolocation地理位置定位API使用教程

熱門標簽:ai電銷機器人連接網關 鄭州電銷外呼系統違法嗎 威海營銷外呼系統招商 濟南辦理400電話 農村住宅地圖標注 漳州人工外呼系統排名 鶴壁手機自動外呼系統怎么安裝 跟電銷機器人做同事 中紳電銷智能機器人

在手持設備如此普遍的今天,位置信息對于應用程序來講是極其重要的,打車應用可以根據用戶的位置信息呼叫附近的車輛,團購軟件可以根據當前的位置推薦附近的影院和美食,地圖應用可以根據用戶的位置快速規劃到目的地的路線,可以說位置信息對于移動應用是不可或缺的。
為了順應這個潮流,HTML5為我們提供了Geolocation庫,有了它我們就能夠在Web應用中輕而易舉地實現上述這些功能。那么今天我就為大家介紹一下這個庫的使用。

基本用法 
首先,我們可以從瀏覽器的navigator對象中通過geolocation屬性獲取到一個Geolocation的實例,如下圖所示:

圖中我們可以看到,Geolocation類有三個常用的方法,他們分別是:

1.getCurrentPosition: 用于獲取當前的位置信息
2.watchPosition: 用于在位置變化時實時監測位置信息
3.clearWatch: 取消正在運行的監測操作
我們先來看一下getCurrentPosition方法,下面是它的函數簽名:

JavaScript Code復制內容到剪貼板
  1. navigator.geolocation.getCurrentPosition(success[, error[, options]]);  

第一個參數用于指定一個成功后的處理函數,第二參數用于指定一個錯誤處理函數,第三個用于給函數提供一些可選的配置項。現在我們就來調用這個函數:

JavaScript Code復制內容到剪貼板
  1. navigator.geolocation.getCurrentPosition(function(position) {   
  2.     //success handler code goes here   
  3.     console.log(position);   
  4. }, function(error) {   
  5.     //error handler code goes here   
  6.     console.log(error);   
  7. }, {//options   
  8.     enableHighAccuracy: true,   
  9.     timeout: 5000,   
  10.     maximumAge: 0   
  11. });  

一旦這段代碼運行起來,瀏覽器窗口就會彈出一個確認框,請求用戶進行位置定位的授權:

如果我們點擊Allow允許該站點進行位置定位,該函數就開始從設備獲取位置信息,并觸發成功的回調函數,并將位置信息對象傳入回調函數中,上面的代碼中我們在控制臺打印了position,控制臺信息如下:

可以看到,position實際上是一個Geoposition對象的實例,其中包括coords和timestamp兩個屬性,后者是一個時間戳,記錄獲取到位置時的時間,coords里面包含了很多位置有關的信息:

accuracy: 位置的精確度范圍,單位為米
altitude: 海拔高度,單位為米,如果設備不支持高度感應,則該屬性為null
altitudeAccuracy: 海拔精確度范圍,單位為米,如果設備不支持高度感應,則該屬性為null
speed: 設備移動的速度,單位為米/秒,如果設備不能提供速度信息,該屬性為null
heading: 當前移動的方向,以數字表示,單位為角度,以順時針[0, 360)度表示偏離正北方的角度,0表示正北方向,90度表示正東方向,180度表示正南方向,270表示正西方向;需要注意的是,如果speed為0,則heading會是NaN,如果設備不能提供方向信息,則該屬性為null
longitude: 經度信息
latitude: 緯度信息
我們在成功的回調函數中接收到這些信息,可以根據實際的設備和應用場景獲取相應的信息,做進一步的操作。
回到剛才的確認框,如果我們點擊了Block阻止該站點獲取當前的位置信息,代碼就會授權失敗,相應地,失敗的回調函數就會被觸發,error錯誤對象也會被傳入回調函數,我們的打印信息如下:

可以看到error參數是一個PositionError實例,包含一個錯誤碼code和message,分別表示錯誤的類型和錯誤提示消息,其中錯誤碼有以下幾種:

1: PERMISSION_DENIED - 用戶拒絕了授權請求,授權失敗
2: POSITION_UNAVAILABLE - 因為一些內部錯誤,導致位置獲取失敗
3: TIMEOUT - 超時,超過了配置的超時時間后還未獲取到位置信息
上面就是失敗的回調函數,一般獲取位置出現錯誤時,我們都要及時捕獲,并做相應的處理操作,以獲取好的用戶體驗,這一點很重要。
在上面的調用中,我們還傳入了第三個參數,一個簡單的對象,里面包含了幾個配置信息,它們都是用來配置函數運行參數的:

enableHighAccuracy: 默認值為false,如果指定為true,則表示在設備支持的情況下,盡可能獲取高精準度的數據,但這會在時間和電量方面存在一定的消耗
timeout: 用于指定一個超時時間,單位為毫秒,表示在超時后停止位置獲取的操作,默認值是Infinity,表示直到獲取到數據后才停止該操作的進行
maximumAge: 用于指定一個緩存位置信息的最長時間,在這個時間段內,獲取位置時會從緩存中取,單位為毫秒,默認值為0,表示不使用緩存,每次都取新的數據
上面是關于getCurrentPosition方法的介紹,在某些場景下,例如路線導航應用,我們需要實時地獲取最新位置,進而為用戶規劃最新的路線,這時,上面的方法已經不能很好的滿足需求了,我們需要使用watchPosition方法:

JavaScript Code復制內容到剪貼板
  1. watchId = navigator.geolocation.watchPosition(success[, error[, options]]);  

watchPosition方法的使用方式和getCurrentPosition類似,不同的是,success函數會執行多次,一旦獲取到最新的位置數據,success函數就會被觸發,與之相似地,如果連續獲取最新的數據失敗時,error函數也會被執行多次。
大家或許會注意到,上面的函數簽名中,會返回一個watchId,它標示著當前的watch操作,當我們位置跟蹤任務完成后,可以使用clearWatch函數將這個watchId清除即可:

JavaScript Code復制內容到剪貼板
  1. navigator.geolocation.clearWatch(watchId);  

上面就是Geolocation的常用的三個API,日常開發中我們可根據實際情況選用合適的方法,進而獲取用戶的位置信息。
現在大部分瀏覽器都已支持Geolocation了,可是為了兼容低版本的瀏覽器,我們需要判斷它的支持情況:

JavaScript Code復制內容到剪貼板
  1. if ('geolocation' in navigator) {   
  2.   // getting usr's position   
  3. else {   
  4.   // tips: your position is not available   
  5. }  

最后,我們用一個簡單的例子來演示在開發中是如何使用Geolocation的:

JavaScript Code復制內容到剪貼板
  1. var API = {   
  2.     //get recommended data by current longitude and latitude   
  3.     getSurroundingRecommendations: function(longitude, latitude, callback) {   
  4.         //simulate data obtaining from server.   
  5.         setTimeout(function() {   
  6.             var data = [   
  7.                 {   
  8.                     //item   
  9.                 },   
  10.                 {   
  11.                     //item   
  12.                 }   
  13.             ];   
  14.             callback(data);   
  15.         }, 500);   
  16.     }   
  17. };   
  18.   
  19. document.addEventListener('DOMContentLoaded'function() {   
  20.     //detect if Geolocation is supported   
  21.     if (!'geolocation' in navigator) {   
  22.         console.log('Geolocation is not supported in your browser');   
  23.         return;   
  24.     }   
  25.   
  26.     var successHandler = function(position) {   
  27.         var coords = position.coords,   
  28.             longitude = coords.longitude,   
  29.             latitude = coords.latitude;   
  30.   
  31.         API.getSurroundingRecommendations(longitude, latitude, function(data) {   
  32.             console.log(data);   
  33.         });   
  34.     },   
  35.     errorHandler = function(error) {   
  36.         console.log(error.code, error.message);   
  37.     },   
  38.     options = {   
  39.         enableHighAccuracy: true,   
  40.         timeout: 5000,   
  41.         maximumAge: 0   
  42.     };   
  43.   
  44.     navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);   
  45.   
  46. }, false);   
  47.   

在上面的代碼中,首先我們定義一個根據當前位置獲取推薦數據的方法,然后在文檔加載完成后,開始試圖獲取當前位置,并調研這個方法,獲取模擬的數據,真是開發環境中,可能會進一步利用返回的數據做渲染UI等操作。

網絡設備
位置服務用于估計您所在位置的本地網絡信息包括:有關可見 WiFi 接入點的信息(包括信號強度)、有關您本地路由器的信息、您計算機的 IP 地址。位置服務的準確度和覆蓋范圍因位置不同而異。
總的來說,在PC的瀏覽器中 HTML5 的地理位置功能獲取的位置精度不夠高,如果借助這個 HTML5 特性做一個城市天氣預報是綽綽有余,但如果是做一個地圖應用,那誤差還是太大了。不過,如果是移動設備上的 HTML5 應用,可以通過設置 enableHighAcuracy 參數為 true,調用設備的 GPS 定位來獲取高精度的地理位置信息。

可選項
事實上,上述getCurrentPosition函數還支持第三個可選的參數,是一個 Option Object,一共有三個選項可以設定:

JavaScript Code復制內容到剪貼板
  1. var options = {     
  2.     enableHighAccuracy: false,     
  3.     timeout: 5000,     
  4.     maximumAge: 60000     
  5. }    

 
其中timeout是設定地理位置獲取的超時時間(單位為毫秒,用戶選擇允許的時間不計算在內);而maximumAge表示允許設備從緩存中讀取位置,緩存的過期時間,單位是毫秒,設為0來禁用緩存讀取。如果返回的是緩存中的時間,會在timestamp中反映出來。
 

標簽:甘南 惠州 萍鄉 咸陽 蘇州 營口 文山 紅河

巨人網絡通訊聲明:本文標題《HTML5的Geolocation地理位置定位API使用教程》,本文關鍵詞  HTML5,的,Geolocation,地理位置,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML5的Geolocation地理位置定位API使用教程》相關的同類信息!
  • 本頁收集關于HTML5的Geolocation地理位置定位API使用教程的相關信息資訊供網民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    麻豆91在线观看| 91污片在线观看| 99视频精品在线| 91精品在线观看入口| 日韩美女啊v在线免费观看| 久久99九九99精品| 欧美日韩一区二区三区视频| 日本一区二区三级电影在线观看| 日韩在线一区二区| 91蜜桃网址入口| 日本一区二区不卡视频| 日韩激情一区二区| 欧美日韩你懂的| 一区二区三区日韩精品| av色综合久久天堂av综合| 国产日韩欧美高清| 国产成人综合视频| 精品久久久久久久久久久院品网| 亚洲妇女屁股眼交7| 色av综合在线| 一区二区三区四区乱视频| 丁香天五香天堂综合| 久久蜜桃一区二区| 韩国理伦片一区二区三区在线播放| 在线播放日韩导航| 日本不卡视频在线| 亚洲三级在线免费观看| 国产99久久久久| 国产精品乱人伦| 成人app网站| 亚洲欧美视频一区| 91免费观看在线| 亚洲精品日日夜夜| 91丨九色丨蝌蚪富婆spa| 国产精品久久久久一区二区三区共| 国产精品一级片在线观看| 国产亚洲一二三区| av日韩在线网站| 亚洲一区二区三区美女| 欧美午夜不卡在线观看免费| 午夜精品aaa| 精品国产乱码久久久久久夜甘婷婷 | 91精品国产日韩91久久久久久| 午夜久久久久久久久| 欧美日韩中文字幕精品| 秋霞午夜av一区二区三区| 欧美视频一区二区三区在线观看| 午夜影视日本亚洲欧洲精品| 日韩欧美久久久| 国产成人免费在线观看不卡| 国产精品不卡一区| 欧美日韩国产一级二级| 国产在线精品一区二区夜色 | 日韩精品高清不卡| 精品久久久久一区二区国产| 国产69精品久久久久777| 一区二区三区在线观看网站| 日韩欧美国产综合| 91色porny| 精品一区二区三区视频| 亚洲少妇最新在线视频| 欧美一区二区三区视频在线| 国产成人av一区| 亚瑟在线精品视频| 欧美激情综合在线| 欧美乱妇15p| 成人免费三级在线| 蜜桃91丨九色丨蝌蚪91桃色| 中文字幕精品一区| 欧美一区二区成人| 色94色欧美sute亚洲线路二| 久久99国产精品成人| 亚洲人成影院在线观看| 26uuu国产电影一区二区| 在线观看成人小视频| 国产在线精品视频| 五月婷婷激情综合| 久久国产精品色| 亚洲精品五月天| 久久综合九色综合欧美亚洲| 欧美午夜精品免费| jvid福利写真一区二区三区| 蜜臀久久久久久久| 亚洲精品成a人| 国产精品久久久久久久久搜平片 | 亚洲综合av网| 久久久久青草大香线综合精品| 欧美精品色一区二区三区| 国产成人精品亚洲777人妖| 日本亚洲三级在线| 亚洲成人三级小说| 亚洲欧美另类综合偷拍| 国产精品看片你懂得| 久久精品视频免费| 久久综合九色综合97婷婷女人| 欧美一级电影网站| 欧美高清视频在线高清观看mv色露露十八| 不卡欧美aaaaa| 大胆欧美人体老妇| 成人午夜av影视| 国产一区二区三区av电影| 男女性色大片免费观看一区二区| 亚洲成人av免费| 亚洲午夜精品在线| 亚洲一区二区在线观看视频| 亚洲精品ww久久久久久p站| 亚洲免费观看高清在线观看| 国产精品三级在线观看| 中文字幕日韩一区| 亚洲日本在线a| 亚洲欧美另类小说| 夜夜操天天操亚洲| 亚洲mv在线观看| 日韩va亚洲va欧美va久久| 日本三级亚洲精品| 日本成人在线一区| 国产一区二区免费看| 国产成人a级片| 99精品热视频| 欧洲精品一区二区| 欧美美女激情18p| 欧美成人aa大片| 久久精品无码一区二区三区 | 久久免费看少妇高潮| 国产欧美日韩三级| 综合激情成人伊人| 亚洲午夜影视影院在线观看| 亚洲va国产va欧美va观看| 另类的小说在线视频另类成人小视频在线 | 国产精品久久久久影视| 亚洲六月丁香色婷婷综合久久| 樱桃国产成人精品视频| 日韩国产高清影视| 国产成人精品免费看| gogogo免费视频观看亚洲一| 欧美在线三级电影| www国产精品av| 亚洲欧美成aⅴ人在线观看| 午夜私人影院久久久久| 国产在线精品免费av| 一本一道综合狠狠老| 91精品久久久久久久99蜜桃| 久久一区二区三区国产精品| 亚洲欧洲日产国产综合网| 天天综合天天综合色| 国产一区二区中文字幕| 色综合久久久久综合体| 精品国产污污免费网站入口| 综合色天天鬼久久鬼色| 开心九九激情九九欧美日韩精美视频电影| 成人精品国产一区二区4080| 欧美日本视频在线| 国产精品成人午夜| 日本视频在线一区| 不卡一区二区在线| 欧美一区二区播放| 亚洲美女区一区| 紧缚奴在线一区二区三区| 色网综合在线观看| 国产无人区一区二区三区| 香蕉影视欧美成人| www.欧美精品一二区| 日韩欧美久久一区| 午夜精品久久久久久久99水蜜桃| 成人av动漫网站| 久久久久久久久久久久电影| 亚洲线精品一区二区三区八戒| 粉嫩av一区二区三区粉嫩| 日韩美一区二区三区| 亚洲欧美日韩人成在线播放| 日韩精品一区二区三区蜜臀| 欧美一级二级在线观看| 亚洲精品美国一| 国产精品亚洲午夜一区二区三区| 欧美精品久久99久久在免费线| 《视频一区视频二区| 老司机午夜精品99久久| 欧美四级电影在线观看| 亚洲欧美偷拍三级| 一本到不卡免费一区二区| 中文字幕电影一区| 国产精品99久久久久久宅男| 精品国产乱码久久久久久牛牛| 日韩精品一卡二卡三卡四卡无卡| 91黄色免费观看| 一区二区三区免费看视频| 91蝌蚪porny成人天涯| 中文字幕视频一区| 不卡的电影网站| 中文字幕亚洲一区二区va在线| 国产a区久久久| 国产精品久久久久久久久久免费看 | 极品尤物av久久免费看| 91精品国产综合久久精品| 亚洲国产一二三| 欧美日韩国产另类不卡| 亚洲国产美国国产综合一区二区| 欧美日韩久久一区| 日日夜夜精品免费视频| 欧美一区二区视频在线观看|