Rumah 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 PM
lokasi geografi

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:

<script type=" text/javascript " src="http://maps.google.com/maps/api/js?sensor=false"></script>
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:

<!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>
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengubah suai lokasi IP Douyin 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? 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 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? 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 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 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 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? 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?

See all articles