menengahbrowser-apigeolocationMenengah3 mnt baca

Geolocation API: Menemukan Posisi User

Membaca latitude/longitude lewat getCurrentPosition, menangani izin user dan error, plus contoh penampil lokasi.

Kenapa Geolocation Ada?

Banyak aplikasi butuh tahu "user ada di mana": ojek online mencari driver terdekat, aplikasi cuaca menampilkan ramalan kota user, web warung menampilkan cabang terdekat. Sebelum Geolocation API, web tidak punya cara standar menanyakan posisi, developer harus menebak dari alamat IP yang tidak akurat. API ini memberi browser cara resmi meminta lokasi ke user, dengan izin eksplisit.

Contoh 1: Baca Posisi Sekali

javascript

if (!("geolocation" in navigator)) {
  console.log("Browser ini tidak mendukung geolocation.");
} else {
  navigator.geolocation.getCurrentPosition(
    // Callback sukses
    (pos) => {
      const lat = pos.coords.latitude;
      const long = pos.coords.longitude;
      const akurasi = pos.coords.accuracy; // dalam meter
      console.log("Lat:", lat, "Long:", long, "Akurasi:", akurasi + "m");
    },
    // Callback gagal
    (err) => {
      console.log("Gagal dapat lokasi, kode:", err.code, err.message);
    },
    // Opsi
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
  );
}

Opsi penting: enableHighAccuracy: true memakai GPS (lebih akurat, lebih boros baterai), timeout batas menunggu dalam ms sebelum error, maximumAge memperbolehkan memakai posisi cache yang umurnya sekian ms (hemat baterai).

Contoh 2: Tampilkan Lokasi + Tangani Izin dengan Ramah

javascript

function tampilkanLokasi() {
  const el = document.getElementById("lokasi");
  el.textContent = "Meminta lokasi...";

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude } = pos.coords;
      el.innerHTML =
        "Lat: " + latitude.toFixed(5) + "<br>Long: " + longitude.toFixed(5) +
        '<br><a href="https://www.openstreetmap.org/?mlat=' + latitude +
        "&mlon=" + longitude + '#map=15/' + latitude + "/" + longitude +
        '" target="_blank">Lihat di peta</a>';
    },
    (err) => {
      if (err.code === err.PERMISSION_DENIED) {
        el.textContent = "Izin lokasi ditolak. Aktifkan izin lokasi di browser untuk fitur ini.";
      } else if (err.code === err.POSITION_UNAVAILABLE) {
        el.textContent = "Posisi tidak tersedia. Cek GPS/perangkatmu.";
      } else if (err.code === err.TIMEOUT) {
        el.textContent = "Permintaan lokasi timeout. Coba lagi.";
      }
    },
    { timeout: 10000 }
  );
}

document.getElementById("btnLokasi").addEventListener("click", tampilkanLokasi);

Perhatikan: permintaan lokasi dipicu klik tombol, bukan otomatis saat halaman dibuka. Ini praktik terbaik: browser menampilkan prompt izin, dan user lebih percaya memberi izin saat ia sendiri yang meminta ("Lihat cabang terdekat") dibanding halaman yang langsung meminta saat dibuka.

Jebakan Umum dan Catatan Teknis

1. Hanya jalan di konteks aman (HTTPS atau localhost). Di HTTP biasa, navigator.geolocation bisa undefined atau langsung error. Saat testing, pakai localhost atau deploy HTTPS.

2. Selalu sediakan callback error. Banyak tutorial hanya menulis callback sukses. Di dunia nyata user sering menolak izin, dan tanpa error callback aplikasimu diam seribu bahasa. Tangani PERMISSION_DENIED dengan pesan yang membantu, bukan error mentah.

3. watchPosition untuk pelacakan berkelanjutan. Butuh update posisi terus (misal kurir bergerak)? Pakai navigator.geolocation.watchPosition(sukses, gagal) yang mengembalikan ID, hentikan dengan clearWatch(id). Jangan lupa dihentikan, GPS aktif terus menguras baterai.

4. Jangan meminta lokasi yang tidak kamu butuhkan. Lokasi adalah data privasi sensitif. Minta hanya saat fitur membutuhkannya, jelaskan alasannya di UI ("Kami butuh lokasimu untuk mencari warung terdekat"), dan jangan simpan/kirim ke server tanpa persetujuan jelas.

Ringkasan

getCurrentPosition(sukses, gagal, opsi) adalah pintu masuk Geolocation API: selalu cek dukungan browser, selalu tangani error (terutama izin ditolak), picu dari aksi user, dan ingat syarat HTTPS. Untuk pelacakan bergerak pakai watchPosition plus clearWatch.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Pencari Warung Terdekat (Simulasi)

Di dunia nyata, fitur "terdekat dari saya" adalah nyawa aplikasi delivery, ojek online, dan direktori usaha: user memberi lokasi sekali, aplikasi menghitung jarak ke semua cabang. Menghitung jarak dari koordinat (rumus haversine) adalah skill yang langsung terpakai. Buat fungsi jarakKm(lat1, lon1, lat2, lon2) dengan rumus haversine, lalu dari daftar 3 cabang warung (nama + koordinat), tampilkan cabang terdekat dari posisi user memakai getCurrentPosition. Jika izin ditolak, tampilkan daftar cabang apa adanya dengan pesan ramah.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Open Sandbox