Sebelumnya kita telah membahas tentang Geolocation API pada artikel Memahami 3 Api Model pada HTML5 Part 2. Pada artikel tersebut telah kita jelaskan pengertian Geolocation API, Browser apa saja yang mendukung Geolocation API, penggunaan Geolocation API pada HTML, beserta Handling Error dan Rejection pada Geolocation API. Pastinya, setelah membaca artikel tersebut kita dapat mengerti apa itu Geolocation API walaupun belum memahaminya secara utuh, seperti bagian method Geolocation API. Supaya dapat memahami artikel secara utuh, kalian dapat menyimak artikel Memahami Api Model pada HTML5 Part 3 sebagai berikut
Pada kesempatan kali ini, kita akan melanjutkan pembahasan materi tentang Geolocation API. Mari kita bahas lebih lanjut tentang Method Geolocation API beserta implementasinya pada HTML5.
Method Geolocation API
Pada umumnya, method pada Geolocation API terbagi menjadi dua bagian, yaitu getCurrentPosition() dan Object Geolocation. Berikut merupakan penjelasan tentang masing-masing method tersebut.
1. Method getCurrentPosition()
Method getCurrentPosition() berfungsi untuk return data atau mengembalikan nilai data objek saat kode berhasil dijalankan. Properti nilai latitude, longitude, dan accuracy selalu di-return. Properti lainnya juga akan di-return jika tersedia.
| Properti | Return Data |
| coords.latitude | Latitude atau garis lintang sebagai angka desimal (selalu return) |
| coords.longitude | Longitude atau garis bujur sebagai angka desimal (selalu return) |
| coords.accuracy | Accuracy atau akurasi posisi (selalu return) |
| coords.altitude | Altitude atau ketinggian dalam meter di atas permukaan laut (return jika tersedia) |
| coords.latitudeAccuracy | Akurasi ketinggian latitude (return jika tersedia) |
| coords.heading | Heading dalam derajat searah jarum jam dari utara (return jika tersedia) |
| coords.speed | Kecepatan dalam m/s atau meter per second (return jika tersedia) |
| timestamp | Tanggal atau waktu (return jika tersedia) |
2. Object Geolocation
Object Gelocation memiliki 2 method yang berguna, yaitu:
- watchPosition() – Berfungsi unyuk mengembalikan posisi pengguna secara real time dan terus memperbarui posisi pengguna saat bergerak, seperti GPS di dalam kendaraan.
- clearWatch() – Mengakhiri method watchPosition().
Selanjutnya, di bawah ini terdapat method watchPosition(). Kita perlu menggunakan perangkat GPS yang akurat untuk menguji kode ini, misalnya smartphone.
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>Implementasi Geolocation API pada HTML5
Setelah mengetahui seluk beluk Geolocation API, kemudian saatnya untuk kita bereksperimen. Di bawah ini, terdapat kode demo yang berfungsi penuh dan menggunakan semua metode dan objek yang telah kita pelajari dalam artikel ini. Penggunaannya cukup simpel, setiap kali terdapat permintaan untuk mendeteksi posisi perangkat, maka data lokasi akan tampil kepada pengguna.
Implementasi demo ini berisi tiga tombol, kita dapat memilih operasi yang ingin kita lakukan. Demo ini juga mendeteksi apakah browser kita mendukung penggunaan Geolocation API atau tidak.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="IDCSharp">
<title>Geolocation API IDCSharp</title>
<style>
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body
{
max-width: 500px;
margin: 2em auto;
padding: 0 0.5em;
font-size: 20px;
}
h1
{
text-align: center;
}
.hidden
{
display: none;
}
.buttons-wrapper
{
text-align: center;
}
.button-demo
{
padding: 0.5em;
margin: 1em auto;
}
.g-info
{
font-weight: bold;
}
#log
{
height: 200px;
width: 100%;
overflow-y: scroll;
border: 1px solid #333333;
line-height: 1.3em;
}
.author
{
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Geolocation API</h1>
<div class="buttons-wrapper">
<button id="button-get-position" class="button-demo">Dapatkan lokasi sekarang!</button>
<button id="button-watch-position" class="button-demo">Lihat posisi</button>
<button id="button-stop-watching" class="button-demo">Stop melihat posisi</button>
</div>
<span id="g-unsupported" class="hidden">Tidak support API</span>
<h2>Informasi</h2>
<div id="g-information">
<ul>
<li>
Garis Lintang: <span id="latitude" class="g-info">0</span>°
<br>
Garis Bujur: <span id="longitude" class="g-info">0</span>° (dengan akurasi
<span id="position-accuracy" class="g-info">0</span> meter)
</li>
<li>
Ketinggian: <span id="altitude" class="g-info">0</span> meter
(dengan akurasi <span id="altitude-accuracy" class="g-info">0</span> meter)
</li>
<li>Kamu berada <span id="heading" class="g-info">0</span>° dari True north</li>
<li>Kamu bergerak dengan kecepatan <span id="speed" class="g-info">0</span>° meter/second</li>
<li>Data update at <span id="timestamp" class="g-info">0</span></li>
</ul>
</div>
<h3>Log</h3>
<div id="log"></div>
<button id="clear-log" class="button-demo">Clear log</button>
<small class="author">
<b>Modified by <a href="https://idcsharp.com">IDCSharp.com</a></b>
<br>
Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
</small>
<script>
window.navigator = window.navigator || {};
window.navigator.geolocation = window.navigator.geolocation ||
undefined;
if (navigator.geolocation === undefined) {
document.getElementById('g-unsupported').classList.remove('hidden');
['button-get-position', 'button-watch-position', 'button-stop-watching'].forEach(function(elementId) {
document.getElementById(elementId).setAttribute('disabled', 'disabled');
});
} else {
var log = document.getElementById('log');
var watchId = null;
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000, // 10 seconds
maximumAge: 30 * 1000 // 30 seconds
};
function success(position) {
document.getElementById('latitude').innerHTML = position.coords.latitude;
document.getElementById('longitude').innerHTML = position.coords.longitude;
document.getElementById('position-accuracy').innerHTML = position.coords.accuracy;
document.getElementById('altitude').innerHTML = position.coords.altitude ? position.coords.altitude :
'unavailable';
document.getElementById('altitude-accuracy').innerHTML = position.coords.altitudeAccuracy ?
position.coords.altitudeAccuracy :
'unavailable';
document.getElementById('heading').innerHTML = position.coords.heading ? position.coords.heading :
'unavailable';
document.getElementById('speed').innerHTML = position.coords.speed ? position.coords.speed :
'unavailable';
document.getElementById('timestamp').innerHTML = (new Date(position.timestamp)).toString();
log.innerHTML = 'Posisi berhasil didapatkan<br />' + log.innerHTML;
}
function error(positionError) {
log.innerHTML = 'Error: ' + positionError.message + '<br />' + log.innerHTML;
}
document.getElementById('button-get-position').addEventListener('click', function() {
navigator.geolocation.getCurrentPosition(success, error, positionOptions);
});
document.getElementById('button-watch-position').addEventListener('click', function() {
watchId = navigator.geolocation.watchPosition(success, error, positionOptions);
});
document.getElementById('button-stop-watching').addEventListener('click', function() {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
log.innerHTML = 'Berhenti melihat posisi<br />' + log.innerHTML;
}
});
document.getElementById('clear-log').addEventListener('click', function() {
log.innerHTML = '';
});
}
</script>
</body>
</html>Setelah membaca artikel ini, maka dapat kita simpulkan bahwa Geolocation API adalah tools yang berguna untuk memberi arah pengguna dan beberapa tujuan lainnya. Memang, dukungan pada API ini lengkap, namun kita tetap perlu menyesuaikan versi pada browser atau perangkat kita. Dikarenakan pada versi lawas kebanyakan tidak mendukung Geolocation API ini.
Pada kesempatan selanjutnya, kita akan membahas satu lagi model api yang terdapat pada HTML5. Api model tersebut adalah Drag and Drop API. Untuk mengetahui lebih lengkapnya, kita akan membahas Drag and Drop API tersebut pada artikel Memahami 3 Api Model pada HTML5 Part 4.
Related items
Pada artikel sebelumnya, kita telah mempelajari tentang tag video pada HTML5. Ternyata, ko
Pada artikel kali ini, kita akan memahami 3 Api Model pada HTML5. Ketiga api model tersebu
Pada artikel yang telah kita bahas sebelumnya, kita telah berkenalan dengan Webstorage API