Web Geolocation API

Paikannetaan käyttäjän sijainti

HTML Geolocation API käytetään käyttäjän sijainnin hankkimiseen.

Koska tämä saattaa vahingoittaa yksityisyyttä, paikkaa ei ole käytettävissä ilman käyttäjän hyväksyntää.

Kokeile itse

Huomautus:Geolokointi on tarkinta GPS-varustetuilla laitteilla (kuten älypuhelimilla).

Kaikki selaimet tukevat Geolocation API:ta:

Chrome IE Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

Huomautus:Chrome 50 alkaen Geolocation API on käytössä vain turvallisessa kontekstissa, kuten HTTPS:ssä. Jos verkkosivustosi on toiminnassa ei-turvallisessa lähteessä (esim. HTTP), käyttäjän sijainnin hakeminen ei toimi enää.

Käytä Geolocation API:ta

getCurrentPosition() Menetelmä palauttaa käyttäjän sijainnin.

Seuraavassa esimerkissä palautetaan käyttäjän sijainnin leveys- ja pituusasteet:

Esimerkki

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Tämä selain ei tue sijaintia.";
  }
}
function showPosition(position) {
  x.innerHTML = "Leveysaste: " + position.coords.latitude +
  "<br>Pituusaste: " + position.coords.longitude;
}
</script>

Kokeile itse

Esimerkki selitetään:

  1. Tarkista, tuetaanko Geolocationia
  2. Jos getCurrentPosition() -menetelmää tuetaan, suorita se. Jos ei, näytä käyttäjälle viesti
  3. Jos getCurrentPosition() -menetelmä onnistuu, se palauttaa coordinates-objektin parametrina määritetylle funktiolle (showPosition)
  4. showPosition() -funktio tulostaa leveysasteen ja pituusasteen

Yllä oleva esimerkki on erittäin perustava geolokointiskripti ilman virheenkäsittelyä.

Käsittele virheet ja hylkäykset

getCurrentPosition() Toinen parametri käsittelee virheitä. Jos käyttäjän sijaintia ei voida hakea, se määrittää suoritettavan funktion:

Esimerkki

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

Kokeile itse

Näytä tulokset kartalla

Jos haluat näyttää tulokset kartalla, sinun täytyy käyttää karttapalvelua, kuten Google Mapsia.

Esimerkissä alla, palautetut leveys- ja pituusmitat käytetään sijainnin näyttämiseen Google-kartalla (käyttäen staattista kuvaa):

Esimerkki

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

Sijaintityypilliset tiedot

Tämä sivu näyttää, miten käyttäjän sijainti näytetään kartalla.

Geolocation on myös erittäin hyödyllinen sijaintityypillisten tietojen suhteen, esimerkiksi:

  • Uusimmat paikalliset tiedot
  • Näytä käyttäjän läheiset kiinnostavat kohteet
  • Aste-aste-ohjaus (Turn-by-turn navigation) (GPS)

getCurrentPosition() -menetelmä - palautettavat tiedot

getCurrentPosition() Menetelmä palauttaa objektin onnistuessa. Aina palautetaan leveys, pituus ja tarkkuus ominaisuudet. Jos saatavilla, palautetaan myös muut ominaisuudet:

Ominaisuudet Palauta
coords.latitude Deeksimetrinen leveysaste (palautetaan aina).
coords.longitude Deeksimetrinen pituus (palautetaan aina).
coords.accuracy Sijainnin tarkkuus (palautetaan aina).
coords.altitude Korkeus merenpinnan yläpuolella (metriinä) (jos saatavilla, palautetaan).
coords.altitudeAccuracy Sijainnin korkeusarkkuus (jos saatavilla, palautetaan).
coords.heading Kierrosnopeus pohjoisesta kiertäen (jos saatavilla, palautetaan).
coords.speed Nopeus metriä sekunnissa (jos saatavilla, palautetaan).
timestamp Vastauksen päivämäärä/aika (jos saatavilla, palautetaan).

Geolocation-objekti - muut mielenkiintoiset menetelmät

Geolocation-objekti sisältää myös muita mielenkiintoisia menetelmiä:

  • watchPosition() - Palauta käyttäjän nykyinen sijainti ja jatketaan päivitetyn sijainnin palauttamista käyttäjän liikkumisen yhteydessä (esim. autossa oleva GPS).
  • clearWatch() - Lopeta watchPosition () -menetelmän suorittaminen.

Seuraavat esimerkit näyttävät watchPosition() Metodi. Testaaminen vaatii tarkan GPS-laitteen (esim. älypuhelin):

Esimerkki

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    else {
  }
    x.innerHTML = "Tämä selain ei tue sijaintia.";
  }
}
function showPosition(position) {
  x.innerHTML = "Leveysaste: " + position.coords.latitude +
  "<br>Pituusaste: " + position.coords.longitude;
}
</script>

Kokeile itse