HTML Geolocation API
Die HTML Geolocation API word gebruik om 'n gebruiker se posisie op te spoor.
Vind die gebruiker se posisie
Die HTML Geolocation API word gebruik om die geografiese posisie van 'n gebruiker te kry.
Aangesien dit privaatheid kan benadeel, is die posisie nie beskikbaar tensy die gebruiker dit goedkeur nie.
Let wel: Geografiese ligging is die akkuraatste vir toestelle met GPS, soos slimfone.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat Geolocation ten volle ondersteun.
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Let wel: Vanaf Chrome 50 sal die Geolocation API net op veilige kontekste soos HTTPS werk. As jou werf op 'n nie-veilige oorsprong (soos HTTP) gehuisves word, sal die versoeke om die gebruikers se ligging te kry nie meer funksioneer nie.
Gebruik HTML Geolocation
Die getCurrentPosition()metode word gebruik om die gebruiker se posisie terug te gee.
Die voorbeeld hieronder gee die breedtegraad en lengtegraad van die gebruiker se posisie terug:
Voorbeeld
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Voorbeeld verduidelik:
- Kyk of Geolocation ondersteun word
- As dit ondersteun word, voer die getCurrentPosition() metode uit. Indien nie, wys 'n boodskap aan die gebruiker
- As die getCurrentPosition() metode suksesvol is, stuur dit 'n koördinate-objek terug na die funksie gespesifiseer in die parameter (showPosition)
- Die showPosition()-funksie voer die Latitude en Longitude uit
Die voorbeeld hierbo is 'n baie basiese Geolocation-skrip, met geen fouthantering nie.
Hantering van foute en verwerpings
Die tweede parameter van die getCurrentPosition()metode word gebruik om foute te hanteer. Dit spesifiseer 'n funksie om te hardloop as dit nie die gebruiker se ligging kry nie:
Voorbeeld
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Liggingspesifieke inligting
Hierdie bladsy het gedemonstreer hoe om 'n gebruiker se posisie op 'n kaart te wys.
Geografiese ligging is ook baie nuttig vir liggingspesifieke inligting, soos:
- Op datum plaaslike inligting
- Wys Belangstellingspunte naby die gebruiker
- Draai-vir-draai-navigasie (GPS)
Die getCurrentPosition() Metode - Gee data terug
Die getCurrentPosition()metode gee 'n objek op sukses terug. Die breedtegraad, lengtegraad en akkuraatheid eienskappe word altyd teruggegee. Die ander eiendomme word teruggestuur indien beskikbaar:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Geolocation Object - Ander interessante metodes
Die geolocation-voorwerp het ook ander interessante metodes:
watchPosition()- Wys die huidige posisie van die gebruiker terug en gaan voort om opgedateerde posisie terug te keer soos die gebruiker beweeg (soos die GPS in 'n motor).clearWatch()- Stop diewatchPosition()metode.
Die voorbeeld hieronder toon die watchPosition()metode. Jy benodig 'n akkurate GPS-toestel om dit te toets (soos slimfoon):
Voorbeeld
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>