HTML5-geolokointi

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

Kokeile itse: Näytä sijaintisi Google-mapsissa

Sijainti käyttäjän sijainnissa

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

Koska 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 varustetuissa laitteissa, kuten iPhone:ssa, geolokointi on tarkempaa.

HTML5 - Käytä geolokointia

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

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

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

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

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äärittelee funktion, joka suoritetaan, 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 hakemiseksi aikakatkaistiin."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Tuntematon virhe tapahtui."
      break;
    }
  }

Kokeile itse

Virhekoodeja:

  • Ei lupaa - käyttäjä ei antanut geolokalisoinnin lupaa
  • Sijainti ei ole saatavilla - ei voida hakea nykyistä sijaintia
  • Timeout - operaatio 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ääksemme sijainnin Google Mapsissa (käyttäen staattista kuvaa).

Google Maps -skripti

Yllä oleva linkki näyttää, miten skriptiä voidaan käyttää interaktiivisen kartan näyttämiseen merkinnöillä, zoomauksella ja vetämällä.

Annetun sijainnin tiedot

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

Esimerkki:

  • Päivittää paikalliset tiedot
  • Näyttää käyttäjän ympärillä olevat kiinnostavat kohteet
  • 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, mitattuna merenpinnan yläpuolelta metreinä
coords.altitudeAccuracy Sijainnin korkeus
coords.heading Suunta, lähtien pohjoisesta asteina
coords.speed Nopeus, metriä sekunnissa
timestamp Vastauksen päivämäärä/aika

Geolocation-objekti - Muut mielenkiintoiset menetelmät

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

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

Seuraava esimerkki näyttää watchPosition() -menetelmän. Tämä esimerkki vaatii tarkan GPS-laitteen testaukseen (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