Panduan HTML5-7 Geolokasi digabungkan dengan Peta Google untuk membangunkan kemahiran tutorial application_html5 yang kecil

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,

mapTypeControl: true,

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:


fungsi getLocation() {

/ * Semak sama ada penyemak imbas menyokong API Geolokasi W3C */

jika (navigator.geolocation) { browserSupport = benar; ); } else { reportProblem(); }

}

function watchLocation() {

/* 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.

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