js定位navigator.geolocation

時間 2019-11-13

標籤定位 navigator.geolocation navigator geolocation 欄目 JavaScript 简体版

原文原文鏈接

1、簡介javascript

　　html5爲window.navigator提供了geolocation屬性，用於獲取基於瀏覽器的當前用戶地理位置。html

　　window.navigator.geolocation提供了3個方法分別是：html5

void getCurrentPosition(onSuccess,onError,options);
//獲取用戶當前位置

int watchCurrentPosition(onSuccess,onError,options);
//持續獲取當前用戶位置

void clearWatch(watchId);
//watchId 爲watchCurrentPosition返回的值
//取消監控

options = {
     enableHighAccuracy,//boolean 是否要求高精度的地理信息
     timeout,//獲取信息的超時限制
     maximumAge//對地理信息進行緩存的時間
}
//options能夠不寫，爲默認便可

2、position對象java

　　當成功獲取地理位置信息時候，onsuccess方法中會返回position對象，經過這個對象能夠獲取地理位置的相關信息，包括：git

　　position對象的屬性：api

latitude,//緯度
longitude,//經度
altitude,//海拔高度
accuracy,//獲取緯度或者經度的精度
altitudeAccurancy,//海拔高度的精度
heading,//設備前景方向。正北方向的順時針旋轉角
speed,//設備的前進速度 m/s
timestamp,//獲取地理位置信息時候的時間

3、基於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()google

使用方法：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。

相關標籤/搜索

navigator.geolocation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。