【HTML5初探之GeolocationAPI】讓我們獲取女神的地址

導航

【初探HTML5之使用新標籤佈局】用html5佈局我的部落格頁！

【HTML5初探之form標籤】解放表單驗證、增加檔案上傳、整合拖放

【HTML5初探之繪製影像（上）】看我canvas元素引領下一代web頁面

【HTML5初探之繪製影像（下）】看我canvas元素引領下一代web頁面

【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？

【HTML5初探之本地儲存】如果沒有資料庫。。。

【HTML5初探之離線應用】如何打造零請求、無流量的網站？

【HTML5初探之通訊API】跨域門檻不再高、資料推送不是夢

【HTML5初探之Web Workers】網頁也能多執行緒

【HTML5初探之Geolocation API】讓我們來回去地理資訊

前言

從最開始學習HTML5到今天剛剛一個星期，明天還可以玩一天呢！

15號我意識到自己確實無法忍受自己死寂的工作生活了，若是聽之任之，自己必然廢之，你們一定明白那種感覺的，

每天都會非常有壓力的想進步，每天都會想看書，但是每天卻貪生怕死的玩遊戲，看網頁，看電影如此荒廢歲月。

那天下午，我落寞的看著螢幕，在螢幕中看見了我空洞寂寞的臉，於是我想到了改變。

一直到今天我深刻的感覺到了自己的變化，若是照此下去，我的理想沒準真的能實現呢！

好吧，希望自己好好的堅持下去，用21天形成一個習慣，用行動改變自己的人生吧！

Geolocation API

在HTML5中為window.navigation新增了一個geolocation屬性，可以通過getCurrentPosition獲取到當前地理位置資訊：

複製程式碼

navigation.geolocation.getCurrentPosition(

function (position) {},

function (error) {},

opts

);

第一與第二個都是函式，一個用於成功時一個用於失敗時呼叫；

其中第二個函式的錯誤碼為：

1 使用者拒絕位置服務

2 獲取不到位置資訊

3 獲取資訊超時

第三個引數為一可選屬性列表（js物件）

1 enableHighAccuracy 要求高精度資訊

2 timeout 設定超時時間

3 maximumAge 資料資訊過期時間

複製程式碼

使用watchPosition方法可持續獲取使用者當前位置資訊：

int watchCurrentPosition(onSucc, onError, opts)

與上面的方法引數一致

我們這裡詳細說說呼叫成功後返回的position物件：

複製程式碼

該物件具有以下資訊：

1 latitude 緯度

2 longitude 經度

3 altitude 海拔高度

4 accuracy 獲取經度緯度（米）

5 altitudeAccurancy 獲取海拔（米）

6 heading 裝置朝向

7 speed 前進速度

8 timestamp 獲取地理位置資訊時的時間戳

複製程式碼

說幹就幹，我們來試試：

獲取地理資訊

還真獲取到了的說！！！

地理位置是敏感資訊機密資料，大家使用時要謹慎！！！

無圖無真相，與強大的google結合使用，與google地圖結合使用：

在地圖上顯示

注意：我在這裡一直報個錯，

TypeError: google.maps.LatLng is not a constructor

這個錯錯的我都無語了。。。。搞了很久找不到答案，哪位大俠知道告知我一下！！！

結語

原來一直捨不得學習HTML5，這次卻一個星期大概學完了，不敢說什麼都會，但是基本都有個印象了，不會像原來那麼沒底了。

好了，我繼續找那個問題去了。

本文轉自葉小釵部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3033049.html，如需轉載請自行聯絡原作者

【HTML5初探之GeolocationAPI】讓我們獲取女神的地址

相關文章