首頁 > web前端 > H5教程 > H5之11__GeoLocation 地理定位

H5之11__GeoLocation 地理定位

黄舟
發布: 2017-02-18 14:54:19
原創
1761 人瀏覽過

GeoLocation API  通常用於行動裝置取得地理位置,嚴格來說,它並不屬於H5的標準規格.


一 如何使用GeoLocation API? ator

要使用一 如何使用GeoLocation API? 

ator

要使用該geolocatio  獲得對地理定位的存取。 此物件有以下三種方法:

1.  getCurrentPosition()

2. watchPosition()


3. clearWatch()

getCurrentos

getCurrentos
void  getCurrentPosition(PositionCallback successCallback,  optional  PositionErrorCallback  errorCallback,   optional  PositionOptions  options);

後面第一個參數為必選參數

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>GeoLocation API 地理定位</title>
    <script type="text/javascript">
    	
   		
   		window.navigator.geolocation.getCurrentPosition(function(pos){
   			alert("当前地理位置的纬度: " +pos.coords.latitude
   			+"\n当前地理位置的经度: " +pos.coords.longitude
   			+ "\n当前经纬度的精度: " +pos.coords.accuracy
   			+ "\n设备的当前运动方向: " +pos.coords.heading
   			+ "\n设备的当前速度: " +pos.coords.speed
   			);
   			
   		});
   		
   		var watchID= window.navigator.geolocation.watchPosition(function(pos){
   			alert("当前位置变化的纬度: " +pos.coords.latitude
   			+"\n当前位置变化的经度: " +pos.coords.longitude
   			+ "\n当前经纬度变化的精度: " +pos.coords.accuracy
   			+ "\n设备的当前运动方向: " +pos.coords.heading
   			+ "\n设备的当前变化的速度: " +pos.coords.speed);
   			
   			navigator.geolocation.clearWatch(watchID);
   		}, function(){
   		});
    </script>
</head>
<body>
	
</body>
</html>
登入後複製

呼叫getCurrentPosition( )  成功後,回呼的函數中,可以透過其中的參數對象, 取得目前使用者造訪Web 頁面時的地理位置資訊

pos 物件包含一個coords  屬性, coords 屬性表示一系列的地理座標資訊.

latitude:   緯度(十進位)

longitude:  經度(十進位)

altitude: 205) 緯度

altitudeAccuracy:  以米為單位的高度座標精確度等級

heading:  運動的方向(透過相對正北方做順時針旋轉的角度指定)

speed:  當前地面速度(m/s 為單位)

speed:  當前地面速度(m/s 為單位)

speed:  當前地面速度(m/s 為單位)


包含一個timestamp 屬性,該屬性用於傳回coords 物件時以毫秒為單位建立時間戳記。

效果圖如下:

    


 以上就是H5之11__GeoLocation 地理定位的內容,並有更多相關內容請注意.

🎜🎜🎜
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板