今天，不知哪來的雅興就是特別想了解html5 地理定位那塊知識。
於是乎，屌絲我興沖沖的拿起書本開始看，
下面是今天的學習小結，希望有興趣的友友共勉
我來理清思路哈，咱們把邏輯搞好，就好理解了
步驟：
第一步：1.先檢查支持（因爲有的瀏覽器不支持的，so這步比較重要，這個代碼我試了好久，
最後只有在ff上成功了，連支持最好的gg都沒支持）
第二步：2.獲取當前位置（介個要用到系統給的函數了getCurrentPosition（successCallback,errorCallback,options）
這裏的參數只有第一個是必須的，指位置確定時你想要調用的函數名稱）
難點：
1.地理定位的position對象
position對象，正如在地理定位的API中定義的，這傢伙有兩個屬性，一個包含位置的座標(coords),
另一個包含位置確定時的時間戳(timestamp):
interface position{
readonly attribute Coordinates coords;
readonly attribute DOMTimeStamp timestamp;
}
2.經度緯度在哪裏呢？嘿嘿，它們就存儲在Coordinates對象中。
interface Coordinate{
readonly attribute double latitude;
readonly attrbute double longitude;
:
readonly attrbute double accuracy;
}
明白了沒？latitude，longitude 不言而喻就是用戶們的經度緯度，
accuracy屬性以米爲單位，告訴你經度緯度的精確度
獲取進度緯度：
var latitude=position.coords.latitude;
var longitude=position.coords.longitude;
3.加載地圖
爲了在地圖上顯示用戶的位置，我們將利用Google Maps js API,但在使用API之前，我們需要
在頁面上添加一個引用（<script src="http://maps.google.com/maps/api/js?sensor=false">），
無需下載庫，我們可以指向Google公開可用的API版本。
注意 引用中sensor參數，不能省的 會報錯，表示此應用程序是否使用傳感器(GPS設備)來確定
用戶的位置，你必須明確設置true or false，因爲地理定位無法得知獲得信息是否來自傳感器，
對於大多數web程序來說，設置false是安全的，除非是專爲具有gps功能的設備創建的，eg:iphone.
//創建地圖並輸出到頁面
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
4.那麼我們已經有了地圖，讓我們來添加個標記吧，就是咱們在地圖上看到的小紅色水滴
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
//詳細的代碼
<body>
<p id="demo">點擊這個按鈕，獲得你的位置:</p>
<button οnclick="getLocation()">試一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var x=document.getElementById("demo");
//第一步：檢查當前瀏覽器
function getLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
/*showPosition爲獲取信息成功的回調函數，返回的數據中包含經緯度等信息
結合google Map API即可在地圖中顯示當前用戶的位置信息*/
function showPosition(position)
{
var lat=position.coords.latitude; //緯度
var lon=position.coords.longitude; //經度
var latlon=new google.maps.LatLng(lat,lon)
var mapholder=document.getElementById("mapholder")
mapholder.style.height='400px';
mapholder.style.width='600px';
var myOptions={
zoom:14, //地圖放大倍數
center:latlon, //地圖中心設爲指定座標點
mapTypeId:google.maps.MapTypeId.ROADMAP, //地圖類型
mapTypeControl:false,
navigationControlOptions:
{style:google.maps.NavigationControlStyle.SMALL}
};
//創建地圖並輸出到頁面
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
//創建標記
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
