HTML5 Geografische定位

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

De 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 retourneert.

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 weergegeven aan de gebruiker.
  • Als getCurrentPosition() succesvol is uitgevoerd, wordt een coordinates-object geretourneerd naar 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 basis 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="Het verzoek om de gebruikerslocatie op te halen is verlopen."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Een onbekende fout is opgetreden."
      break;
    }
  }

Probeer het zelf

Foutcode:

  • Toegang geweigerd - Gebruiker heeft geen toestemming voor geografische定位
  • Locatie onbeschikbaar - Kan de huidige locatie niet ophalen
  • Timeout - Operatie overschreden

Weergeven van resultaten op een kaart

Om de resultaten weer te geven op een kaart, 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 hierboven gebruiken we de retournerde geocoördinaten om een locatie weer te geven op Google Maps (met een statische afbeelding).

Google Maps script

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

Informatie over een locatie

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

Voorbeeld:

  • Update lokale informatie
  • Toont interessante punten in de buurt van de gebruiker
  • Interactieve车载导航系统 (GPS)

getCurrentPosition() methode - retournerde gegevens

Als succesvol, retourneert de getCurrentPosition() methode een object. Het retourneert altijd de latitude, longitude en accuracy-eigenschappen. Als beschikbaar, worden ook de andere hieronder vermelde eigenschappen retournerd.

Eigenschappen Beschrijving
coords.latitude Decimaal getal van de breedtegraad
coords.longitude Decimaal getal van de lengtegraad
coords.accuracy Locatieprecisie
coords.altitude Het hoogtegemiddelde, gemeten in meters boven zeeniveau
coords.altitudeAccuracy Hoogteprecisie van de locatie
coords.heading Richting, gemeten in graden vanaf het noorden
coords.speed Snelheid, gemeten in meter per seconde
timestamp Antwoorddatum/tijd

Geolocation object - Andere interessante methoden

watchPosition() - Keert de huidige locatie van de gebruiker terug en blijft op de locatie van de gebruiker updaten bij het verplaatsen van de gebruiker (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 een 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