Rumah > Artikel > hujung hadapan web > Panduan HTML5-7 Geolokasi digabungkan dengan Peta Google untuk membangunkan kemahiran tutorial application_html5 yang kecil
Panduan HTML5-7 Geolokasi digabungkan dengan Peta Google untuk membangunkan kemahiran tutorial application_html5 yang kecil
- WBOYasal
- 2016-05-16 15:50:221773semak imbas
Hari ini kami akan membangunkan aplikasi kecil dengan menggabungkan geolokasi HTML5 dengan Peta Google. Alamat API peta Google: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
Untuk memanggil peta google, anda perlu menambah rujukan js
Kaedah InitMap ialah memanggil api google maps untuk memulakan peta dan gunakannya apabila memanggil pemula peta.
Salin kod
Kod tersebut adalah seperti berikut:
fungsi InitMap() { / * Tetapkan semua pilihan untuk peta */ pilihan var = { zum: 4, pusat: google.maps.LatLng baharu(38.6201, -90.2003),
mapTypeId : google. maps.MapTypeId.ROADMAP, mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
kedudukan: google.maps.🎜>BOTTOM_ENTER },
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps .ZoomControlStyle.LARGE,
kedudukan: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOMPosition.
},
streetViewControl: benar,
streetViewControlOptions: {
kedudukan: google.maps.ControlPosition.LEFT_TOP
}
}; aplikasi */
peta = google.maps.Map baharu($('#map')[0], pilihan
}
Kaedah getLocation dan watchLocation mendapatkan maklumat kedudukan .
Salin kod
Kod tersebut adalah seperti berikut:style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
kedudukan: google.maps.🎜>BOTTOM_ENTER },
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps .ZoomControlStyle.LARGE,
kedudukan: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOMPosition.
},
streetViewControl: benar,
streetViewControlOptions: {
kedudukan: google.maps.ControlPosition.LEFT_TOP
}
}; aplikasi */
peta = google.maps.Map baharu($('#map')[0], pilihan
}
Kaedah getLocation dan watchLocation mendapatkan maklumat kedudukan .
Salin kod
fungsi getLocation() {
/ * Semak sama ada penyemak imbas menyokong API Geolokasi W3C */
function watchLocation() { jika (navigator.geolocation) { browserSupport = benar; ); } else { reportProblem(); }
} /* Semak sama ada penyemak imbas menyokong API Geolokasi W3C */
jika (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout: 45000 }} else {
reportProblem(>); }
}
Setelah berjaya mendapatkan maklumat lokasi, hubungi kaedah plotLocation untuk memaparkan lokasi pada Peta Google.
function plotLocation(position) {
percubaan = 0;
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitud); kedudukan: titik
});
penanda.setMap(peta); 🎜>alamat muat turun demo:
googleMapGeolocation.rar
jika (navigator .geolocation) {
browserSupport = true;
navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout: 45000 }} else {
reportProblem(>); }
}
Setelah berjaya mendapatkan maklumat lokasi, hubungi kaedah plotLocation untuk memaparkan lokasi pada Peta Google.
Salin kod
Kod tersebut adalah seperti berikut:function plotLocation(position) {
percubaan = 0;
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitud); kedudukan: titik
});
penanda.setMap(peta); 🎜>alamat muat turun demo:
googleMapGeolocation.rar
Kenyataan：
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