HTML5 Geolokalisering

HTML5 Geolocation bruges til at bestemme brugerens position.

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

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

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

HTML5 - Brug af geolokation

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

Følgende eksempel er en simpel 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:

  • Tjek om geolokation er understøttet
  • Kør metoden getCurrentPosition() hvis den er understøttet. Hvis den ikke er understøttet, vis en besked til brugeren.
  • Hvis getCurrentPosition() kører succesfuldt, returnerer den en coordinates-objekt til den funktion, der er angivet som parameter til showPosition
  • Funktionen showPosition() får 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 placering udløb."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="En ukendt fejl opstod."
      break;
    }
  }

Try it yourself

Fejlkode:

  • Tilladelse nægtet - Brugeren har ikke tilladelse til geolokalisering
  • Position utilgængelig - Kan ikke få fat i nuværende placering
  • Timeout - Operationen udløb

Vis resultater på kort

For at vise resultater på kortet skal du have 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 placeringen på Google Maps (ved hjælp af statiske billeder).

Google Maps Script

De ovenstående links viser, hvordan man bruger scripts til at vise interaktive kort med muligheder for at tilføje markører, zoome og trække.

Information om en given placering

Denne side demonstrerer, hvordan man viser brugerens placering på en kort. Dog er geolokalisering også meget nyttig for information om en given placering.

Eksempel:

  • Opdater lokale oplysninger
  • Viser interessante punkter omkring brugeren
  • Interaktiv bærbare navigationsystem (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 Decimalgrader af breddegrad
coords.longitude Decimalgrader af længdegrad
coords.accuracy Placeringens præcision
coords.altitude Højde over havniveau målt i meter
coords.altitudeAccuracy Altitude accuracy of the location
coords.heading Direction, measured in degrees from true north
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 the updated location as the user moves (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 an 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