【小(xiǎo)編推薦】PhoneGap Geolocation獲取 →地(dì)理(lǐ)位置api

2014-05-19  ✔ ✘≤ |   發布者:梁國(gu$←λ'ó)芳   |  &n™♦©¥bsp;查看(kàn):3320次

app開(kāi)發
1. PhoneGap Geolocati↓♦on對(duì)象介紹
2. geolocation.getCur<×☆rentPosition
3. 主要(yào)對(duì)象描述
4. 獲取地(dì)理(lǐ)位置信息
5. 動态獲取地(dì)理(lǐ)位置信息
6. 綜合案例說(shuō)明(míng)

一(yī)、 PhoneGap Geolocation對(duì)象介紹


使應用(yòng)程序可(kě)以訪問(wèn)地(dì)理(lǐ)位置£¥α信息。geolocation對(duì)象提供了(le)對±<‍β(duì)設備GPS傳感器(qì)的(de)訪↕↑σ問(wèn)。Geolocation
提供設備的(de)位置信息,例如(rú)經度和(hé✘®✘↑)緯度。位置信息的(de)常見(jiàn)來(lái)源包括全球定位系統α‍(GPS),以及通(tōng)過諸如(rú)IP
地(dì)址、RFID、WiFi和(hé)藍(lán)牙→←σ的(de)MAC地(dì)址、和(hé)GSM/←♦CDMA手機(jī)ID的(de)網絡信号↑÷ 所做(zuò)的(de)推斷。不(bù)能(néng)保證該API返
回的(de)是(shì)設備的(de)真實位置信息。‍αδ這(zhè)個(gè)API是(shì)基于W3C∞§₩ Geo location API Spe♠Ω≥‌cification實現(xiàn)的(£♥de)。有(yǒu)些(xiē)設備已經提供
了(le)對(duì)該規範的(de)實現(xiàn),對(du£®ì)于這(zhè)些(xiē)設備采用(yòng)內(nèiφλ)置實現(xiàn)而非使用(yòng)PhoneGap的(de)₽✔實現(xiàn)。對(duì)于沒有(yǒu)地(dì)理(lǐ)位置支持的≠δ(de)設
備,PhoneGap提供了(le)統一(yī)的(de)支持©Ω。
方法
geolocation.getCurrentPosition
geolocation.watchPosition
geolocation.clearWatch
參數(shù)
geolocationSuccess
geolocationError
geolocationOptions


二、 geolocation.getCurrentPosi €tion


返回設備的(de)當前位置,一(yī)個(gè)∏ ​≈位置對(duì)象。
navigator.geolocation.getCur↔☆rentPosition(geoloca>≥&tionSuccess,
[geolocationError],
[geolocationOptions]);
參數(shù)
geolocationSuccess:通(tō↑↕‍‍ng)過當前位置的(de)回調。
geolocationError:(可(β€kě)選)如(rú)果發生(shēng)錯(cuò)誤,執行(x↔​φíng)的(de)回調。


geolocationOptions:(可(kě)←'<♥選)獲取地(dì)理(lǐ)位置的(de)  ₩選項,例如(rú)獲取頻(pín)率。它一(yīπφ£)般作(zuò)為(wèi)一(yī)個(gè)JSON對(d‌‌★uì)象,目前可(kě)設
置的(de)屬性如(rú)下(xià)
geolocationOptions{
enableHighAccuracy:提供一(yī)個(gè)表明(m≤¥‌íng)應用(yòng)程序希望獲得(de)最佳可(kěλα∏₹)能(néng)結果的(de)提示。
timeout:允許的(de)以毫秒(miǎo)為™♠∑•(wèi)單位的(de)最大(dà)時(s♥λhí)間(jiān)間(jiān)隔,該時(shí)間(j≈ >•iān)間(jiān)隔是(shì)從(cóng)geolocation.ge≤‌ΩtCurrentPosition或
geolocation.watchPosition的÷β π(de)調用(yòng)到(dào)相(xiàng)應≤<₽的(de)geolocationSuccess回調函數(Ω£shù)被調用(yòng),單位是(shì)毫秒(miγ★♠¶ǎo)。
maximumAge:保留上(shàng)次緩存的(de)最長(chángφ>₹)時(shí)間(jiān),單位是(shì)毫秒(miǎo)。可¶"©∞(kě)以理(lǐ)解為(wèi)獲取地(dì)理(lǐ)位置信息的(d÷÷φe)頻(pín)率
注意:
除非enableHighAccuracy選項被設定為(wèi)tr‍÷≈ue,否則Android 2.X模拟器(q•σì)不(bù)會(huì)返回一(yī)個(gè)地(dì)理(ε₩☆$lǐ)位置結果
例如(rú):{ maximumAge: 3000, timeout: ✔¶₽↔5000, enableHighAccuracy: true };
}

三、 主要(yào)對(duì)象描述


1.Position
包含由geolocation API創建的(de)Position坐(zu≠★ò)标信息。
coords:一(yī)系列地(dì)理(lǐ)坐(zuò)标。(Coor↓ π↕dinates類型)
timestamp:以毫秒(miǎo)為(✔ ✔ wèi)單位的(de)coords的(de)創建時(↕→shí)間(jiān)戳。
2.PositionError
當發生(shēng)錯(cuò)誤時(shí),一(yī)個(gè♥λφ)PositionError對(duì)☆≈•象會(huì)傳遞給geolocationErα☆β♠ror回調函數(shù)。
code:一(yī)個(gè)在下(xià)面常量列表中定義的(de≤↕₹λ)錯(cuò)誤代碼。
message:說(shuō)明(míng)錯(cπ←uò)誤細節的(de)錯(cuò)誤信息↑​δ。
PositionError.PERMISSION★♦_DENIED:權限被拒絕
PositionError.POSITION_Uε★NAVAILABLE:位置不(bù)可(kě)用(yòng)
PositionError.TIMEOUT:超時(shí)
3. Coordinates
一(yī)系列用(yòng)來(lái)描述位置的(de)≈₽‌♣地(dì)理(lǐ)坐(zuò)标信息的(de)屬性。
latitude:以十進制(zhì)表示​λ的(de)緯度。
longitude:以十進制(zhì)表示的(de)經度。 ♠★
altitude:位置相(xiàng)對(duì)于橢圓球面的(de)高☆¶ (gāo)度,單位為(wèi)米。 海(hǎi)拔高(gāo)度
accuracy:以米為(wèi)單位的(de)緯度和(&★hé)經度坐(zuò)标的(de)精度水(shuǐ)平。☆≠altitudeAccuracy:以米為(wèi)單位的(de)高(gāo$γΩ)度坐(zuò)标的(de)精度水(shuǐ₹↔‌)平。
heading:運動的(de)方向,通(tōn≤<≈ g)過相(xiàng)對(duì)正北(✔'běi)做(zuò)順時(shí)針旋轉的(de)角σ‍‍©度指定。speed:以米/秒(miǎo)為(wèi)單>≤位的(de)設備當前地(dì)面速
度。
注意:
altitudeAccuracy: Android設備上(shàng)不(b•✔£ù)支持該屬性,返回值總是(shì)null


 四、獲取地(dì)理(lǐ)位置信息

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Coα✘ntent-Type" content="text/htmα₽♠l; charset=utf-8"≥σ≈;>
<title>Geolocation例子(zǐ)& 'lt;/title>
<script type="text/javascriλ•←↓pt" charset="utf↓÷∑-8" src="cordova.js&qu>₽ ot;></script>
<script type="t륩ext/javascript" charset="u₹₹tf-8">
// 等待PhoneGap加載
document.addEventListener(&qσ"₹​uot;deviceready", onDeviceReady ≤‍, false);
// 加載完成
function onDeviceReady() {
navigator.geolocation.getCurrentPos≈π'ition(onSuccess, onError);
}
// onSuccess回調函數(shù)
// 接收包含當前地(dì)理(lǐ)位Ω‌‍↕置坐(zuò)标信息的(de)Positionπ ©對(duì)象
function onSuccess(position) {
var element = document.getElementById≈  ('geolocation');
element.innerHTML = '緯度: ' + position.c>★<∏oords.latitude + '<br />' +
'經度: ' + position.coords.lσ∏‌ongitude + '<br />' +
'海(hǎi)拔高(gāo)度: ' + position.coε♦ords.altitude + '<br ♦¶/>'
+
'精确度: ' + position.coords.accuracy​∑ + '<br />' +
'海(hǎi)拔高(gāo)度精确度: ' + position.coor♦∑✔∑ds.altitudeAccuracy +♥★ '<br />' +
'運動方向: ' + position.coords.heading£Ω + '<br
/>' +
'速度: ' + position.coords.speed + '<&γbr />'
+
'時(shí)間(jiān)戳: ' + new  >Date(position.timestamp) + '<br $Ω/>';
}
// onError回調函數(shù),接收包含具體(tǐ)≤φ&錯(cuò)誤信息的(de)PositionError對≈☆(duì)象
function onError(erro₹↕λr) {
alert('錯(cuò)誤代碼: ' + ™♥∞error.code + '\n' +
'詳細信息: ' + error.message + '\n');
}





</script>
</head>
<body>
<p id="geolocation&quo>↓"t;>定位中。。。</p>ε☆€π;
</body>
</html>



五、 動态獲取地(dì)理(lǐ)位置信息
1. geolocation.watchPosition定期獲取設備的(∏✘de)地(dì)理(lǐ)位置信息


navigator.geolocation.watchPos₹©ition(onSuccess, onError, options);

2. navigator.geolocation.clearWatc÷σ↑£h停止定期獲取設備的(de)地(dì)理(lγβ¶ǐ)位置信息


 

<!DOCTYPE html>α☆Ω;
<html>
<head>
<meta http-equiv="Conten>★≠∑t-Type" content="text/html•​♥; charset=utf-8">
<title>Geolocation例子(zǐ)</t​ itle>
<script type="tex↔↓ε¥t/javascript" charset¶∞∞'="utf-8" src="co€λ∞rdova.js"><₽☆§λ/script>
<script type="text/javascript&× ♣quot; charset="utf-8&'≠♣∑quot;>
//等待PhoneGap加載
document.addEventListener("∞α♦€deviceready", o←∏nDeviceReady, false);
varwatchID = null;
//加載完成
function onDeviceReady() ₹π{
// update every 3 seco£δnds
var options = { frequency: 3000 };
watchID = navigator.geσΩ÷∏olocation.watchPosition(onSucces​§♠‍s, onError, options);
}
// onSuccess回調函數(shù)
// 接收包含當前地(dì)理(lǐ)位置坐(zuò)标信息的(de)P>$♥∏osition對(duì)象
function onSuccess(position) {
var element = documen↕↕☆t.getElementById('geolocatio‍Ω→↓n');
element.innerHTML = ¶π&'緯度: ' + position.coords.latitude + '&l₹&t;br />' +
'經度: ' + position.coords.longitude + '©®<br />' +
'<hr />' + element.in× nerHTML;
}
//取消獲取地(dì)理(lǐ)位置信息
function clearWatch() {




 if (watchID != null) ★β₩£{
navigator.geolocation↔¶★.clearWatch(watchID);
watchID = null;
}
}
// onError回調函數(shù),•εα接收包含具體(tǐ)錯(cuò)誤信息的(de)Positio∏π'nError對(duì)象
function onError(error) {
alert('code: ' + error.code ¥♥Ω+ '\n' +
'message: ' + error.message + '\n')© ;
}
</script>
</head>
<body>
<p id="geolocation& >ε©quot;>監測地(dì)理(lǐ)位ε₽置信息中。。。</p>
<button"clear¶$★$Watch();">取消監測地(dì)理(lǐ)位置信息&↓​€ lt;/button>
</body>
</html>



六、 綜合案例


在實際的(de)開(kāi)發中我們如(rú)何✘¶↑×實現(xiàn)定位呢(ne)?
一(yī)般結合百度地(dì)圖api或者谷歌(←>γgē)的(de)地(dì)圖api實現(xiàn)


<html>
<head>
<meta http-equiv="Conte÷↔♥nt-Type" content="text/html€€¶ ; charset=utf-8" />
<meta name="γ¶viewport" content="✔☆₽✘initial-scale=1.0, user-→≥♠↓scalable=no" />
<style type="text"₹/css">
body, html,#allmap {width: 100%;hei∏★Ωght: 100%;overflow: hidden÷∑&;margin:0;}
</style>
<script type="tex☆±t/javascript"
src="http://api.map.baidu.com/a¥ε↕$pi?v=2.0&ak=5a21b9801cac081f64×☆73bafdc558c53a"&g">t;</script>
<title>反地(dì)址解析&l‌®∏∞t;/title>
</head>
<body>
<div id="allmap"></d ¥iv>
</body>
</html>
<script type="text/javascr↕$'<ipt">
// 百度地(dì)圖API功能(néng✔✔)
var map = new BMap.Map("±≈♣;allmap");




var point = new BMap.Point(116.✔π331398,39.897445);
map.centerAndZoom(po×✔σ£int,12);
var gc = new BMap.Geocoder(¶¶);
map.addEventListener(&qβ© uot;click", function(e){
var pt = e.point;
gc.getLocation(pt, function(rs){
var addComp = rs.addressComponents↔®§≤;
alert(addComp.province +  ♥", " + addComp.city + "&↔←→;, " + addComp.disγ ≈trict + ", " + addComp​♥.street + ", "  ¶+
addComp.streetNumber);
});
});
</script>