HTML5 Geolokalisering

HTML5 Geolocation bruges til at lokalisere brugerens position.

Prøv det selv: Vis din position på Google Maps

Lokalisér brugerens position

HTML5 Geolocation API bruges til at få brugerens geografiske position.

Da denne funktion kan krænke brugerens privatliv, er brugerens position ikke tilgængelig, medmindre brugeren giver tilladelse.

Browserunderstøttelse

Internet Explorer 9, Firefox, Chrome, Safari og Opera understøtter geolokation.

Bemærk:For enheder med GPS, såsom iPhone, er geolokation mere præcis.

HTML5 - Brug af geolokation

Brug metoden getCurrentPosition() til at få brugerens position.

Følgende eksempel er et simpelt eksempel på geolokation, der kan returnere brugerens længde- og breddegrader.

Example

<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>

Try it yourself

Eksempel forklaring:

  • Kontroller om geolokation understøttes
  • Kør metoden getCurrentPosition() hvis det er understøttet. Hvis det ikke er understøttet, vis en besked til brugeren.
  • Hvis getCurrentPosition() kører succesfuldt, returnerer den et coordinates-objekt til den funktion, der er specificeret i parameteren showPosition
  • Funktionen showPosition() henter og viser længde- og breddegrader

Eksemplet ovenfor er et meget grundlæggende script til geolokation, uden fejlhåndtering.

Håndtering af fejl og afvisning

Den anden parameter til metoden getCurrentPosition() bruges til at håndtere fejl. Den bestemmer hvilken funktion, der skal køres, når det ikke er muligt at få brugerens position:

Example

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Brugeren har afvist anmodningen om Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Lokationsinformation er ikke tilgængelig."
      break;
    case error.TIMEOUT:
      x.innerHTML="Anmodningen om at få brugerens position blev forsinket."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="En ukendt fejl opstod."
      break;
    }
  }

Try it yourself

Fejlkode:

  • Tilladelse nægtet - Brugeren tillader ikke geolokalisering
  • Position utilgængelig - Kan ikke få fat i den aktuelle position
  • Timeout - Operationen blev forsinket

Vis resultater på kort

For at vise resultater på kortet skal du få adgang til en korttjeneste, der bruger koordinater, såsom Google Maps eller Baidu Maps:

Example

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

Try it yourself

I det foregående eksempel bruger vi de returnerede koordinater til at vise positionen på Google Maps (ved hjælp af statiske billeder).

Google Maps Script

De nævnte links viser, hvordan man bruger scripts til at vise interaktive kort med muligheder for marker, zoom og træk.

Oplysninger om en given position

Denne side demonstrerer, hvordan man viser brugerens position på en kort. Geolokalisering er dog også meget nyttig til at få oplysninger om en given position.

Eksempel:

  • Opdater lokale oplysninger
  • Viser interessante punkter omkring brugeren
  • Interaktiv bilsøgningssystem (GPS)

getCurrentPosition() metode - Returnerede data

Hvis succesfuldt, returnerer getCurrentPosition() metoden et objekt. Det returnerer altid egenskaberne latitude, longitude og accuracy. Hvis tilgængelige, returneres andre af de nedenstående egenskaber.

Egenskab Beskrivelse
coords.latitude Decimalt breddegradsnummer
coords.longitude Decimalt længdegradsnummer
coords.accuracy Positionens nøjagtighed
coords.altitude Højde over havet, målt i meter
coords.altitudeAccuracy Altitude accuracy of the location
coords.heading Direction, starting from true north in degrees
coords.speed Speed, in meters per second
timestamp Response date/time

Geolocation object - Other interesting methods

watchPosition() - Returns the user's current location and continues to return updates on the user's movement (like a GPS on a car).

clearWatch() - Stop the watchPosition() method

The following example demonstrates the watchPosition() method. You need a precise GPS device to test this example (such as iPhone):

Example

<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>

Try it yourself