Komentar: Hari ini kita akan menggabungkan geolokasi HTML5 untuk mengembangkan aplikasi kecil. Teman yang tertarik dapat mempelajarinya. Jika ada kekurangan, saya harap pahlawan akan memberi Anda nasihat.
Hari ini kami akan menggabungkan geolokasi HTML5 dengan Google Maps untuk mengembangkan aplikasi kecil. Alamat API Google Maps: https://developers.google.com/maps/documentation/javascript/?hl=zhh-cn.Untuk menghubungi Google Maps, implementasi perlu menambahkan referensi JS <Tipe Script = Teks/JavaScript src =? Sensor = false> </script>, di mana makna spesifik dari parameter sensor:
Untuk menggunakan API Google Maps, Anda perlu menunjukkan apakah aplikasi Anda menggunakan sensor (seperti pelacak GPS) di peta API peta atau permintaan layanan apa pun untuk menentukan di mana pengguna berada. Ini sangat penting untuk perangkat seluler. Jika aplikasi API Google Maps Anda menggunakan segala bentuk sensor untuk menentukan lokasi perangkat yang mengakses aplikasi Anda, Anda harus mendeklarasikan ini dengan mengatur nilai parameter sensor ke True.
Bagian HTML relatif sederhana, Anda hanya perlu menyiapkan div:
<body>
<div>
</div>
</body>
Kerangka Kode JS adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
peta var;
var browsersupport = false;
Upaya var = 0;
$ (dokumen) .ready (function () {
// Inisialisasi peta
Initmap ();
//posisi
getLocation ();
// Pelacakan Lokasi
watchlocation ();
});
fungsi initmap () {
/ * Atur semua opsi untuk peta */
var options = {
};
/ * Buat peta baru untuk aplikasi */
peta = google.maps.map baru ($ ('#peta') [0], opsi);
}
/*
* Jika objek geolokasi W3C tersedia maka dapatkan arus
* Lokasi, sebaliknya melaporkan masalahnya
*/
function getLocation () {
}
function watchlocation () {
}
/ * Plot lokasi di peta dan zoom untuk itu */
function plotlocation (position) {
}
/ * Laporkan kesalahan apa pun menggunakan fungsi ini */
Function ReportProblem (e) {
}
</script>
Metode InitMap adalah memanggil API Google Maps untuk menginisialisasi peta. Perlu mengatur objek opsi dan menggunakannya saat memanggil inisialisasi peta.
fungsi initmap () {
/ * Atur semua opsi untuk peta */
var options = {
Zoom: 4,
Pusat: Google.maps.latlng baru (38.6201, -90.2003),
maptypeId: google.maps.maptypeid.roadmap,
MaptypeControl: Benar,
maptypeControloptions: {
Gaya: google.maps.maptypecontrolstyle.horizontal_bar,
Posisi: google.maps.controlposition.bottom_center
},
Pancontrol: Benar,
Pancontroloptions: {
Posisi: google.maps.controlposition.top_right
},
ZoomControl: Benar,
ZoomControloptions: {
Gaya: google.maps.zoomContrrolstyle.large,
Posisi: google.maps.controlposition.left_center
},
Scalecontrol: Benar,
Scalecontroloptions: {
Posisi: google.maps.controlposition.bottom_left
},
StreetViewControl: Benar,
StreetViewControloptions: {
Posisi: google.maps.controlposition.left_top
}
};
/ * Buat peta baru untuk aplikasi */
peta = google.maps.map baru ($ ('#peta') [0], opsi);
}
GetLocation dan watchlocation metode untuk mendapatkan informasi penentuan posisi.
function getLocation () {
/ * Periksa apakah browser mendukung W3C Geoloke API */
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.getCurrentPosition (PlotLocation, ReportProblem, {timeout: 45000});
} kalau tidak {
ReportProblem ();
}
}
function watchlocation () {
/ * Periksa apakah browser mendukung W3C Geoloke API */
if (navigator.geolocation) {
browserSupport = true;
navigator.geolocation.watchposition (plotlocation, reportproblem, {timeout: 45000});
} kalau tidak {
ReportProblem ();
}
}
Setelah berhasil mendapatkan informasi lokasi, hubungi metode plotlokasi untuk menampilkan lokasi di Google Maps.
function plotlocation (position) {
upaya = 0;
var point = google.maps.latlng baru (position.coords.latitude, position.coords.longitude);
var marker = google.maps.marker baru ({
Posisi: Titik
});
marker.setMap (peta);
peta.setCenter (titik);
Map.setZoom (15);
}
Demo Download Address: Googlemapgeolocation.rar