Webb Geolocation API

Positionera användarens plats

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

Eftersom detta kan skada integriteten, är platsen inte tillgänglig om inte användaren godkänner.

Try it yourself

Kommentar:Geolokalisering är mest exakt för enheter med GPS (t.ex. smarttelefoner).

Alla webbläsare stöder Geolocation API:

Chrome IE Firefox Safari Opera
Stödjer Stödjer Stödjer Stödjer Stödjer

Kommentar:Från Chrome 50 och framåt kommer Geolocation API att endast vara tillämpligt i säkra kontexter, till exempel HTTPS. Om din webbplats är hostad på en osäker källa (t.ex. HTTP), kommer förfrågan om användarens plats inte att fungera.

Använd Geolocation API

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

Följande exempel returnerar användarens bredd- och längdgrader:

Example

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitud: " + position.coords.longitude;
}
</script>

Try it yourself

Förklaring av exempel:

  1. Kontrollera om Geolocation stöds
  2. Om getCurrentPosition() metoden stöds, kör den. Om inte, visa ett meddelande till användaren
  3. Om getCurrentPosition()-metoden lyckas, returneras ett coordinates-objekt till den funktion som specificerats i argumentet (showPosition)
  4. showPosition()-funktionen lämnar ut bredd- och längdgrader

Exempeln ovan är ett mycket grundläggande geolokaliserings-skript utan felhantering.

Hantera fel och avslag

getCurrentPosition() Den andra parametern används för att hantera fel. Om användarens plats inte kan fås, specificerar den vilken funktion som ska köras:

Example

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Användaren nekade förfrågan om geolokalisering."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Platsinformation är inte tillgänglig."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Förfrågan om användarplatsen löpte ut."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Ett okänt fel inträffade."
      break;
  }
}

Try it yourself

Visa resultat på kartan

För att visa resultat på kartan måste du besöka karttjänsten, till exempel Google-karta.

I följande exempel används returnerade bredden och längden för att visa positionen på Google Maps (med statiska bilder):

Example

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

Platsbaserad information

Denna sida visar hur man visar användarens position på en karta.

Geolocation är också mycket användbar för platsbaserad information, till exempel:

  • Senaste lokala informationen
  • Visa intressanta punkter nära användaren
  • Steg-för-steg navigering (Turn-by-turn navigation) (GPS)

getCurrentPosition() metod - returnerar data

getCurrentPosition() Metoder returnerar ett objekt vid framgång. Återges alltid bredd, längd och precisionsegenskaper. Om tillgängligt returneras andra egenskaper:

Egenskaper Returnera
coords.latitude Bredde i decimalform (återges alltid).
coords.longitude Längd i decimalform (återges alltid).
coords.accuracy Precision för position (återges alltid).
coords.altitude Höjd över havsnivån i meter (om tillgängligt returneras).
coords.altitudeAccuracy Precision för positionshöjd (om tillgängligt returneras).
coords.heading Riktning från norr mot klockan (om tillgängligt returneras).
coords.speed Hastighet i meter per sekund (om tillgängligt returneras).
timestamp Svarande datum/tid (om tillgängligt returneras).

Geolocation-objekt - andra intressanta metoder

Geolocation-objektet har också andra intressanta metoder:

  • watchPosition() - Returnera användarens aktuella position och fortsätt att returnera uppdaterade positioner medan användaren rör sig (t.ex. GPS i en bil).
  • clearWatch() - Stoppa watchPosition ()-metoden.

The following examples show watchPosition() Method. You need an accurate GPS device to test (such as a smartphone):

Example

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitud: " + position.coords.longitude;
}
</script>

Try it yourself