Let's Belajar Tetapan GPS dengan HTML!!! (Genius Corner Siri 30)

Tajuk: Tetapan GPS dengan HTML

Genius Corner Siri 30

Oleh: Fariz Gaskin

 

Salam ceria buat semua pembaca budiman. Pada minggu ini, kita akan mempelajari latihan HTML bahagian kelapan. Kali ini, kita akan belajar mendapatkan kedudukan GPS latitud dan longitud menggunakan HTML.

 

Di dalam artikel Genius Corner siri ke-18, kita telah pelajari kaedah memaparkan Google Maps di dalam laman web kita. Namun, kedudukan latitud dan longitud di dalam latihan tersebut telah dimasukkan secara kekal.

 

Kali ini, kita akan cuba mendapatkan kedudukan GPS pengunjung laman web kita secara automatik menggunakan library navigator yang disediakan secara terbina dalam bersama elemen HTML5 yang lain di dalam enjin Webkit.

 

Tanpa membuang masa, mari kita mulakan latihan minggu ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE html>

<html>

<body>

<p>Click the button to get your coordinates.</p>

<button onclick=”getLocation()”>Try It</button>

<p id=”demo”></p>

<script>

var x = document.getElementById(“demo”);

function getLocation() {

   if (navigator.geolocation) {

       navigator.geolocation.getCurrentPosition(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>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama geolocation.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan sebuah fungsi showPosition yang berfungsi mendapatkan kedudukan GPS pengunjung dan memaparkannya di dalam laman web HTML.

 

Menggunakan sebuah butang yang ditekan oleh pengunjung, fungsi getLocation dipanggil terlebih dahulu untuk menyemak samada pelayar atau peranti yang digunakan menyokong fungsi navigator HTML5.

 

Jika benar, fungsi navigator akan menghantar arahan kepada fungsi showPosition yang kemudiannya memanggil fungsi position.coords.latitude dan position.coords.longitide bagi memaparkan kedudukan GPS peranti pengunjung.

Pelajar-pelajar dari Kuala Selangor mengikuti bengkel GameSalad

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Papar kedua-dua nilai latitud dan longitud melalui elemen <input>.
  2. Gabungkan latihan ini dan latihan Genius Corner siri ke-18.
  3. Aktifkan latihan ini menggunakan pelayar berbeza dan lihat hasilnya.

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emelkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

Leave a Reply

Your email address will not be published. Required fields are marked *