HTML5 Locatiebepaling

HTML5 Geolocation (geolocatie) wordt gebruikt om de locatie van de gebruiker te bepalen.

Probeer het zelf uit: Toon uw locatie op Google Maps

Locatie van de gebruiker bepalen

Het HTML5 Geolocation API wordt gebruikt om de locatie van de gebruiker te verkrijgen.

Vanwege het mogelijke inbreuk op de privacy van de gebruiker is locatieinformatie niet beschikbaar tenzij de gebruiker toestemming geeft.

Browserondersteuning

Internet Explorer 9, Firefox, Chrome, Safari en Opera ondersteunen geolocatie.

Opmerking:Voor apparaten met GPS zoals iPhone, is geolocatie nauwkeuriger.

HTML5 - Gebruik van geolocatie

Gebruik de methode getCurrentPosition() om de locatie van de gebruiker te verkrijgen.

Het volgende voorbeeld is een eenvoudige voorbeeld van geolocatie die de breedte- en lengtegraad van de gebruiker kan retourneren.

Voorbeeld

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation wordt niet ondersteund door deze browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Breedtegraad: " + position.coords.latitude +
  "<br />Lengtegraad: " + position.coords.longitude;
  }
</script>

Probeer het zelf

Uitleg van het voorbeeld:

  • Controleer of geolocatie wordt ondersteund
  • Als de methode getCurrentPosition() wordt ondersteund, wordt deze uitgevoerd. Als deze niet wordt ondersteund, wordt een bericht aan de gebruiker getoond.
  • Als getCurrentPosition() succesvol wordt uitgevoerd, wordt een coordinates-object geretourneerd aan de functie die is opgegeven in het argument showPosition
  • De functie showPosition() haalt de breedte- en lengtegraad op en toont deze

Het bovenstaande voorbeeld is een zeer basisgebruikte script voor geolocatie zonder foutafhandeling.

Fouten en weigeringen verwerken

De tweede parameter van de methode getCurrentPosition() wordt gebruikt om fouten te verwerken. Het bepaalt de functie die wordt uitgevoerd wanneer het ophalen van de gebruikerslocatie mislukt:

Voorbeeld

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Gebruiker heeft de verzoek om geolocatie te weigeren."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Locatieinformatie is niet beschikbaar."
      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;
    }
  }

Probeer het zelf

Foutcode:

  • Permission denied - Gebruiker heeft geen toestemming voor geografische locatie
  • Position unavailable - Kan huidige locatie niet verkrijgen
  • Timeout - Operation timeout

Resultaten weergeven in een kaart

Om resultaten in een kaart weer te geven, moet je toegang hebben tot een kaartenservice die gebruik maakt van geocoördinaten, zoals Google Maps of Baidu Maps:

Voorbeeld

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Probeer het zelf

In het voorbeeld gebruiken we de retournerende geocoördinaten om een locatie in Google Maps weer te geven (gebruikmakend van een statische afbeelding).

Google Maps script

Deze link toont je hoe je een interactieve kaart kunt weergeven met markeringen, zoom en sleepopties met behulp van een script.

Informatie over een bepaalde locatie

Deze pagina demonstreert hoe je de positie van de gebruiker op een kaart kunt weergeven. Geografische locatie is echter ook zeer nuttig voor informatie over een bepaalde locatie.

Voorbeeld:

  • Lokale informatie bijwerken
  • Toont interessantspunten in de nabijheid van de gebruiker
  • Interactieve车载导航系统 (GPS)

getCurrentPosition() methode - Retournerende gegevens

Indien succesvol, retourneert de methode getCurrentPosition() een object. Het retourneert altijd de eigenschappen latitude, longitude en accuracy. Indien beschikbaar, worden ook de volgende eigenschappen retourneerd.

Eigenschappen Beschrijving
coords.latitude Decimaal afgeleide breedtegraad
coords.longitude Decimaal afgeleide lengtegraad
coords.accuracy Lokalisatieprecisie
coords.altitude Hoogte, afgezet van het zeeniveau in meters
coords.altitudeAccuracy Hoogteprecisie van de locatie
coords.heading Richting, gerekend van het noorden af, in graden
coords.speed Snelheid, uitgedrukt in meter per seconde
timestamp Antwoorddatum/tijd

Geolocation object - Andere interessante methoden

watchPosition() - Geef de huidige locatie van de gebruiker terug en blijf de locatie van de gebruiker bijwerken wanneer deze verhuist (zoals een GPS in een auto).

clearWatch() - Stop de watchPosition() methode

Het volgende voorbeeld toont de watchPosition() methode. U heeft een nauwkeurig GPS-apparaat nodig om dit voorbeeld te testen (bijvoorbeeld iPhone):

Voorbeeld

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation wordt niet ondersteund door deze browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Breedtegraad: " + position.coords.latitude +
  "<br />Lengtegraad: " + position.coords.longitude;
  }
</script>

Probeer het zelf