Geolocation API


Innehållsförteckning

    Visa innehållsförteckning


Leta reda på användarens position

HTML Geolocation API används för att få en användares geografiska position.

Eftersom detta kan äventyra integriteten är positionen inte tillgänglig om inte användaren godkänner den.

Notera

Geolokalisering är mest exakt för enheter med GPS, som smartphones.


Webbläsarstöd

Geolocation API stöds i alla webbläsare:

Yes Yes Yes Yes Yes

Notera

Geolocation API kommer endast att fungera i säkra sammanhang som t.ex som HTTPS.

Om din webbplats är värd på ett icke-säkert ursprung (som HTTP) förfrågningar om att få användarens plats kommer inte längre att fungera.


Använder Geolocation API

Metoden getCurrentPosition() används för att returnera användarens position.

Exemplet nedan returnerar latitud och longitud för användarens position:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

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

</body>
</html>

Exempel förklarat:

  • Kontrollera om Geolocation stöds

  • Kör metoden getCurrentPosition() om det stöds. Om inte, visa ett meddelande för användaren

  • Om metoden getCurrentPosition() lyckas, returnerar den ett koordinatobjekt till den funktion som anges i parametern (showPosition)

  • Funktionen showPosition() matar ut latitud och longitud

Exemplet ovan är ett mycket grundläggande Geolocation-skript, utan felhantering.



Hantering av fel och avslag

Den andra parametern i metoden getCurrentPosition() används för att hantera fel. Den anger en funktion som ska köras om den inte kan få användarens plats:

Exempel

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
    case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
    }
 }

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Visar resultatet på en karta

För att visa resultatet på en karta behöver du tillgång till en karttjänst, som Google Kartor.

I exemplet nedan används den returnerade latitud och longitud för att visa platsen i en Google Karta (med en statisk bild):

Exempel

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

   let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
   "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

   document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
 }

Prova själv

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Hur man visar en interaktiv Google-karta med en markör, zoom- och dragalternativ.

Google Map Script

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Platsspecifik information

Den här sidan har visat hur man visar en användares position på en karta.

Geolokalisering är också mycket användbar för platsspecifik information, som:

  • Uppdaterad lokal information

  • Visar intressanta platser nära användaren

  • Sväng-för-sväng-navigering (GPS)


Metoden getCurrentPosition() - Returnera data

Metoden getCurrentPosition() returnerar ett objekt vid framgång. Latituden, egenskaper för longitud och noggrannhet returneras alltid. Övriga fastigheter återlämnas om tillgänglig:

coords.latitude

Latituden som ett decimaltal (retureras alltid)

coords.longitude

Longituden som ett decimaltal (retureras alltid)

coords.accuracy

Positionens noggrannhet (retureras alltid)

coords.altitude

Höjden i meter över medelhavsytan (returneras om tillgängligt)

coords.altitudeAccuracy

Positionens höjdnoggrannhet (returneras om tillgängligt)

coords.heading

Rubriken som grader medurs från norr (returneras om tillgängligt)

coords.speed

Hastigheten i meter per sekund (returneras om tillgängligt)

timestamp

Datum/tid för svaret (returneras om tillgängligt)


Geolokaliseringsobjekt - Andra intressanta metoder

Geolocation-objektet har också andra intressanta metoder:

  • watchPosition() - Returnerar användarens nuvarande position och fortsätter till returnera uppdaterad position när användaren rör sig (som GPS i en bil).

  • clearWatch() - Stoppar watchPosition()-metoden.

Exemplet nedan visar metoden watchPosition(). Du behöver en korrekt GPS-enhet för att testa detta (som smartphone):

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

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

</body>
</html>