API-ul HTML Geolocation
API-ul Geolocation este folosit pentru a obține locația curentă a utilizatorului.
Localizarea Poziției Utilizatorului
API-ul Geolocation obține locația curentă a utilizatorului. Deoarece acest lucru poate afecta confidențialitatea, locația nu este disponibilă decât dacă utilizatorul o aprobă.
Notă: API-ul Geolocation funcționează doar în contexte sigure, precum HTTPS. Sfat: Este cel mai precis pe dispozitive cu GPS, cum ar fi smartphone-urile sau smartwatch-urile.
Suport pentru browsere
Geolocation este suportat în toate browserele moderne (începând cu Chrome 5, Edge 12, Firefox 3.5, Safari 5 și Opera 10.6).
Folosirea API-ului HTML Geolocation
API-ul Geolocation este accesat prin navigator.geolocation, ceea ce face ca browserul să ceară permisiunea utilizatorului pentru a accesa locația acestuia. Dacă utilizatorul acceptă, browserul folosește cea mai bună funcție disponibilă pe dispozitiv (cum ar fi GPS-ul). Metoda getCurrentPosition() returnează locația curentă a utilizatorului.
Exemplul verifică dacă geolocalizarea este suportată și, dacă da, rulează getCurrentPosition(); altfel afișează un mesaj. Funcția de succes afișează latitudinea și longitudinea, iar funcția de eroare arată un mesaj dacă apare o eroare.
Exemplu
Afișarea latitudinii și longitudinii utilizatorului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocalizare de bază</title>
</head>
<body>
<p>Apasă butonul pentru a obține coordonatele tale.</p>
<button onclick="getLocation()">Încearcă</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocalizarea nu este acceptată de acest browser.";
}
}
function success(position) {
x.innerHTML = "Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
function error() {
alert("Ne pare rău, nicio poziție disponibilă.");
}
</script>
</body>
</html>
Gestionarea Erorilor și a Refuzurilor
Al doilea parametru al metodei getCurrentPosition() gestionează erorile; acesta numește o funcție ce rulează dacă obținerea locației eșuează. Poți inspecta error.code pentru un mesaj specific, tratând cazuri precum PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT și UNKNOWN_ERROR.
Exemplu
Geolocalizare cu mesaje de eroare detaliate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestionarea erorilor</title>
</head>
<body>
<p>Apasă butonul pentru a obține coordonatele tale.</p>
<button onclick="getLocation()">Încearcă</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
x.innerHTML = "Geolocalizarea nu este acceptată de acest browser.";
}
}
function success(position) {
x.innerHTML = "Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Utilizatorul a refuzat cererea de geolocalizare."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Informațiile de locație nu sunt disponibile."
break;
case error.TIMEOUT:
x.innerHTML = "Cererea de obținere a locației utilizatorului a expirat."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "A apărut o eroare necunoscută."
break;
}
}
</script>
</body>
</html>
Informații Specifice Locației
Geolocation este utilă pentru informații specifice locației, precum informații locale actualizate, afișarea punctelor de interes din apropierea utilizatorului și navigație GPS pas cu pas.
Metoda getCurrentPosition() - Datele Returnate
La succes, getCurrentPosition() returnează un obiect. Returnează întotdeauna coords.latitude, coords.longitude și coords.accuracy. Celelalte sunt returnate doar dacă sunt disponibile: coords.altitude (metri deasupra nivelului mării), coords.altitudeAccuracy, coords.heading (grade în sensul acelor de ceasornic față de nord), coords.speed (metri pe secundă) și timestamp (data și ora răspunsului).
Obiectul Geolocation - Alte Metode Interesante
Obiectul Geolocation mai are și alte metode: watchPosition() returnează locația curentă și continuă să returneze actualizări pe măsură ce utilizatorul se mișcă (ca GPS-ul dintr-o mașină), iar clearWatch() oprește watchPosition(). Ai nevoie de un dispozitiv GPS precis, precum un smartphone, pentru a testa watchPosition().
Exemplu
Urmărirea continuă a locației utilizatorului cu watchPosition().
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urmărirea poziției</title>
</head>
<body>
<p>Apasă butonul pentru a începe urmărirea coordonatelor tale.</p>
<button onclick="getLocation()">Încearcă</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(success, error);
} else {
x.innerHTML = "Geolocalizarea nu este acceptată de acest browser.";
}
}
function success(position) {
x.innerHTML = "Latitudine: " + position.coords.latitude +
"<br>Longitudine: " + position.coords.longitude;
}
function error(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Utilizatorul a refuzat cererea de geolocalizare."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Informațiile de locație nu sunt disponibile."
break;
case error.TIMEOUT:
x.innerHTML = "Cererea de obținere a locației utilizatorului a expirat."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "A apărut o eroare necunoscută."
break;
}
}
</script>
</body>
</html>