標籤：style blog http io ar color os 使用 sp
一、簡介
html5為window.navigator提供了geolocation屬性，用於擷取基於瀏覽器的目前使用者地理位置。
window.navigator.geolocation提供了3個方法分別是：
void getCurrentPosition(onSuccess,onError,options);//擷取使用者當前位置int watchCurrentPosition(onSuccess,onError,options);//持續擷取目前使用者位置void clearWatch(watchId);//watchId 為watchCurrentPosition返回的值//取消監控options = { enableHighAccuracy,//boolean 是否要求高精度的地理資訊 timeout,//擷取資訊的逾時限制 maximumAge//對地理資訊進行緩衝的時間}//options可以不寫，為預設即可
二、position對象
當成功擷取地理位置資訊時候，onsuccess方法中會返回position對象，通過這個對象可以擷取地理位置的相關資訊，包括：
position對象的屬性：
latitude,//緯度longitude,//經度altitude,//海拔高度accuracy,//擷取緯度或者經度的精度altitudeAccurancy,//海拔高度的精度heading,//裝置前景方向。正北方向的順時針旋轉角speed,//裝置的前進速度 m/stimestamp,//擷取地理位置資訊時候的時間
三、基於google map的例子
直接看代碼：
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>在頁面上使用google地圖樣本</title></head><body onload = ‘init()‘> <div id="map" style=‘width:800px;height:800px;‘></div> <script type="text/javascript" src=‘http://maps.google.com/maps/api/js?sensor=false‘></script> <script type="text/javascript"> function init(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(pos){ var coords = pos.coords; var latlng =new google.maps.LatLng(coords.latitude,coords.longitude); var options = {zoom:14,center:latlng,mapTypeId : google.maps.MapTypeId.ROADMAP}; var map1; map1 =new google.maps.Map(document.getElementById(‘map‘),options); var marker =new google.maps.Marker({ position : latlng, map : map1 }); var infowindow =new google.maps.InfoWindow({ content : ‘當前位置！‘ }); infowindow.open(map1,marker); }); } } </script></body></html>
另附：
getCurrentPosition()
使用方法：navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
A) successCallback 擷取定位成功時執行的回呼函數 eg: function(position){alert("緯度："+position.coords.latitude+"；經度："+position.coords.longitude)};
successCallback返回一個地理資料對象position作為參數，該對象有屬性timestamp和coords。timestamp表示該地理資料建立時間（時間戳記）；coords包括另外七個屬性：
1. coords.latitude：估計緯度
2. coords.longitude：估計經度
3. coords.altitude：估計高度
4. coords.accuracy：所提供的以米為單位的經度和緯度估計的精確度
5. coords.altitudeAccuracy：所提供的以米為單位的高度估計的精確度
6. coords.heading： 宿主裝置當前移動的角度方向，相對於正北方向順時針計算
7. coords.speed：以米每秒為單位的裝置的當前對地速度
B) errorCallback 定位失敗時執行的回呼函數 eg: function(error){alert(error.message);}
errorCallback返回一個錯誤資料對象error作為參數，該對象有屬性：
1.code :表示失敗原因，返回1 or 2 or 3 ，具體為
PERMISSION_DENIED (數值為1) 表示沒有許可權使用地理定位API
POSITION_UNAVAILABLE (數值為2) 表示無法確定裝置的位置，例如一個或多個的用於定位採集程式報告了一個內部錯誤導致了全部過程的失敗
TIMEOUT (數值為3) 表示逾時
詳情查看 http://dev.w3.org/geo/api/spec-source.html#permission_denied_error
2.message :錯誤提示內容
C) positionOptions 用來設定positionOptions來更精細的執行定位，positionOptions擁有三個屬性 {enableHighAccuracy:boolean , timeout:long , maximumAge:long}。
enableHighAccuracy 【true or false(預設)】是否返回更詳細更準確的結構，預設為false不啟用，選擇true則啟用，但是會導致較長的回應時間及增加功耗，這種情況更多的用在行動裝置上。
timeout 裝置位置擷取操作的逾時時間設定（不包括擷取使用者權限時間），單位為毫秒，如果在設定的timeout時間內未能擷取位置定位，則會執行 errorCallback()返回code（3）。如果未設定timeout，那麼timeout預設為無窮大，如果timeout為負數，則預設 timeout為0。
maximumAge 設定位置緩衝時間，以毫秒為單位，如果不設定該值，該值預設為0，如果設定負數，則預設為0。該值為0時，位置定位時會重新擷取一個新的位置對象；該值大 於0時，即從上一次擷取位置時開始，緩衝位置對象，如果再次擷取位置時間不超過maximumAge，則返回緩衝中的位置，如果超出 maximumAge，則重新擷取一個新的位置。
watchPosition()
功能getCurrentPosition()相似，watchPosition()是定期輪詢裝置的位置，同樣擁有3個參數，與getCurrentPosition()相同。
使用方法：navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]);
執行步驟：
1.首先初始化positionOptions內的屬性（詳細同上）。
2.判斷是否有緩衝位置對象，該對象年齡是否可用、是否超出maximumAge ，如果可用且未超出，返回緩衝位置，否則重新確定裝置位置。
3.位置定位操作：
i.建立一個計時器，進行位置擷取操作，如果在timeout之前完成，執行下一步；如果未在timeout之前完成，則執行errorCallback()，code為3，跳出步驟做等待重新啟用。
ii.如果在timeout之前獲得位置成功，則執行successCallback()，然後重設計時器（從擷取位置成功時刻重新算起），繼 續掛起擷取新位置。當有與之前位置有明顯不同位置出現時，再次執行successCallback()，並重複操作，該迴圈直到timeout逾時或者獲 取操作中遇到POSITION_UNAVAILABLE錯誤執行errorCallback()為止，亦或者執行clearWatch()操作。
clearWatch()
配合watchPosition()使用，用於停止watchPosition()輪詢。
watchPosition()需要定義一個watchID，var watchID = watchPosition(...)，通過clearWatch(watchID)來停止watchPosition()，使用方法類似setInterval。
js定位navigator.geolocation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
