Geolokační API

Obsah

    Zobrazit obsah

Najděte pozici uživatele

Geolocation API HTML se používá k získání zeměpisné polohy uživatele.

Vzhledem k tomu, že to může ohrozit soukromí, pozice není dostupná, pokud ji uživatel neschválí.

Poznámka

Geolokace je nejpřesnější pro zařízení s GPS, jako jsou chytré telefony.

Podpora prohlížeče

Geolocation API je podporováno ve všech prohlížečích:

Yes Yes Yes Yes Yes

Poznámka

Geolocation API bude fungovat pouze v zabezpečených kontextech, jako je jako HTTPS.

Pokud je váš web hostován na nezabezpečeném zdroji (například HTTP), požadavky na získání polohy uživatele již nebudou fungovat.

Použití Geolocation API

K vrácení pozice uživatele se používá metoda getCurrentPosition().

Níže uvedený příklad vrací zeměpisnou šířku a délku polohy uživatele:

Příklad

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

Zkuste to sami →

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

Vysvětlený příklad:

  • Zkontrolujte, zda je podporována geolokace

  • Pokud je podporována, spusťte metodu getCurrentPosition(). Pokud ne, zobrazte zprávu uživateli

  • Pokud je metoda getCurrentPosition() úspěšná, vrátí objekt souřadnic funkci zadané v parametru (showPosition)

  • Funkce showPosition() vypíše zeměpisnou šířku a délku

Výše uvedený příklad je velmi základní geolokační skript bez zpracování chyb.

Řešení chyb a odmítnutí

Druhý parametr metody getCurrentPosition() se používá ke zpracování chyby. Určuje funkci, která se má spustit, pokud se jí nepodaří získat polohu uživatele:

Příklad

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

Zkuste to sami →

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

Zobrazení výsledku na mapě

Chcete-li zobrazit výsledek na mapě, potřebujete přístup k mapové službě, jako je Google Mapy.

V níže uvedeném příkladu se vrácená zeměpisná šířka a délka používá k zobrazení polohy v Google Mapa (pomocí statického obrázku):

Příklad

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

Zkus to sám

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

Jak zobrazit interaktivní mapu Google pomocí značky, přiblížení a přetažení.

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>

Informace specifické pro dané místo

Tato stránka ukazuje, jak zobrazit polohu uživatele na mapě.

Geolokace je také velmi užitečná pro informace specifické pro lokalitu, jako jsou:

  • Aktuální místní informace

  • Zobrazení bodů zájmu v blízkosti uživatele

  • Podrobná navigace (GPS)

Metoda getCurrentPosition() - Návratová data

Metoda getCurrentPosition() v případě úspěchu vrací objekt. zeměpisná šířka, vlastnosti zeměpisné délky a přesnosti jsou vždy vráceny. Ostatní vlastnosti jsou vráceny Pokud je k dispozici:

coords.latitude

Zeměpisná šířka jako desetinné číslo (vždy vráceno)

coords.longitude

Zeměpisná délka jako desetinné číslo (vždy vráceno)

coords.accuracy

Přesnost polohy (vždy vrácena)

coords.altitude

Nadmořská výška v metrech nad střední hladinou moře (vrácená, pokud je k dispozici)

coords.altitudeAccuracy

Výšková přesnost polohy (vrácená, pokud je k dispozici)

coords.heading

Směr ve stupních ve směru hodinových ručiček od severu (vráceno, pokud je k dispozici)

coords.speed

Rychlost v metrech za sekundu (vrácena, pokud je k dispozici)

timestamp

Datum/čas odpovědi (vráceno, pokud je k dispozici)

Geolocation Object - Další zajímavé metody

Objekt Geolocation má také další zajímavé metody:

  • watchPosition() - Vrátí aktuální pozici uživatele a pokračuje vrátit aktualizovanou polohu, když se uživatel pohybuje (jako GPS v autě).

  • clearWatch() - Zastaví metodu watchPosition().

Níže uvedený příklad ukazuje metodu watchPosition(). K testování potřebujete přesné zařízení GPS (např chytrý telefon):

Příklad

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

Zkuste to sami →

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