Beranda>Tutorial Desain Web>tutorial HTML

Panduan HTML5-4. Gunakan geolokasi untuk mengimplementasikan fungsi penentuan posisi

Penulis：Eve Cole Waktu Pembaruan：2025-04-02 19:00:04

Yang ingin kami pelajari hari ini adalah menggunakan geolokasi untuk mengimplementasikan fungsi penentuan posisi. Kita bisa mendapatkan objek geolokasi melalui navigasi.geolocation, yang menyediakan metode berikut:

getCurrentPosition (callback, errorCallback, opsi): Dapatkan lokasi saat ini;

WatchPosition (panggilan balik, kesalahan, opsi): Mulai memantau posisi saat ini;

ClearWatch (ID): Berhenti memantau lokasi saat ini.

Catatan: Browser yang digunakan dalam contoh berikut adalah Chrome. Menggunakan browser lain, saya tidak dapat menjamin bahwa hasil berjalan konsisten dengan hasil yang ditampilkan oleh contoh.

1. Dapatkan lokasi saat ini

Kami akan menggunakan metode GetCurrentPosition untuk mendapatkan posisi saat ini. Informasi posisi tidak akan dikembalikan langsung dalam bentuk hasil. Kita perlu menggunakan fungsi callback untuk memprosesnya. Akan ada beberapa keterlambatan dalam mendapatkan koordinat, dan Anda juga akan meminta Anda untuk izin akses. Mari kita lihat contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

Tabel {Border-Collapse: Collapse;}

th, td {padding: 4px;}

th {text-align: right;}

</tyle>

</head>

<body>

<able>

<tr>

<th> bujur: </t>

<td id = "bujur">-</td>

<th> latitude: </th>

<td id = "latitude">-</td>

</tr>

<tr>

<th> ketinggian: </t>

<td id = "altitude">-</td>

<th> akurasi: </t th>

<td id = "akurasi">-</td>

</tr>

<tr>

<th> akurasi ketinggian: </th>

<td id = "altitudeAccuracy">-</td>

<TH> HEADING: </TH>

<td id = "heading">-</td>

</tr>

<tr>

<TH> KECEPATAN: </TH>

<td id = "speed">-</td>

<TH> Cap Waktu: </th>

<td id = "timestamp">-</td>

</tr>

</boable>

<script>

navigator.geolocation.getCurrentPosition (DisplayPosition);

function displayPosition (pos) {

var properties = ['bujur', 'latitude', 'altitude', 'altitude', 'akurasi', 'altitudeAccuracy', 'heading', 'speed'];

untuk (var i = 0, len = properties.length; i <len; i ++) {

var value = pos.coords [properti [i]];

document.getElementById (properti [i]). innerHtml = nilai;

}

document.geteLementById ('timestamp'). innerHtml = pos.timestamp;

}

</script>

</body>

</html>

Objek posisi yang dikembalikan berisi dua properti, Coords: Pengembalian informasi koordinat; Timestamp: Waktu untuk mendapatkan informasi koordinat. Di antara mereka, Coords mencakup sifat -sifat berikut: Latitude: Latitude; bujur: bujur; Altitude: Tinggi; akurasi: akurasi (meter); altitudeAccuracy: akurasi tinggi (meter); Heading: arah perjalanan; Kecepatan: Kecepatan perjalanan (meter/detik).

Tidak semua informasi akan dikembalikan, itu tergantung pada perangkat yang Anda host browser. Perangkat seluler seperti GPS, akselerator, dan kompas akan mengembalikan sebagian besar informasi, tetapi komputer rumahan tidak akan berfungsi. Informasi lokasi yang diperoleh oleh komputer rumahan tergantung pada lingkungan jaringan atau WiFi. Mari kita lihat hasil berjalan dari contoh di atas.

Klik Izinkan untuk mendapatkan informasi koordinat.

2. Tangani pengecualian

Sekarang kami memperkenalkan penanganan pengecualian GetCurrentPosition, yang diimplementasikan dengan menggunakan fungsi callback errorCallback. Kesalahan parameter yang dikembalikan oleh fungsi berisi dua properti, kode: kode jenis kesalahan; Pesan: Pesan Kesalahan. Kode berisi tiga nilai: 1: Pengguna tidak berwenang untuk menggunakan geolokasi; 2: Informasi koordinat tidak dapat diperoleh; 3: Batas waktu informasi diperoleh.

Mari kita lihat contoh di bawah ini:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

Tabel {Border-Collapse: Collapse;}

th, td {padding: 4px;}

th {text-align: right;}

</tyle>

</head>

<body>

<able>

<tr>

<th> bujur: </t>

<td id = "bujur">-</td>

<th> latitude: </th>

<td id = "latitude">-</td>

</tr>

<tr>

<th> ketinggian: </t>

<td id = "altitude">-</td>

<th> akurasi: </t th>

<td id = "akurasi">-</td>

</tr>

<tr>

<th> akurasi ketinggian: </th>

<td id = "altitudeAccuracy">-</td>

<TH> HEADING: </TH>

<td id = "heading">-</td>

</tr>

<tr>

<TH> KECEPATAN: </TH>

<td id = "speed">-</td>

<TH> Cap Waktu: </th>

<td id = "timestamp">-</td>

</tr>

<tr>

<TH> Kode Kesalahan: </th>

<td id = "errcode">-</td>

<TH> Pesan kesalahan: </th>

<td id = "errmessage">-</td>

</tr>

</boable>

<script>

navigator.geolocation.getCurrentPosition (DisplayPosition, HandleError);

function displayPosition (pos) {

var properties = ["bujur", "latitude", "altitude", "akurasi", "altitudeAccuracy", "heading", "speed"];

untuk (var i = 0; i <properties.length; i ++) {

var value = pos.coords [properti [i]];

document.getElementById (properti [i]). innerHtml = nilai;

}

document.getElementById ("timestamp"). innerHtml = pos.timestamp;

}

function handleError (err) {

document.geteLementById ("errcode"). innerHtml = err.code;

document.geteLementById ("errMessage"). innerHtml = err.message;

}

</script>

</body>

</html>

Otorisasi ditolak, hasil operasi:

3. Gunakan item parameter opsional geolokasi

Opsi di GetCurrentPosition (Callback, ErrorCallback, Opsi) memiliki parameter berikut untuk digunakan, mengaktifkan AKeKurasi: Gunakan efek terbaik; Timeout: Timeout (milidetik); Maksimal: Tentukan waktu cache (milidetik). Mari kita lihat contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

Tabel {Border-Collapse: Collapse;}

th, td {padding: 4px;}

th {text-align: right;}

</tyle>

</head>

<body>

<able>

<tr>

<th> bujur: </t>

<td id = "bujur">-</td>

<th> latitude: </th>

<td id = "latitude">-</td>

</tr>

<tr>

<th> ketinggian: </t>

<td id = "altitude">-</td>

<th> akurasi: </t th>

<td id = "akurasi">-</td>

</tr>

<tr>

<th> akurasi ketinggian: </th>

<td id = "altitudeAccuracy">-</td>

<TH> HEADING: </TH>

<td id = "heading">-</td>

</tr>

<tr>

<TH> KECEPATAN: </TH>

<td id = "speed">-</td>

<TH> Cap Waktu: </th>

<td id = "timestamp">-</td>

</tr>

<tr>

<TH> Kode Kesalahan: </th>

<td id = "errcode">-</td>

<TH> Pesan kesalahan: </th>

<td id = "errmessage">-</td>

</tr>

</boable>

<script>

var options = {

enableHighaccuracy: false,

Timeout: 2000,

Maksimal: 30000

};

navigator.geolocation.getCurrentPosition (DisplayPosition, HandleError, Opsi);

function displayPosition (pos) {

var properties = ["bujur", "latitude", "altitude", "akurasi", "altitudeAccuracy", "heading", "speed"];

untuk (var i = 0; i <properties.length; i ++) {

var value = pos.coords [properti [i]];

document.getElementById (properti [i]). innerHtml = nilai;

}

document.getElementById ("timestamp"). innerHtml = pos.timestamp;

}

function handleError (err) {

document.geteLementById ("errcode"). innerHtml = err.code;

document.geteLementById ("errMessage"). innerHtml = err.message;

}

</script>

</body>

</html>

4. Pantau perubahan lokasi

Di bawah ini kami memperkenalkan penggunaan metode WatchPosition untuk mengimplementasikan perubahan posisi. Metode penggunaannya sama dengan GetCurrentPosition. Mari kita lihat contohnya:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

<tyle>

Tabel {Border-Collapse: Collapse;}

th, td {padding: 4px;}

th {text-align: right;}

</tyle>

</head>

<body>

<able>

<tr>

<th> bujur: </t>

<td id = "bujur">-</td>

<th> latitude: </th>

<td id = "latitude">-</td>

</tr>

<tr>

<th> ketinggian: </t>

<td id = "altitude">-</td>

<th> akurasi: </t th>

<td id = "akurasi">-</td>

</tr>

<tr>

<th> akurasi ketinggian: </th>

<td id = "altitudeAccuracy">-</td>

<TH> HEADING: </TH>

<td id = "heading">-</td>

</tr>

<tr>

<TH> KECEPATAN: </TH>

<td id = "speed">-</td>

<TH> Cap Waktu: </th>

<td id = "timestamp">-</td>

</tr>

<tr>

<TH> Kode Kesalahan: </th>

<td id = "errcode">-</td>

<TH> Pesan kesalahan: </th>

<td id = "errmessage">-</td>

</tr>

</boable>

<tombol id = "tekan"> Batalkan Watch </tutton>

<script>

var options = {

enableHighaccuracy: false,

Timeout: 2000,

Maksimal: 30000

};

var watchId = navigator.geolocation.watchposition (displayPosition, handleError, opsi);

document.geteLementById ("pressMe"). onClick = function (e) {

navigator.geolocation.clearwatch (WatchID);

};

function displayPosition (pos) {

var properties = ["bujur", "latitude", "altitude", "akurasi", "altitudeAccuracy", "heading", "speed"];

untuk (var i = 0; i <properties.length; i ++) {

var value = pos.coords [properti [i]];

document.getElementById (properti [i]). innerHtml = nilai;

}

document.getElementById ("timestamp"). innerHtml = pos.timestamp;

}

function handleError (err) {

document.geteLementById ("errcode"). innerHtml = err.code;

document.geteLementById ("errMessage"). innerHtml = err.message;

}

</script>

</body>

</html>

Ketika tombol Batal Watch diklik, pemantauan berhenti.

Alamat unduhan demo: html5guide.geolocation.zip

Artikel Terkait