Working with Geolocation in PhoneGap

  • Posted on: 27 January 2013
  • By: oon
PhoneGap Geolocation

[UPDATE] untuk Android 4.0.3 ke atas, gunakan tambahan opsi pada pemanggilan getCurrentPosition()


navigator.geolocation.getCurrentPosition(onSuccess, onError,
{frequency:5000, maximumAge: 0, timeout: 10000, enableHighAccuracy:false});

Penulis punya ketertarikan yang sangat besar dengan Location Based-Service/Geolocation/Maps.

Jadi tentu saja pembahasan yang tidak terlewatkan adalah bagaimana menggunakan teknologi Geolocation di PhoneGap.

Kurang lebih persiapannya sama dengan artikel untuk mendapatkan informasi device di PhoneGap [1], yakni mulai dari aplikasi standar bawaan PhoneGap kemudian dilakukan proses customization.

Untuk informasi API, bisa langsung menuju ke http://docs.phonegap.com kemudian pilih topik Geolocation. DIsitu tersedia juga contoh aplikasi yang digunakan dalam artikel ini.

Implementasi yang akan dituliskan pada artikel ini menggunakan sistem operasi Android, sehingga butuh ditambahkan permission berikut (seharusnya secara standar/default permission ini sudah ada di project):


file: /res/xml/config.xml

file: /AndroidManifest.xml



Kode yang dibuat dalam aplikasi ini, pada index.html sediakan sebuah div dengan id bernama "geolocation".

Pada fungsi onDeviceReady di index.js serta pastikan bahwa onSuccess dan onError berada pada scoope yang benar dalam fungsi onDeviceReady.


// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(onSuccess, onError);
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
console.log("geo: "+position.coords.latitude+","+position.coords.longitude);
element.innerHTML = 'Latitude: '+ position.coords.latitude + '
'
+ 'Longitude: '+ position.coords.longitude + '
'
+ 'Altitude: '+ position.coords.altitude + '
'
+ 'Accuracy: '+ position.coords.accuracy + '
'
+ 'Alt Accuracy: '+ position.coords.altitudeAccuracy + '
'
+ 'Heading: '+ position.coords.heading + '
'
+ 'Speed: '+ position.coords.speed + '
'
+ 'Timestamp: '+ position.timestamp + '
';
}
// onError Callback receives a PositionError object
//
function onError(error) {
console.log('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
},

Jika aplikasi berhasil mendapatkan lokasi dimana Anda berada, maka akan muncul gambar seperti terlampir dalam artikel ini.

Ada kemungkinan error yang terjadi adalah Location provider di perangkatnya belum diaktifkan. (untuk melakukan pengubahan ada di Setting > Location Services). Pesan error yang muncul di Logcat: "The Last Location Provider was disabled".

[1] http://oo.or.id/content/how-get-device-information-phonegap

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.