Geolocation API

Sisällysluettelo

Paikanna käyttäjän sijainti

HTML Geolocation API:ta käytetään käyttäjän maantieteellisen sijainnin selvittämiseen.

Koska tämä voi vaarantaa yksityisyyden, asema ei ole käytettävissä, ellei käyttäjä hyväksy sitä.

Huomautus

Geolocation on tarkin GPS-laitteille, kuten älypuhelimille.

Selaimen tuki

Geolocation API on tuettu kaikissa selaimissa:


Yes	Yes	Yes	Yes	Yes

Huomautus

Geolocation API toimii vain suojatuissa yhteyksissä, kuten HTTPS:nä.

Jos sivustosi isännöi ei-suojattua alkuperää (kuten HTTP), käyttäjien sijainnin selvittämispyynnöt eivät enää toimi.

Geolocation API:n käyttö

getCurrentPosition()-menetelmää käytetään palauttamaan käyttäjän sijainti.

Alla oleva esimerkki palauttaa käyttäjän sijainnin leveys- ja pituusasteen:

Esimerkki

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

Kokeile itse →

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

Esimerkki selitettynä:

Tarkista, onko maantieteellistä sijaintia tuettu
Jos tuettu, suorita getCurrentPosition()-metodi. Jos ei, näytä viesti käyttäjälle
Jos menetelmä getCurrentPosition() onnistuu, se palauttaa koordinaattiobjektin parametrissa määritettyyn funktioon (showPosition)
ShowPosition()-funktio tulostaa leveys- ja pituusasteet

Yllä oleva esimerkki on hyvin yksinkertainen Geolocation-skripti, jossa ei ole virheiden käsittelyä.

Virheiden ja hylkäysten käsittely

Menetelmän getCurrentPosition() toista parametria käytetään käsittelemään virheitä. Se määrittää suoritettavan toiminnon, jos se ei saa käyttäjän sijaintia:

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 →

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

Tuloksen näyttäminen kartalla

Jotta voit näyttää tuloksen kartalla, tarvitset karttapalvelun, kuten Googlen Kartat.

Alla olevassa esimerkissä palautettua leveys- ja pituusastetta käytetään sijainnin näyttämiseen Googlessa Kartta (käyttämällä 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+"'>";
 }

Kokeile itse

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

Kuinka näyttää interaktiivinen Google-kartta merkinnällä, zoomauksella ja vetämällä.

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>

Sijaintikohtaiset tiedot

Tämä sivu on osoittanut, kuinka käyttäjän sijainti näytetään kartalla.

Geolocation on erittäin hyödyllinen myös sijaintikohtaisissa tiedoissa, kuten:

Ajantasaiset paikalliset tiedot
Näytetään käyttäjän lähellä olevat kiinnostavat paikat
Vaiheittainen navigointi (GPS)

GetCurrentPosition() -menetelmä - Palauta tiedot

Metodi getCurrentPosition() palauttaa objektin onnistuessaan. Leveysaste, pituus- ja tarkkuusominaisuudet palautetaan aina. Muut kiinteistöt palautetaan jos saatavilla:

coords.latitude: Leveysaste desimaalilukuna (palautetaan aina)
coords.longitude: Pituusaste desimaalilukuna (palautetaan aina)
coords.accuracy: Sijainnin tarkkuus (aina palautettu)
coords.altitude: Korkeus metreinä keskimerenpinnan yläpuolella (palautetaan, jos saatavilla)
coords.altitudeAccuracy: Sijainnin korkeustarkkuus (palautetaan, jos saatavilla)
coords.heading: Suunta asteina myötäpäivään pohjoisesta (palautetaan, jos saatavilla)
coords.speed: Nopeus metreinä sekunnissa (palautetaan, jos saatavilla)
timestamp: Vastauksen päivämäärä/aika (palautetaan, jos saatavilla)

Geolocation Object - Muita mielenkiintoisia menetelmiä

Geolocation-objektilla on myös muita mielenkiintoisia menetelmiä:

watchPosition() - Palauttaa käyttäjän nykyisen sijainnin ja jatkaa palauttaa päivitetyn sijainnin käyttäjän liikkuessa (kuten auton GPS).
clearWatch() - Pysäyttää watchPosition()-menetelmän.

Alla oleva esimerkki näyttää watchPosition()-menetelmän. Tarvitset tarkan GPS-laitteen tämän testaamiseen (esim älypuhelin):

Esimerkki

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

Kokeile itse →

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