Webgeolocatie-API
Lokaliseer de positie van de gebruiker
De HTML Geolocation API wordt gebruikt om de geografische positie van een gebruiker te krijgen.
Aangezien dit de privacy in gevaar kan brengen, is de positie niet beschikbaar tenzij de gebruiker deze goedkeurt.
Opmerking: Geolocatie is het meest nauwkeurig voor apparaten met GPS, zoals een smartphone.
De Geolocation API wordt ondersteund in alle browsers:
| Yes | Yes | Yes | Yes | Yes |
Opmerking: vanaf Chrome 50 werkt de Geolocation API alleen in beveiligde contexten zoals HTTPS. Als uw site wordt gehost op een niet-beveiligde oorsprong (zoals HTTP), werken de verzoeken om de locatie van de gebruiker te verkrijgen niet langer.
De Geolocatie-API gebruiken
De getCurrentPosition()methode wordt gebruikt om de positie van de gebruiker te retourneren.
Het onderstaande voorbeeld retourneert de breedte- en lengtegraad van de positie van de gebruiker:
Voorbeeld
<script>
const 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 uitgelegd:
- Controleer of geolocatie wordt ondersteund
- Voer, indien ondersteund, de methode getCurrentPosition() uit. Zo niet, laat dan een bericht zien aan de gebruiker
- Als de methode getCurrentPosition() succesvol is, retourneert deze een coördinatenobject naar de functie die is opgegeven in de parameter (showPosition)
- De functie showPosition() geeft de breedte- en lengtegraad weer
Het bovenstaande voorbeeld is een heel eenvoudig Geolocatie-script, zonder foutafhandeling.
Omgaan met fouten en afwijzingen
De tweede parameter van de getCurrentPosition()methode wordt gebruikt om fouten af te handelen. Het specificeert een functie die moet worden uitgevoerd als de locatie van de gebruiker niet wordt opgehaald:
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;
}
}
Het resultaat op een kaart weergeven
Om het resultaat op een kaart weer te geven, heeft u toegang nodig tot een kaartservice, zoals Google Maps.
In het onderstaande voorbeeld worden de geretourneerde breedte- en lengtegraad gebruikt om de locatie in een Google Map weer te geven (met behulp van een statische afbeelding):
Voorbeeld
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Locatiespecifieke informatie
Deze pagina heeft laten zien hoe u de positie van een gebruiker op een kaart kunt weergeven.
Geolocatie is ook erg handig voor locatiespecifieke informatie, zoals:
- Actuele lokale informatie
- Nuttige plaatsen in de buurt van de gebruiker weergeven
- Turn-by-turn navigatie (GPS)
De methode getCurrentPosition() - Gegevens retourneren
De getCurrentPosition()methode retourneert een object bij succes. De eigenschappen voor breedtegraad, lengtegraad en nauwkeurigheid worden altijd geretourneerd. De andere eigenschappen worden geretourneerd indien beschikbaar:
| 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) |
Geolocatie-object - Andere interessante methoden
Het object Geolocation heeft ook andere interessante methoden:
watchPosition()- Geeft de huidige positie van de gebruiker terug en blijft de bijgewerkte positie retourneren terwijl de gebruiker beweegt (zoals de GPS in een auto).clearWatch()- Stopt dewatchPosition()methode.
Het onderstaande voorbeeld toont de watchPosition()methode. Je hebt een nauwkeurig GPS-apparaat nodig om dit te testen (zoals een smartphone):
Voorbeeld
<script>
const 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>