Matawebsite Promo Lebaran 2022

Javascript Geolocation

date 02 Dec 2020
date Lev Yasin
date 1023
date Web Programming
Javascript Geolocation

Geolocation memungkinkan Anda berbagi lokasi dengan situs web yang terpercaya. Garis lintang dan bujur support untuk JavaScript , yang pada gilirannya dapat mengirimnya kembali ke server web jarak jauh dan menunjukkan lokasi Anda di peta.

Seperti yang Anda lihat dari tabel berikut, geolocation API didukung oleh sebagian besar browser di desktop dan perangkat seluler.

DUKUNGAN GEOLOCATION API
FIREFOX SAFARI CHROME OPERA
3.5+ 5.0+ 5.0+ 10.6+

Penggunaan paling sederhana dari geolocation API terlihat seperti ini:

function get_location() {
  navigator.geolocation.getCurrentPosition(show_map);
}

Script diatas tidak dapat deteksi, tidak ada penanganan kesalahan, dan tidak ada opsi. Aplikasi web Anda mungkin harus menyertakan setidaknya dua yang pertama. Untuk mendeteksi dukungan untuk geolocation API , Anda dapat menggunakan Modernizr :

function get_location() {
  if (Modernizr.geolocation) {
    navigator.geolocation.getCurrentPosition(show_map);
  } else {
    // no native support; maybe try Gears?
  }
}

Apa yang Anda lakukan tanpa dukungan geolokasi terserah Anda. Saya akan menjelaskan opsi mundur Gears sebentar lagi, tetapi pertama-tama saya ingin berbicara tentang apa yang terjadi selama panggilan itu ke getCurrentPosition(). Dukungan geolocation adalah opt-in . Itu berarti browser Anda tidak akan pernah memaksa Anda untuk mengungkapkan lokasi fisik Anda saat ini ke server jarak jauh. Pengalaman pengguna berbeda dari browser ke browser. Di Mozilla Firefox, memanggil getCurrentPosition()fungsi API geolokasi akan menyebabkan browser memunculkan "bilah info" di bagian atas jendela browser.

Ada banyak hal yang terjadi di sini. Anda, sebagai pengguna akhir,

  • diberi tahu bahwa situs web ingin mengetahui lokasi Anda
  • diberi tahu situs web mana yang ingin mengetahui lokasi Anda
  • dapat mengklik ke halaman bantuan  Mozilla’s “Location-Aware Browsing” help page yang menjelaskan apa yang sedang terjadi (Google menyediakan lokasi dan menyimpan data Anda sesuai dengan Kebijakan Privasi Layanan Lokasi )
  • dapat memilih untuk membagikan lokasi Anda
  • dapat memilih untuk tidak membagikan lokasi Anda
  • dapat memberi tahu browser Anda untuk mengingat pilihan Anda (baik cara, berbagi atau tidak berbagi) sehingga Anda tidak akan pernah melihat bilah info ini lagi di situs web ini

Selanjutnya infobar ini

  • non-modal, jadi ini tidak akan mencegah Anda beralih ke jendela atau tab browser lain
  • khusus tab, sehingga akan hilang jika Anda beralih ke jendela atau tab browser lain dan muncul kembali saat Anda beralih kembali ke tab asli
  • tanpa syarat, jadi tidak ada cara bagi situs web untuk melewatinya
  • memblokir, sehingga tidak ada kemungkinan situs web tersebut dapat menentukan lokasi Anda sambil menunggu jawaban Anda

Anda baru saja melihat kode JavaScript yang menyebabkan infobar ini muncul. Ini adalah panggilan fungsi tunggal yang mengambil fungsi panggilan balik (yang saya panggil show_map). Panggilan ke getCurrentPosition() akan segera kembali, tetapi itu tidak berarti Anda memiliki akses ke lokasi pengguna. Pertama kali Anda dijamin memiliki informasi lokasi adalah dalam fungsi panggilan balik. Fungsi panggilan balik terlihat seperti ini:

function show_map(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  // let's show a map or do something interesting!
}

Fungsi callback akan dipanggil dengan satu parameter, sebuah objek dengan dua properti: coordsdan timestamp. Stempel waktunya hanya itu, tanggal dan waktu lokasi dihitung. (Karena ini semua terjadi secara asinkron, Anda tidak dapat benar-benar tahu kapan itu akan terjadi sebelumnya. Mungkin perlu beberapa saat bagi pengguna untuk membaca bilah info dan setuju untuk berbagi lokasi mereka. Perangkat dengan perangkat keras GPS khusus mungkin membutuhkan waktu lebih lama untuk menyambung ke satelit GPS . Dan seterusnya.) coordsObjek memiliki sifat seperti latitudedan seperti longitudeapa suaranya: lokasi fisik pengguna di dunia.

Matawebsite Promo
lev_yasin.png

Lev Yasin

Instruktur Web Programming Mataweb

Sangat tertarik dengan dunia Pemrograman Web & Mobile, saat ini fokus pada bagian Backend Web Developer, menggunakan PHP sebagai bahasa pemrograman utama, biasanya saya menggunakan Laravel.

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang