HTML5-geolokointi

HTML5 Geolocation (geolokointi) käytetään käyttäjän sijainnin määrittämiseen.

Kokeile itse: Näytä sijaintisi Google Mapsissa

Sijaintien määrittäminen käyttäjälle

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

Koska tämä ominaisuus voi loukata käyttäjän yksityisyyttä, käyttäjän sijaintitiedot eivät ole saatavilla ilman käyttäjän suostumusta.

Selaimen tuki

Internet Explorer 9, Firefox, Chrome, Safari ja Opera tukevat geolokointia.

Huomautus:GPS-laitteilla varustetut laitteet, kuten iPhone, antavat tarkempia sijaintitietoja.

HTML5 - Käytä geolokointia

Käytä getCurrentPosition() -menetelmää saadaksesi käyttäjän sijainnin.

Tässä on yksinkertainen geolokointiesimerkki, joka voi palauttaa käyttäjän leveyden- ja pituusasteet.

Esimerkki

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolokointia ei tueta tässä selaimessa.";}
  }
function showPosition(position)
  {
  x.innerHTML="Leveys: " + position.coords.latitude +
  "<br />Pituus: " + position.coords.longitude;
  }
</script>

Kokeile itse

Esimerkki selitetään:

  • Tarkista, tukeeko sijainti
  • Jos geolokointi tukee, suorita getCurrentPosition() -menetelmä. Jos ei tue, näytä käyttäjälle viesti.
  • Jos getCurrentPosition() suoritetaan onnistuneesti, se palauttaa coordinates-objektin parametrina määritellylle showPosition -funktioille
  • showPosition() -funktio hakee ja näyttää leveyden- ja pituusasteet

Yllä oleva esimerkki on erittäin perustava geolokointiskripti, joka ei sisällä virheenkäsittelyä.

Käsittele virheitä ja kieltäytymisiä

getCurrentPosition() -menetelmän toinen parametri käsittelee virheitä. Se määrittää, minkä funktion suorittaa, kun käyttäjän sijaintia ei voida hakea:

Esimerkki

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Käyttäjä kieltäytyi sijaintipyyntöä."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Sijaintitiedot eivät ole saatavilla."
      break;
    case error.TIMEOUT:
      x.innerHTML="Pyyntö käyttäjän sijainnin hakemiseen aikakatkaistiin."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Tuntematon virhe tapahtui."
      break;
    }
  }

Kokeile itse

Virhekoodeja:

  • Ei lupaa - Käyttäjä ei sallinut geolokalisointia
  • Sijainti ei ole saatavilla - Sijaintia ei voitu hakea
  • Timeout - Toiminto aikakatkaistiin

Näytä tulokset kartalla

Jos haluat näyttää tuloksen kartalla, sinun täytyy käyttää karttapalvelua, joka tukee pituus- ja leveysasteita, kuten Google Mapsia tai Baidu Mapsia:

Esimerkki

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

Kokeile itse

Esimerkissä käytämme palautettuja pituus- ja leveysasteen tietoja näyttääksesi sijainnin Google Mapsissa (käyttämällä staattista kuvaa).

Google Maps -skripti

Yllä oleva linkki näyttää, miten voit käyttää skriptiä näyttääksesi interaktiivisen kartan, jossa on merkinnät, zoomaus- ja vetämisvalinnat.

Annetun sijainnin tiedot

Tämä sivu näyttää, miten käyttäjän sijainti näkyy kartalla. Geolokalisointi on kuitenkin hyödyllinen myös annetun sijainnin tietojen suhteen.

Esimerkki:

  • Päivittää paikalliset tiedot
  • Näyttää käyttäjän ympäristön kiinnostavat kohdat
  • Interaktiivinen ajoneuvon navigointijärjestelmä (GPS)

getCurrentPosition() -menetelmä - palautetut tiedot

Jos menestyy, getCurrentPosition() -menetelmä palauttaa objektin. Aina palautetaan latitude, longitude ja accuracy-ominaisuudet. Jos saatavilla, palautetaan myös seuraavat ominaisuudet.

Ominaisuudet Kuvaus
coords.latitude Desimaalinen leveysaste
coords.longitude Desimaalinen pituusaste
coords.accuracy Sijaintitarkkuus
coords.altitude Korkeus, merenpinnan yläpuolella mitattuna metreinä
coords.altitudeAccuracy Sijainnin korkeus
coords.heading Suunta, alkuperästä pohjoiseen asti asteina
coords.speed Nopeus, metriä sekunnissa mitattuna
timestamp Vastauksen päivämäärä/aika

Geolocation-objekti - Muita mielenkiintoisia menetelmiä

watchPosition() - Palauttaa käyttäjän nykyisen sijainnin ja jatkaa palauttamalla käyttäjän liikkumisen aikana saadut päivitykset (kuten autossa oleva GPS).

clearWatch() - Pysäytä watchPosition() -menetelmä

Seuraava esimerkki näyttää watchPosition() -menetelmän. Testataksesi tätä esimerkkiä tarvitset tarkan GPS-laitteen (esim. iPhone):

Esimerkki

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolokointia ei tueta tässä selaimessa.";}
  }
function showPosition(position)
  {
  x.innerHTML="Leveys: " + position.coords.latitude +
  "<br />Pituus: " + position.coords.longitude;
  }
</script>

Kokeile itse