HTML5 geolokalisering

HTML5 Geolocation (geolokalisering) används för att lokalisera användarens plats.

Prova själv: Visa din plats på Google Maps

Lokalisera användarens plats

HTML5 Geolocation API används för att få användarens geografiska plats.

Eftersom denna funktion kan kränka användarens integritet är användarens platsinformation inte tillgänglig utan deras samtycke.

Webbläsarstöd

Internet Explorer 9, Firefox, Chrome, Safari och Opera stöder geolokalisering.

Kommentar:För enheter med GPS, som iPhone, är geolokalisering mer exakt.

HTML5 - Använd geolokalisering

Använd metoden getCurrentPosition() för att få användarens plats.

Följande exempel är en enkel geolokaliseringsexempel som kan returnera användarens bredd- och längdgrader.

Exempel

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  om (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  annars{x.innerHTML="Geolocation inte stöds av denna webbläsare.";}
  }
function showPosition(position)
  {
  x.innerHTML="Bredd: " + position.coords.latitude +
  "<br />Längd: " + position.coords.longitude;
  }
</script>

亲自试一试

Förklaring av exempel:

  • Kontrollera om geolokalisering stöds
  • Om metoden getCurrentPosition() stöds, körs den. Om den inte stöds, visas ett meddelande till användaren.
  • Om getCurrentPosition() körs framgångsrikt, returneras ett coordinates-objekt till den funktion som anges i showPosition-parametern
  • showPosition() -funktionen hämtar och visar bredd- och längdgrader

Exempeln ovan är ett mycket grundläggande skript för geolokalisering, utan felhantering.

Hantera fel och avslag

Den andra parametern för metoden getCurrentPosition() används för att hantera fel. Den anger vilken funktion som körs när användarens plats inte kan fås:

Exempel

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Användaren har nekat begäran om geolokalisering."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Lokalisationsinformation är inte tillgänglig."
      break;
    case error.TIMEOUT:
      x.innerHTML="Försöket att få användarens plats gick ut på tid."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Ett okänt fel inträffade."
      break;
    }
  }

亲自试一试

Felkod:

  • Tillstånd nekat - Användaren tillåter inte geolokalisering
  • Position otillgänglig - Kan inte fånga upp nuvarande plats
  • Timeout - Operationen har överskridit tidsgränsen

Visa resultat på karta

För att visa resultat på en karta behöver du komma åt en karttjänst som använder koordinater, till exempel Google Maps eller Baidu Maps:

Exempel

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

亲自试一试

I föregående exempel använde vi de returnerade koordinatdata för att visa platsen på Google Maps (med statiska bilder).

Google Maps-skript

Länken ovan visar hur man använder skript för att visa en interaktiv karta med marker, zoom och drag-and-drop-alternativ.

Information om en given plats

Denna sida visar hur man visar användarens plats på en karta. Men geolokalisering är också mycket användbar för information om en given plats.

Fallstudie:

  • Uppdatera lokal information
  • Visa intressanta punkter runt användaren
  • Interaktiv navigeringssystem för fordon (GPS)

getCurrentPosition() metod - returnerade data

Om framgångsrikt, returnerar getCurrentPosition() metoden ett objekt. Det returneras alltid egenskaperna latitude, longitude och accuracy. Om tillgängligt, returneras andra egenskaper nedan.

Egenskaper Beskrivning
coords.latitude Decimaltal för bredd
coords.longitude Decimaltal för längd
coords.accuracy Placeringens noggrannhet
coords.altitude Höjd över havsnivå i meter
coords.altitudeAccuracy Höjd noggrannhet för positionen
coords.heading Riktning, från norr i grader
coords.speed Hastighet, i meter per sekund
timestamp Svarande datum/tid

Geolocation-objekt - Andra intressanta metoder

watchPosition() - Returnerar användarens nuvarande position och fortsätter att returnera uppdateringar när användaren rör sig (liksom en GPS i en bil).

clearWatch() - Stoppa watchPosition() metoden

Följande exempel visar watchPosition() metoden. Du behöver en exakt GPS-enhet för att testa detta exempel (t.ex. iPhone):

Exempel

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  om (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  annars{x.innerHTML="Geolocation inte stöds av denna webbläsare.";}
  }
function showPosition(position)
  {
  x.innerHTML="Bredd: " + position.coords.latitude +
  "<br />Längd: " + position.coords.longitude;
  }
</script>

亲自试一试