HTML5 地理定位筆記

一:定位用戶的位置

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

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

二:瀏覽器支持

Internet Explorer 9、Firefox杂抽、Chrome诈唬、Safari 以及 Opera 支持地理定位。

注釋:對(duì)于擁有 GPS 的設(shè)備缩麸,比如 iPhone铸磅,地理定位更加精確。

三:HTML5 - 使用地理定位

請(qǐng)使用 getCurrentPosition() 方法來獲得用戶的位置杭朱。

下例是一個(gè)簡單的地理定位實(shí)例阅仔,可返回用戶位置的經(jīng)度和緯度。

實(shí)例:


例子解釋:

檢測(cè)是否支持地理定位

如果支持痕檬,則運(yùn)行 getCurrentPosition() 方法霎槐。如果不支持,則向用戶顯示一段消息梦谜。

如果getCurrentPosition()運(yùn)行成功丘跌,則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象

showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

上面的例子是一個(gè)非秤牡耍基礎(chǔ)的地理定位腳本沾谜,不含錯(cuò)誤處理。

處理錯(cuò)誤和拒絕

getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤丰歌。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù):

實(shí)例:


錯(cuò)誤代碼:

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

Position unavailable - 無法獲取當(dāng)前位置

Timeout - 操作超時(shí)

四:getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)

若成功荒澡,則 getCurrentPosition() 方法返回對(duì)象报辱。始終會(huì)返回 latitude、longitude 以及 accuracy 屬性单山。如果可用碍现,則會(huì)返回其他下面的屬性。


五:Geolocation 對(duì)象 - 其他有趣的方法

watchPosition() - 返回用戶的當(dāng)前位置米奸,并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置(就像汽車上的 GPS)昼接。

clearWatch() - 停止 watchPosition() 方法

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

實(shí)例:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末悴晰,一起剝皮案震驚了整個(gè)濱河市慢睡,隨后出現(xiàn)的幾起案子逐工,更是在濱河造成了極大的恐慌,老刑警劉巖漂辐,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件泪喊,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡髓涯,警方通過查閱死者的電腦和手機(jī)袒啼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纬纪,“玉大人瘤泪,你說我怎么就攤上這事∮耍” “怎么了对途?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長髓棋。 經(jīng)常有香客問我实檀,道長,這世上最難降的妖魔是什么按声? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任膳犹,我火速辦了婚禮,結(jié)果婚禮上签则,老公的妹妹穿的比我還像新娘须床。我一直安慰自己,他們只是感情好渐裂,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布豺旬。 她就那樣靜靜地躺著,像睡著了一般柒凉。 火紅的嫁衣襯著肌膚如雪族阅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天膝捞,我揣著相機(jī)與錄音坦刀,去河邊找鬼。 笑死蔬咬,一個(gè)胖子當(dāng)著我的面吹牛鲤遥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播林艘,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼盖奈,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了北启?” 一聲冷哼從身側(cè)響起卜朗,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎咕村,沒想到半個(gè)月后场钉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡懈涛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年逛万,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片批钠。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡宇植,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出埋心,到底是詐尸還是另有隱情指郁,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布拷呆,位于F島的核電站闲坎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏茬斧。R本人自食惡果不足惜腰懂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望项秉。 院中可真熱鬧绣溜,春花似錦、人聲如沸娄蔼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岁诉。三九已至罢防,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間唉侄,已是汗流浹背咒吐。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留属划,地道東北人恬叹。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像同眯,于是被迫代替她去往敵國和親绽昼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

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

  • HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用戶的位置须蜗。...
    鹿守心畔光閱讀 891評(píng)論 0 4
  • 學(xué)習(xí)HTML的最佳網(wǎng)站沒有之一http://www.w3school.com.cn/html/ 關(guān)于HTML/HT...
    Amyyy_閱讀 2,088評(píng)論 0 16
  • 友情提示鏈接:ES6系列(一)迭代器硅确、for-of循環(huán)和生成器 Generators 在HTML5的新標(biāo)準(zhǔn)中目溉,有了...
    儂姝沁兒閱讀 2,652評(píng)論 1 6
  • 如果你想開發(fā)一款在線天氣預(yù)報(bào)系統(tǒng),那你可能想知道用戶所在的位置菱农,利用 HTML5 你可以輕易的實(shí)現(xiàn)這一點(diǎn)缭付。當(dāng)然,我...
    ghwaphon閱讀 1,103評(píng)論 5 43
  • HTML5 Geolocation API循未,它允許用戶在 web 應(yīng)用程序中共享他們的的位置陷猫,使其能夠享受位置感知...
    linda102閱讀 1,977評(píng)論 0 1