Komentar: Lauk ini baru saja mulai belajar HTML5, dan sekarang cukup tertarik pada geolokasi. Fungsi penentuan posisi peta dasar diimplementasikan dalam kombinasi dengan API Google Map. Langkah -langkah berikut terutama digunakan: dapatkan lokasi geografis saat ini, dan hubungi Google Map API untuk mendapatkan informasi lokasi saat ini.
Lauk ini baru saja mulai mempelajari HTML5, dan sekarang cukup tertarik pada geolokasi, dan menggabungkan API Google Map untuk mengimplementasikan fungsi penentuan posisi peta dasar.1. Dapatkan lokasi geografis saat ini
Hubungi metode void getCurrentPosition (OnSuccess, OnError, opsi);
Di mana OnSuccess adalah fungsi panggilan balik yang dieksekusi ketika informasi lokasi saat ini berhasil, OnError adalah fungsi panggilan balik yang dieksekusi ketika informasi lokasi saat ini gagal, opsi adalah beberapa daftar akrab opsional. Parameter kedua dan ketiga adalah atribut opsional.
Dalam fungsi panggilan balik OnSuccess, posisi parameter digunakan untuk mewakili objek posisi tertentu dan mewakili posisi saat ini. Ini memiliki properti berikut:
• Lintang: garis lintang lokasi geografis saat ini.
• Longitude: Bujur dari lokasi geografis saat ini.
• Ketinggian: Ketinggian lokasi saat ini (nol jika tidak dapat diambil).
• Akurasi: Akurasi (dalam meter) dari garis lintang dan bujur yang diperoleh.
• Altitudeaccurancy: bujur (dalam meter) dari ketinggian yang diperoleh.
• Heading: arah perangkat. Ini diwakili oleh sudut rotasi searah jarum jam yang menghadap ke arah depan (nol jika tidak dapat diambil).
• Kecepatan: Kecepatan maju perangkat (dalam meter/detik, nol jika tidak dapat diambil).
• Timestamp: Waktu ketika Anda mendapatkan informasi geolokasi.
Dalam fungsi panggilan balik OnError, parameter kesalahan digunakan. Ini memiliki properti berikut:
• Kode: Kode kesalahan, dengan nilai berikut.
1. Pengguna menolak layanan lokasi (nilai atribut adalah 1);
2. Informasi lokasi tidak dapat diperoleh (nilai atribut adalah 2);
3. Dapatkan kesalahan batas waktu informasi (nilai properti adalah 3).
• Pesan: String, berisi informasi kesalahan spesifik.
Dalam parameter opsi, properti opsional adalah sebagai berikut:
• EnableHighaccuracy: Apakah informasi geolokasi presisi tinggi diperlukan.
• Timeout: Tetapkan waktu batas waktu (dalam milidetik).
• Maksimal: Waktu yang valid (dalam milidetik) untuk informasi geolokasi cache.
Perhatikan bahwa Anda perlu menulis kode berikut untuk menentukan apakah browser mendukung HTML5 untuk mendapatkan informasi lokasi geografis, sehingga kompatibel dengan browser yang tidak didukung sebelumnya.
if (navigator.geolocation) {
// Dapatkan informasi lokasi geografis saat ini
navigator.geolocation.getCurrentPosition (OnSuccess, Onerror, opsi);
} kalau tidak {
Peringatan ("Browser Anda tidak mendukung HTML5 untuk mendapatkan informasi geolokasi.");
}
2. Hubungi Google Map API untuk mendapatkan informasi lokasi saat ini
Pertama, Anda perlu merujuk file skrip API Google Map di halaman. Metode impor adalah sebagai berikut.
<type skrip = "Text/JavaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
Kedua, atur parameter peta, dan metode pengaturan adalah sebagai berikut.
// Tentukan titik koordinat di Google Map, dan tentukan koordinat horizontal dan vertikal dari titik koordinat.
var latlng = google.maps.latlng baru (coords.latitude, coords.longitude);
var myoptions = {
Zoom: 14, // atur pembesaran
Pusat: Latlng, // Tetapkan titik tengah peta ke titik koordinat yang ditentukan
maptypeId: google.maps.maptypeid.roadmap // Tentukan jenis peta
};
Akhirnya, buat peta dan tampilkan di halaman, metode pembuatan adalah sebagai berikut
// Buat peta dan tampilkan di peta halaman
var map = google.maps.map baru (document.geteLementById ("peta"), myoptions);
Pada akhirnya, semua kode untuk contoh ini disajikan. Kode ditampilkan di bawah ini.
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Dapatkan lokasi saat ini dan tampilkan di Google Maps </iteme>
<type skrip = "Text/JavaScript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<type skrip = "Teks/JavaScript">
fungsi init () {
if (navigator.geolocation) {
// Dapatkan lokasi geografis saat ini
navigator.geolocation.getCurrentPosition (function (position) {
var coords = position.coords;
//console.log(position);
// Tentukan titik koordinat di Google Map, dan tentukan koordinat horizontal dan vertikal dari titik koordinat.
var latlng = google.maps.latlng baru (coords.latitude, coords.longitude);
var myoptions = {
Zoom: 14, // atur pembesaran
Pusat: Latlng, // Tetapkan titik tengah peta ke titik koordinat yang ditentukan
maptypeId: google.maps.maptypeid.roadmap // Tentukan jenis peta
};
// Buat peta dan tampilkan di peta halaman
var map = google.maps.map baru (document.geteLementById ("peta"), myoptions);
// Buat tanda di peta
var marker = google.maps.marker baru ({
Posisi: latlng, // Klik koordinat yang ditetapkan di atas
Peta: peta // atur anotasi ini di peta yang baru saja Anda buat
});
// Tag jendela prompt
var infowindow = google.maps.infowindow baru ({
Konten: "Lokasi Saat Ini: <br/> Panjang:" + latlng.lat () + "<br/> Dimensi:" + latlng.lng () // pesan prompt di formulir prompt
});
// buka jendela prompt
infowindow.open (peta, penanda);
},
function (error) {
// kesalahan pemrosesan
switch (error.code) {
Kasus 1:
peringatan ("Layanan Lokasi Ditolak.");
merusak;
Kasus 2:
peringatan ("Informasi lokasi tidak dapat diperoleh untuk saat ini.");
merusak;
Kasus 3:
peringatan ("Dapatkan batas waktu informasi.");
merusak;
bawaan:
Peringatan ("Kesalahan Tidak Diketahui.");
merusak;
}
});
} kalau tidak {
Peringatan ("Browser Anda tidak mendukung HTML5 untuk mendapatkan informasi geolokasi.");
}
}
</script>
</head>
<body>
<div> </div>
</body>
</html>