Ringkasan pembangunan dan aplikasi antara muka api penentududukan lokasi geografi dalam kemahiran tutorial html5_html5

Beberapa kaedah kedudukan geolokasi: alamat IP, GPS, Wifi, GSM/CDMA

Proses pemerolehan Geolokasi :
1. Pengguna membuka aplikasi web yang perlu mendapatkan geolokasi.
2. Aplikasi meminta lokasi geografi daripada penyemak imbas, dan penyemak imbas muncul pertanyaan yang meminta pengguna sama ada mahu berkongsi lokasi geografi.
3. Dengan mengandaikan pengguna membenarkannya, penyemak imbas menanyakan maklumat yang berkaitan daripada peranti.
4. Penyemak imbas menghantar maklumat yang berkaitan ke pelayan lokasi yang dipercayai, dan pelayan mengembalikan lokasi geografi tertentu.

Pelaksanaan lokasi geografi HTML5:
1 Laksanakan teknologi berasaskan pelayar (tanpa sokongan belakang) untuk mendapatkan lokasi geografi pengguna
2 lokasi geografi (Ketepatan sehingga 10m, bergantung pada peranti)
3 Jejaki lokasi geografi pengguna secara berterusan
4 Berinteraksi dengan Peta Google atau Peta Baidu untuk membentangkan maklumat lokasi

API Geolokasi. digunakan untuk menghubungkan pengguna Maklumat lokasi geografi semasa dikongsi dengan tapak yang dipercayai, yang melibatkan isu privasi dan keselamatan pengguna Oleh itu, apabila tapak perlu mendapatkan lokasi geografi semasa pengguna, penyemak imbas akan menggesa pengguna untuk "membenarkan" atau ". menafikan".
Semak dahulu pelayar mana yang menyokong API Geolokasi:
IE9.0, FF3.5, Safari5.0, Chrome5.0, Opera10.6, IPhone3.0, Android2.0
API Geolokasi wujud dalam Navigator objek hanya mengandungi 3 kaedah:

Salin kod

Kodnya adalah seperti berikut:

1. getCurrentPosition //Kedudukan semasa
2. watchPosition //Kedudukan pemantauan
3 clearWatch //Kosongkan pemantauan
navigator.geolocation.getCurrentPosition( …, function(error){
switch(error . kod){
ralat kes. TIMEOUT :
alert( " Sambungan tamat masa, sila cuba lagi" ); gunakan perkhidmatan perkongsian lokasi, pertanyaan telah dibatalkan" );
break;
ralat kes.POSITION_UNAVAILABLE :
alert( ", Maaf, perkhidmatan lokasi tidak tersedia buat sementara waktu untuk planet anda" );
break;
}
});


watchPosition adalah seperti penjejak yang dipasangkan dengan clearWatch.
watchPosition dan clearWatch berfungsi seperti setInterval dan clearInterval.

var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5 menyediakan satu siri API seperti lokasi geografi untuk disediakan pengguna dengan Mudah untuk pengguna membuat aplikasi geografi LBS Pertama, dalam pelayar yang menyokong HTML 5, apabila API dihidupkan, pengguna akan ditanya sama ada mereka bersetuju untuk menggunakan API untuk memastikan keselamatan.

1. Hidupkannya untuk menentukan sama ada penyemak imbas menyokong LBS api

Salin kod

Kod Seperti berikut:

function isGeolocationAPIAvailable()

{

var location = "Tidak, Geolokasi tidak disokong oleh penyemak imbas ini."
jika (window.navigator. geolokasi) {
lokasi = "Ya, Geolokasi disokong oleh penyemak imbas ini.";
}
makluman(lokasi); masih terdapat displayError Dalam kaedah, pengecualian ditangkap;

2. Dapatkan lokasi geografi pengguna

Hanya gunakan getCurrentPosition; >
Salin kod

Kod adalah seperti berikut:
function requestPosition() {
if (nav == null) {
nav = window.navigator;

}

jika (nav != null) { var geoloc = nav.geolocation; jika (geoloc != null) { geoloc.getCurrentPosition(successCallback) ; }

lain {

alert("API Geolokasi tidak disokong dalam penyemak imbas anda"); ");

}
}


Apabila lokasi geografi berjaya diperoleh, kaedah panggil balik akan dijana untuk memproses hasil yang dikembalikan,





Salin kod


Kod tersebut adalah seperti berikut:


function setLocation(val, e) {
document.getElementById(e ).value = val;
}

function successCallback(position)
{
setLocation(position.coords.latitud, "latitud"); ;
}

3. Soalan yang sangat biasa ialah cara menjejaki perubahan lokasi geografi pengguna. Contohnya adalah seperti berikut:

Salin kod


Kodnya adalah seperti berikut:

fungsi listenForPositionUpdates() {
jika (nav == null) {
nav = window.navigator;
jika (nav != null ) {
var geoloc = nav.geolocation;
jika (geoloc != null) {
watchID = geoloc.watchPosition(successCallback); API Geolokasi tidak disokong dalam penyemak imbas anda");
}
} lain {
alert("Navigator is not found");
}
}


Kemudian dalam In the successCallback, anda boleh menetapkan lokasi geografi terkini untuk dipaparkan:

Salin kod

Kod adalah seperti berikut:

fungsi successCallback(kedudukan){

setText(position.coords.latitude, "latitude"); setText(position.coords.longitud, "longitud"); >}

Jika anda tidak mahu penjejakan masa nyata, anda boleh membatalkannya:
fungsi clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID); 🎜>}

4. Cara mengendalikan pengecualian

Apabila anda menghadapi pengecualian, anda boleh menangkapnya:



Salin kod

Kodnya adalah seperti berikut: jika (geoloc != null) { geoloc.getCurrentPosition(successCallback, errorCallback); }

function errorCallback(error) {

var message = "";

switch (error.code) {
case error.PERMISSION_DENIED:
message = "Laman web ini tidak mempunyai kebenaran untuk gunakan "
"API Geolokasi";
pecah;
ralat kes.POSITION_UNAVAILABLE:
message = "Kedudukan semasa tidak dapat ditentukan.";
pecah;
ralat kes .PERMISSION_DENIED_TIMEOUT:
message = "Kedudukan semasa tidak dapat ditentukan "
"dalam tempoh tamat masa yang ditetapkan.";
rehat;
var strErrorCode = error.code.toString();
message = " Kedudukan tidak dapat ditentukan kerana "
"ralat tidak diketahui (Kod: " strErrorCode ")..";
makluman(mesej);
}



5. Paparkan lokasi pada peta google (dengan syarat api peta google dan tetapan lain disediakan)

Salin kod
Kod adalah seperti berikut:

fungsi getCurrentLocation()

{ jika (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showMyPosition,showError ); tidak disokong oleh penyemak imbas ini."); }

}

fungsi showMyPosition(position)

{
var coordinates=position.coords.latitude "," position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
koordinat "&zoom=14&size=300x300&sensor=false"
document.getElementById("googlemap"); .innerHTML="";
}
function showError(error)
{
switch(error.code)
{
kesalahan kes.PERMISSION_DANIED:
alert("Tapak web ini tidak mempunyai kebenaran untuk menggunakan API Geolokasi")
break;
ralat kes.POSITION_UNAVAILABLE:
alert("Kedudukan semasa tidak boleh ditentukan.")
pecah;
ralat kes.MASA:
kedudukan amaran("Kedudukan semasa tidak dapat ditentukan.") kedudukan tidak dapat ditentukan dalam tempoh tamat masa yang ditentukan.")
pecah;
ralat kes.TAK-TAKTA_ERROR:
makluman("Kedudukan tidak dapat ditentukan kerana ralat yang tidak diketahui.")
pecah;