HTML5 地理位置

一无埃、簡介

地理位置特性能夠識別你所在的地理位置并且在你允許的情況下徙瓶,把位置信息分享給別人。

識別地理位置的方法:

  • 通過 IP 地址

    • 只能用于電腦上的位置信息定位
  • 利用基站獲取去收集網(wǎng)絡的介入位置

    • 大致位置嫉称,不夠精確
    • 精確到用戶所屬的城市街區(qū)侦镇,獲取用戶房源一公里的范圍內(nèi)
  • 通過衛(wèi)星定位獲得經(jīng)緯度信息的 GPS 設備

    • 幾米的誤差內(nèi)準確定位
    • 專用 GPS 芯片耗電快
    • GPS 芯片默認關閉,開啟需要時間织阅,有延遲

注意:瀏覽器必須要在用戶允許的情況下才可以發(fā)送用戶的位置信息給服務器壳繁。

二、地理位置 API

2.1 調(diào)用位置函數(shù)

function get_location() {
  navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
}

全局對象 navigatorgeolocation 屬性的 getCurrentPosition() 方法荔棉,會觸發(fā)瀏覽器彈出信息條闹炉,讓用戶確定是否分享地理位置。

  • show_map 是成功獲取位置的回調(diào)函數(shù)润樱,必須
  • handle_error 是獲取地理位置失敗的回調(diào)函數(shù)渣触,可選
  • PositionOptions 是獲取地理位置的設置對象,可選

2.2 show_map 獲取地理位置

function show_map(position) {
  var latitude = position.coords.latitude;//獲取緯度
  var longitude = position.coords.longitude;//獲取經(jīng)度
}

這個回調(diào)函數(shù)要傳入一個 position 對象壹若,就是獲取到的位置信息嗅钻。

position 對象的屬性:

  • coords.latitude 緯度,度
  • coords.longtitude 經(jīng)度店展,度
  • coords.altitude 海拔养篓,米
  • coords.accuracy 精確度,米
  • coords.altitudeAccuracy 海拔精確度赂蕴,米
  • coords.heading 方向柳弄,度,順時針概说,以正北為基準
  • coords.speed 速度碧注,米/秒
  • timestamp 時間戳,類似 Date() 對象

只有前三個屬性確保不為空席怪,其余屬性因用戶的設備和后臺定位服務器的不同应闯,可能屬性值為 null纤控,其中 heading挂捻、speed 是基于用戶前一次位置信息計算所得的。

2.3 handle_error 容錯處理

function handle_error(err) {
  switch(err.code)  {
    case err.PERMISSION_DENIED:
      //用戶拒絕對獲取地理位置的請求船万。
      break;
    case err.POSITION_UNAVAILABLE:
      //位置信息是不可用的刻撒。
      break;
    case err.TIMEOUT:
      //請求用戶地理位置超時骨田。
      break;
    case err.UNKNOWN_ERROR:
      //未知錯誤。
      break;
  }
}

這個容錯處理的回調(diào)函數(shù)會傳入一個 PositionError 對象作為參數(shù)声怔,上面例子中是 err态贤。

PositionError 對象:

  • code 錯誤類型,屬性值為:
    • err.PERMISSION_DENIED 或者 1:用戶點擊了信息條的“不共享”按鈕或者直接拒絕被獲取位置信息醋火。
    • err.POSITION_UNAVAILABLE 或者 2:網(wǎng)絡不可用或者無法連接到獲取位置信息的衛(wèi)星悠汽。
    • err.TIMEOUT 或者 3:網(wǎng)絡可用但是花了太長的時間去計算。
    • err.UNKNOWN_ERROR 或者 0:發(fā)生其他未知錯誤芥驳。
  • message 錯誤信息柿冲,與終端用戶無關

2.4 PositionOptions 對象設置

navigator.geolocation.getCurrentPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 175000, maximumAge: 75000})

屬性:

  • enableHighAccuracy 開啟高精度定位,默認 false
  • timeout 獲取用戶位置信息的最長等待時間兆旬,指網(wǎng)絡請求時間假抄,毫秒
  • maximumAge 允許用戶將一定時間內(nèi)緩存的位置信息快速返回給 Web 應用,默認 0丽猬,毫秒

2.5 watchPosition() 持續(xù)獲取

watchPosition() 方法與 getCurrentPosition() 方法結構相同

你不用主動獲取用戶位置信息宿饱,每次用戶位置改變,這些回調(diào)函數(shù)就會調(diào)用脚祟。設備會確定一個最佳的時間間隔谬以,定時檢測用戶位置的改變。

watchPosition() 方法會返回一個數(shù)字愚铡,將它保存下來蛉签,當你想停止監(jiān)測用戶位置時就可以調(diào)用 clearWatch() 方法,傳入保存的數(shù)字作為參數(shù)沥寥。

var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 175000, maximumAge: 75000})

clearWatch(watch);

2.6 geo.js 兼容性 javascript 庫

geo.js 封裝了 W3C 標準碍舍、Gears 以及移動平臺所提供的各種不同類型的地理位置 API,提供統(tǒng)一的調(diào)用接口邑雅。

準備:

<script src="gears_init.js"></script><!--用于初始化 Gears-->
<script src="geo.js"></script>

使用:

if (geo_position_js.init()) {
  geo_position_js.getCurrentPosition(success, error)
}

geo.js 目前不支持 watchPosition() 方法片橡,只能通過定時調(diào)用實現(xiàn)。

三淮野、地圖的調(diào)用

3.1 Google 地圖 API

3.2 Tencent 地圖 API

3.3 百度地圖 API

3.4 高德地圖 API

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末捧书,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子骤星,更是在濱河造成了極大的恐慌经瓷,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件洞难,死亡現(xiàn)場離奇詭異舆吮,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門色冀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潭袱,“玉大人,你說我怎么就攤上這事锋恬⊥突唬” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵与学,是天一觀的道長彤悔。 經(jīng)常有香客問我,道長索守,這世上最難降的妖魔是什么蜗巧? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮蕾盯,結果婚禮上幕屹,老公的妹妹穿的比我還像新娘。我一直安慰自己级遭,他們只是感情好望拖,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挫鸽,像睡著了一般说敏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丢郊,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天盔沫,我揣著相機與錄音,去河邊找鬼枫匾。 笑死架诞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的干茉。 我是一名探鬼主播谴忧,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼角虫!你這毒婦竟也來了沾谓?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤戳鹅,失蹤者是張志新(化名)和其女友劉穎均驶,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體枫虏,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡妇穴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年亮垫,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伟骨。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖燃异,靈堂內(nèi)的尸體忽然破棺而出携狭,到底是詐尸還是另有隱情,我是刑警寧澤回俐,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布逛腿,位于F島的核電站,受9級特大地震影響仅颇,放射性物質(zhì)發(fā)生泄漏单默。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一忘瓦、第九天 我趴在偏房一處隱蔽的房頂上張望搁廓。 院中可真熱鬧,春花似錦耕皮、人聲如沸境蜕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粱年。三九已至,卻和暖如春罚拟,著一層夾襖步出監(jiān)牢的瞬間台诗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工赐俗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拉队,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓阻逮,卻偏偏與公主長得像氏仗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子夺鲜,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 點擊查看原文 Web SDK 開發(fā)手冊 SDK 概述 網(wǎng)易云信 SDK 為 Web 應用提供一個完善的 IM 系統(tǒng)...
    layjoy閱讀 13,761評論 0 15
  • 當今技術定位的方式皆尔,有位置信息來源定位,IP定位币励,GPS定位慷蠕,WIFI定位,手機定位和自定義定位食呻。本文通過獲取經(jīng)緯...
    dovlie閱讀 6,187評論 0 8
  • 從小到大流炕,家里都沒有一個餐桌澎现,總是在茶幾上吃飯,也是家里面積小每辟,條件差剑辫,就一直這么將就著,后來結婚了渠欺,還是條件不好...
    寧小靜的日記閱讀 246評論 0 0
  • 曾幾何時不婚主義開始盛行挠将,而且數(shù)量呈上升趨勢胳岂,原因是多方面的,有的是因為一直沒有遇到合適的伴侶舔稀;有的是個性相對獨立...
    一丁羊閱讀 8,177評論 2 9
  • 文/劉三土博客(www.liusantu.com) 一個半路出家轉型的自媒體博客 去年3月份的時候,我注冊了一個域...
    劉三土自媒體閱讀 737評論 0 1