hujung hadapan web
Tutorial H5
Gunakan Geolokasi dalam HTML5 untuk mendapatkan lokasi geografi dan hubungi API Peta Google untuk mengesan kemahiran tutorial Google Map_html5
Gunakan Geolokasi dalam HTML5 untuk mendapatkan lokasi geografi dan hubungi API Peta Google untuk mengesan kemahiran tutorial Google Map_html5
May 16, 2016 pm 03:50 PMHidangan 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.
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:
Salin kod
Kod 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.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dapatkan lokasi semasa dan paparkannya pada Peta Google</title> ;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 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:<br/>Longitud:" latlng.lat() "<br/>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."
}
</skrip> body onload ="init()">
<div id="map" style="width: 800px; height: 600px"></div> < /html>
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mengubah suai lokasi IP Douyin
May 04, 2024 pm 04:36 PM
Bagaimana untuk mengubah suai lokasi IP Douyin
Adakah Amap memerlukan pendaftaran telefon mudah alih?
May 05, 2024 pm 05:12 PM
Adakah Amap memerlukan pendaftaran telefon mudah alih?
Bagaimana untuk menyiarkan gambar dan video di Weibo
May 03, 2024 am 01:15 AM
Bagaimana untuk menyiarkan gambar dan video di Weibo
Bagaimana untuk menetapkan semula cadangan Douyin? Bagaimana untuk menukar pengesyoran kepada ditampilkan?
May 08, 2024 pm 03:52 PM
Bagaimana untuk menetapkan semula cadangan Douyin? Bagaimana untuk menukar pengesyoran kepada ditampilkan?
Cara mengubah suai kebenaran lokasi pada TikTok
May 03, 2024 pm 11:24 PM
Cara mengubah suai kebenaran lokasi pada TikTok
Cara menukar tetapan pengesyoran pada TikTok
May 04, 2024 am 12:06 AM
Cara menukar tetapan pengesyoran pada TikTok
Cara menukar tetapan zon waktu TikTok
May 04, 2024 am 01:57 AM
Cara menukar tetapan zon waktu TikTok
Bagaimana untuk menyediakan kedai anda sendiri pada kedudukan peta Douyin? Apakah yang perlu saya lakukan jika saya tidak mempunyai lokasi untuk kedai saya sendiri?
Apr 27, 2024 pm 01:50 PM
Bagaimana untuk menyediakan kedai anda sendiri pada kedudukan peta Douyin? Apakah yang perlu saya lakukan jika saya tidak mempunyai lokasi untuk kedai saya sendiri?
