Gunakan Geolokasi dalam HTML5 untuk mendapatkan lokasi geografi dan hubungi API Peta Google untuk mengesan kemahiran tutorial Google Map_html5

Hidangan sampingan ini baru mula belajar HTML5, dan sekarang saya sangat berminat dengan Geolokasi Saya menggabungkannya dengan API Peta Google untuk merealisasikan fungsi penentududukan peta asas.
1. Dapatkan lokasi geografi semasa
Panggil kaedah void getCurrentPosition(onSuccess, onError, options);.
Antaranya, onSuccess ialah fungsi panggil balik yang dilaksanakan apabila maklumat lokasi semasa berjaya diperoleh, onError ialah fungsi panggil balik yang dilaksanakan apabila maklumat lokasi semasa gagal diperoleh, dan pilihan ialah beberapa senarai biasa pilihan. Parameter kedua dan ketiga adalah atribut pilihan.
Dalam fungsi panggil balik onSuccess, kedudukan parameter digunakan, yang mewakili objek kedudukan tertentu dan mewakili kedudukan semasa. Ia mempunyai atribut berikut:
•latitud: latitud lokasi geografi semasa.
•longitud: Longitud lokasi geografi semasa.
•altitud: ketinggian lokasi semasa (null jika ia tidak boleh diperolehi).
•ketepatan: Ketepatan latitud dan longitud yang diperolehi (dalam meter).
•Ketepatan ketinggian: Longitud ketinggian yang diperolehi (dalam meter).
•tajuk: Arah hadapan peranti. Diwakili oleh sudut putaran mengikut arah jam menghadap ke arah objek (null jika tidak dapat diperoleh).
•kelajuan: Kelajuan hadapan peranti (dalam meter/saat, batal jika ia tidak boleh diperolehi).
•cap masa: Masa maklumat lokasi geografi diperoleh.

Dalam fungsi panggil balik onError, parameter ralat digunakan. Ia mempunyai atribut berikut:
•kod: kod ralat, dengan nilai berikut.
1. Pengguna menolak perkhidmatan lokasi (nilai atribut ialah 1); ).
•mesej: Rentetan yang mengandungi maklumat ralat tertentu.

Dalam parameter pilihan, atribut pilihan adalah seperti berikut:
•enableHighAccuracy: Sama ada memerlukan maklumat lokasi geografi berketepatan tinggi.
•masa tamat: Tetapkan tamat masa (unit: milisaat).
•Umur maksimum: Masa sah untuk menyimpan maklumat lokasi geografi (unit: milisaat).
Pastikan anda menulis kod berikut untuk menentukan sama ada penyemak imbas menyokong HTML5 untuk mendapatkan maklumat lokasi geografi, supaya serasi dengan penyemak imbas terdahulu yang tidak menyokongnya.

Salin kodKod adalah seperti berikut:

jika (navigator.geolocation) {

//Dapatkan maklumat lokasi geografi semasa
navigator.geolocation.getCurrentPosition(onSuccess, onError, options
} else {
alert("Pelayar anda tidak menyokong HTML5 untuk mendapatkan lokasi geografi); maklumat." ; Seperti yang ditunjukkan di bawah.

Salin kod
Kod tersebut adalah seperti berikut:

Kedua, tetapkan parameter peta dan kaedah tetapan Seperti yang ditunjukkan di bawah.

Salin kod

Kod adalah seperti berikut:

//Nyatakan koordinat pada Titik Peta Google, nyatakan abscissa dan ordinat titik koordinat pada masa yang sama

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); : 14, / /Tetapkan faktor pembesaranpusat: latlng, //Tetapkan titik tengah peta ke titik koordinat yang ditentukanmapTypeId: google.maps.MapTypeId.ROADMAP //Tentukan jenis peta} ;

Akhir sekali, buat peta dan paparkan pada halaman Kaedah penciptaan adalah seperti berikut

Salin kod

Kodnya adalah seperti berikut:

//Buat peta dan paparkannya dalam peta halaman
var map = new google.maps.Map(document.getElementById ("peta"), myOptions); Kod ditunjukkan di bawah.

Salin kod

Kod tersebut adalah seperti berikut:

http-equiv="Content-Type" content="text/html; charset=utf-8" />
;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> javascript">
fungsi init() {
jika (navigator.geolocation) {
//Dapatkan lokasi geografi semasa
navigator.geolocation.getCurrentPosition(fungsi (kedudukan) {
var coords = position.coords;
//console.log(position);
//Nyatakan titik koordinat pada peta Google, dan nyatakan abscissa dan ordinat titik koordinat
var latlng = google baharu .maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zum: 14, //Tetapkan faktor pembesaran
pusat: latlng, //Tetapkan titik tengah peta kepada Ditentukan titik koordinat
mapTypeId: google.maps.MapTypeId.ROADMAP //Tentukan jenis peta
};
//Buat peta dan paparkannya dalam peta halaman
var map = new google.maps . Map(document.getElementById("map"), myOptions);
//Buat penanda pada peta
var marker = new google.maps.Marker({
kedudukan: latlng, //Tukar hadapan Labelkan koordinat yang ditetapkan
peta: peta //Tetapkan label dalam peta yang baru dibuat
}); 🎜>kandungan: "Lokasi semasa:
Longitud:" latlng.lat() "
Dimension:" latlng.lng() //Maklumat segera dalam bentuk segera
}) ;
//Buka tetingkap gesaan
infoWindow.open(peta, penanda); ) {
kes 1:
alert("Perkhidmatan lokasi ditolak. ");
break;
kes 2:
alert("Maklumat lokasi tidak boleh diperoleh buat sementara waktu.");
break;
kes 3:
alert("Maklumat lokasi untuk dapatkan maklumat." . ");
lalai:
amaran("Ralat tidak diketahui."); {
makluman("Pelayar anda tidak menyokong HTML5 untuk mendapatkan maklumat geolokasi."
}
body onload ="init()">

< /html>