Geolocation API

Indholdsfortegnelse

    Vis indholdsfortegnelse

Find brugerens position

HTML Geolocation API bruges til at få en brugers geografiske position.

Da dette kan kompromittere privatlivets fred, er stillingen ikke tilgængelig, medmindre brugeren godkender den.

Bemærk

Geolocation er mest præcis for enheder med GPS, som smartphones.

Browser support

Geolocation API understøttes i alle browsere:

Yes Yes Yes Yes Yes

Bemærk

Geolocation API'en fungerer kun i sikre sammenhænge som f.eks som HTTPS.

Hvis dit websted er hostet på en ikke-sikker oprindelse (såsom HTTP), anmodninger om at få brugerens placering vil ikke længere fungere.

Brug af Geolocation API

Metoden getCurrentPosition() bruges til at returnere brugerens position.

Eksemplet nedenfor returnerer bredde- og længdegraden af brugerens position:

Eksempel

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

Prøv det selv →

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

Eksempel forklaret:

  • Tjek om Geolocation er understøttet

  • Hvis det understøttes, skal du køre metoden getCurrentPosition(). Hvis ikke, så vis en besked til brugeren

  • Hvis metoden getCurrentPosition() er vellykket, returnerer den et koordinatobjekt til den funktion, der er angivet i parameteren (showPosition)

  • Funktionen showPosition() udsender Latitude og Longitude

Eksemplet ovenfor er et meget grundlæggende Geolocation-script uden fejlhåndtering.

Håndtering af fejl og afvisninger

Den anden parameter i metoden getCurrentPosition() bruges til at håndtere fejl. Den specificerer en funktion, der skal køres, hvis den ikke kan hente brugerens placering:

Eksempel

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

Prøv det selv →

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

Visning af resultatet på et kort

For at få vist resultatet på et kort, skal du have adgang til en korttjeneste som Google Kort.

I eksemplet nedenfor bruges den returnerede bredde- og længdegrad til at vise placeringen i en Google Kort (ved hjælp af et statisk billede):

Eksempel

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

Prøv det selv

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

Sådan viser du et interaktivt Google Map med en markør, zoom og træk muligheder.

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>

Lokalitetsspecifik information

Denne side har vist, hvordan man viser en brugers position på et kort.

Geolocation er også meget nyttigt for lokationsspecifik information, såsom:

  • Opdateret lokal information

  • Viser interessepunkter i nærheden af brugeren

  • Turn-by-turn navigation (GPS)

Metoden getCurrentPosition() - Returner data

Metoden getCurrentPosition() returnerer et objekt ved succes. Breddegraden, egenskaber for længdegrad og nøjagtighed returneres altid. De øvrige ejendomme returneres hvis muligt:

coords.latitude

Breddegraden som et decimaltal (altid returneret)

coords.longitude

Længdegraden som et decimaltal (altid returneret)

coords.accuracy

Nøjagtigheden af positionen (altid returneret)

coords.altitude

Højden i meter over middelhavoverfladen (returneres hvis tilgængelig)

coords.altitudeAccuracy

Positionens højdenøjagtighed (returneres, hvis tilgængelig)

coords.heading

Overskriften som grader med uret fra nord (returneret, hvis tilgængelig)

coords.speed

Hastigheden i meter per sekund (returneres hvis tilgængelig)

timestamp

Datoen/tidspunktet for svaret (returneret, hvis tilgængeligt)

Geolokaliseringsobjekt - Andre interessante metoder

Geolocation-objektet har også andre interessante metoder:

  • watchPosition() - Returnerer brugerens aktuelle position og fortsætter med at returnere opdateret position, når brugeren bevæger sig (som GPS'en i en bil).

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

Eksemplet nedenfor viser metoden watchPosition(). Du skal bruge en nøjagtig GPS-enhed for at teste dette (f.eks smartphone):

Eksempel

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

Prøv det selv →

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