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

範大腳腳發表於2017-12-14
HTMLAPI
導航
【初探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，如需轉載請自行聯絡原作者


相關文章