Web Geolocation API

De locatie van de gebruiker bepalen

De HTML Geolocation API wordt gebruikt om de locatie van de gebruiker te verkrijgen.

Omdat dit de privacy kan schaden, is de locatie niet beschikbaar tenzij de gebruiker toestemming geeft.

Try it yourself

Opmerking:Geolocatie is voor apparaten met GPS (zoals smartphones) het meest nauwkeurig.

Alle browsers ondersteunen de Geolocation API:

Chrome IE Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Opmerking:Vanaf Chrome 50 wordt de Geolocation API alleen ondersteund in veilige contexten, zoals HTTPS. Als uw site wordt gehost op een niet-veilige bron (bijvoorbeeld HTTP), zal de aanvraag om de locatie van de gebruiker niet meer werken.

Gebruik de Geolocation API

getCurrentPosition() Deze methode wordt gebruikt om de locatie van de gebruiker te retourneren.

Het volgende voorbeeld retourneert de breedte- en lengtegraad van de gebruiker:

Example

<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 +
  "Longitude: " + position.coords.longitude;
}
</script>

Try it yourself

Voorbeeld uitleg:

  1. Controleer of Geolocation wordt ondersteund
  2. Als getCurrentPosition() wordt ondersteund, voer deze methode uit. Als dat niet het geval is, toon een bericht aan de gebruiker
  3. Als de methode getCurrentPosition() succesvol is, wordt een coordinates object geretourneerd aan de functie die is gedefinieerd in het argument (showPosition)
  4. De functie showPosition() geeft breedte- en lengtegraden weer

Het voorbeeld hierboven is een zeer basisch script voor geolocatie, zonder foutafhandeling.

Fouten en weigeringen verwerken

getCurrentPosition() De tweede parameter van de methode wordt gebruikt om fouten te verwerken. Als de gebruikerslocatie niet kan worden verkregen, bepaalt deze functie de te uitvoeren functie:

Example

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "De 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 = "De aanvraag om de gebruikerslocatie te verkrijgen is verlopen.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Een onbekende fout is opgetreden.";
      break;
  }
}

Try it yourself

Resultaten weergeven op een kaart

Als u de resultaten wilt weergeven op een kaart, moet u de kaartservice bezoeken, bijvoorbeeld Google Maps.

In het volgende voorbeeld worden de retournerende breedtegraad en lengtegraad gebruikt om de locatie in Google Maps weer te geven (gebruikend een statische afbeelding):

Example

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+"'>";
}

Locatie-specifieke informatie

Deze pagina demonstreert hoe de locatie van de gebruiker wordt weergegeven op de kaart.

Geolocation is ook zeer nuttig voor locatie-specifieke informatie, zoals:

  • Nieuwste lokale informatie
  • Toon interessante punten bij de gebruiker
  • Ronde-voor-ronde navigatie (Turn-by-turn navigation) (GPS)

getCurrentPosition() Methode - Retournerende gegevens

getCurrentPosition() Methoden retourneren een object bij succes. Ze retourneren altijd de breedtegraad, lengtegraad en nauwkeurigheidseigenschappen. Als deze beschikbaar zijn, worden ook andere eigenschappen geretourneerd:

Eigenschappen Retourneer
coords.latitude Breedtegraad in decimaal (wordt altijd geretourneerd).
coords.longitude Lengtegraad in decimaal (wordt altijd geretourneerd).
coords.accuracy Nauwkeurigheid van de locatie (wordt altijd geretourneerd).
coords.altitude Hoogte boven de gemiddelde zeeniveau in meters (indien beschikbaar, wordt geretourneerd).
coords.altitudeAccuracy Nauwkeurigheid van de hoogte van de locatie (indien beschikbaar, wordt geretourneerd).
coords.heading Richting van het vliegpad, gerekend van het noorden in de klokrichting (indien beschikbaar, wordt geretourneerd).
coords.speed Snelheid in meter per seconde (indien beschikbaar, wordt geretourneerd).
timestamp Antwoordende datum/tijd (indien beschikbaar, wordt geretourneerd).

Geolocation-object - Andere interessante methoden

Het Geolocation-object heeft ook andere interessante methoden:

  • watchPosition() - Retourneer de huidige locatie van de gebruiker en blijf updaten met de verplaatsing van de gebruiker (bijvoorbeeld GPS in een auto).
  • clearWatch() - Stop de methode watchPosition().

The following examples show watchPosition() Method. You need an accurate GPS device to test (such as a smartphone):

Example

<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 +
  "Longitude: " + position.coords.longitude;
}
</script>

Try it yourself