導航
【初探HTML5之使用新標簽布局】用html5布局我的博客頁！
【HTML5初探之form標簽】解放表單驗證、增加文件上傳、集成拖放
【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視頻播放HTML5、Flash誰才是王道？
【HTML5初探之通信API】跨域門檻不再高、數據推送不是夢
【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 獲取地理位置信息時的時間戳
說干就干，我們來試試：
獲取地理信息
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 navigator.geolocation.getCurrentPosition(function (position) { 9 10 var s = ''; 11 }, function (error) { 12 var type = { 13 1: '位置服務被拒絕', 14 2: '獲取不到信息', 15 3: '超時' 16 } 17 alert('獲取數據失敗：' + type[error.code]); 18 }); 19 20 }); 21 </script> 22 </head> 23 <body> 24 <div id="map"> 25 </div> 26 </body> 27 </html>
還真獲取到了的說！！！
地理位置是敏感信息機密數據，大家使用時要謹慎！！！
無圖無真相，與強大的google結合使用，與google地圖結合使用：
在地圖上顯示
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="../jquery-1.7.1.js" type="text/javascript"></script> 6 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 7 <script type="text/javascript"> 8 $(document).ready(function () { 9 var init = function () { 10 navigator.geolocation.getCurrentPosition(function (position) { 11 var c = position.coords; 12 //設定地圖參數，將當前位置的緯度，經度設為地圖中心點 13 // var latlng = new google.maps.LatLng(c.latitude, c.longitude); 14 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 15 16 var opt = { 17 zoom: 14, 18 center: latlng, 19 mapTypeId: google.maps.MapTypeId.ROADMAP 20 }; 21 //創建地圖並顯示在div 22 var map = new google.maps.map($('#map')[0], opt); 23 //在地圖上創建標記 24 var marker = new google.maps.Marker({ 25 position: latlng, 26 map: map 27 }); 28 29 //設定標注窗口，指定文字 30 var marker = new google.maps.Marker({ 31 position: latlng, 32 map: map, 33 title: "You are here! (at least within a " + position.coords.accuracy + " meter radius)" 34 }); 35 var s = ''; 36 }, function (error) { 37 var type = { 38 1: '位置服務被拒絕', 39 2: '獲取不到信息', 40 3: '超時' 41 } 42 alert('獲取數據失敗：' + type[error.code]); 43 }); 44 } 45 46 window.init = init; 47 // init(); 48 }); 49 </script> 50 </head> 51 <body> 52 <button onclick="init();"> 53 顯示</button> 54 <div id="map"> 55 </div> 56 <script> 57 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 58 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 59 </script> 60 61 <script type="text/javascript" src="http://www.google-analytics.com/ga.js"> 62 </script> 63 </body> 64 </html>
注意：我在這里一直報個錯，
TypeError: google.maps.LatLng is not a constructor
這個錯錯的我都無語了。。。。搞了很久找不到答案，哪位大俠知道告知我一下！！！
結語
原來一直舍不得學習HTML5，這次卻一個星期大概學完了，不敢說什么都會，但是基本都有個印象了，不會像原來那么沒底了。
好了，我繼續找那個問題去了。