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 getCurrentPosition() metoden för att få användarens plats.

Följande exempel är en enkel geolokaliseringsexempel som kan returnera användarens longitudinal- och latitudkoordinater.

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:

  • Kontrollera om geolokalisering stöds
  • Om stöd finns, kör getCurrentPosition() metoden. Om stöd inte finns, visas ett meddelande till användaren.
  • Om getCurrentPosition() köras framgångsrikt, returnerar den ett coordinates-objekt till den funktion som anges i parametern showPosition
  • showPosition() funktionen hämtar och visar longitudinal- och latitudkoordinater

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

Hantera fel och förnekande

getCurrentPosition() metoden andra parameter används för att hantera fel. Den anger vilken funktion som ska köras när användarens plats inte kan hämtas:

Exempel

function visaFel(fel)
  {
  växla(error.code)
    {
    fall fel.PERMISSION_DENIED:
      x.innerHTML="Användaren förnekar förfrågan om geolokalisering."
      break;
    fall fel.POSITION_UNAVAILABLE:
      x.innerHTML="Lokalisationsinformation är inte tillgänglig."
      break;
    case error.TIMEOUT:
      x.innerHTML="Förfrågan om att få användarens plats tog för lång tid."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Ett okänt fel inträffade."
      break;
    }
  }

亲自试一试

Felkod:

  • Förbjuden åtkomst - Användaren tillåter inte geolokalisering
  • Position otillgänglig - Kan inte fånga upp aktuella positionen
  • Timeout - Operationen översteg 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 markörer, zoom och drag-and-drop-alternativ.

Information om en given plats

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

Fallstudie:

  • Uppdatera lokal information
  • Visa intressanta punkter runt användaren
  • Interaktiv bärbar navigeringssystem (GPS)

getCurrentPosition() metod - Returnerade data

Om det lyckas, returnerar getCurrentPosition() metoden ett objekt. Det returneras alltid egenskaperna latitude, longitude och accuracy. Om dessa är tillgängliga, returneras också andra egenskaper nedan.

Egenskaper Beskrivning
coords.latitude Decimalgrads av breddkoordinaten
coords.longitude Decimalgrads av längdkoordinaten
coords.accuracy Platsprecision
coords.altitude Höjd över havsnivå, mätt i meter
coords.altitudeAccuracy Positionens höjdhöjd noggrannhet
coords.heading Riktning, från norr räknat 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>

亲自试一试