Rychlý tip:Detekce vaší polohy pomocí JavaScriptu

Většina moderních zařízení je schopna detekovat svou vlastní polohu buď pomocí GPS, WiFi nebo IP geolokace. Vývojáři mohou tyto informace využít k poskytování lepších návrhů vyhledávání, umístění obchodů v okolí a implementaci všech druhů užitečných mapových interakcí do svých aplikací a webových stránek.

V níže uvedeném článku se podíváme na snadný, čistě JavaScriptový způsob, jak získat přístup k místu pobytu zařízení, aniž bychom se spoléhali na jakékoli externí závislosti nebo služby třetích stran. Začněme!

Zdroje polohy

JavaScript nabízí jednoduchý, ale výkonný nástroj pro lokalizaci zařízení v podobě Geolocation API. Skládá se z malé sady snadno použitelných metod, které mohou získat polohu zařízení prostřednictvím všech tří výše uvedených služeb:

  • GPS – primárně na mobilních zařízeních, velmi přesné až na 10 metrů.
  • WiFi – dostupné na většině zařízení připojených k internetu, také velmi přesné.
  • Geolokace IP – omezená na region a často nespolehlivá, používá se jako nejhorší scénář, když ostatní dva selžou.

Když jsou požadována geografická data, prohlížeč se pokusí použít všechny tři výše uvedené možnosti v závislosti na tom, co je k dispozici. Obvykle se používají výsledky ze zdroje WiFi, protože je rychlejší než GPS a mnohem přesnější než geolokace IP.

Použití Geolocation API

Geolocation API má téměř plnou podporu pro různé prohlížeče, ale abychom se ujistili, že je přístupné našim uživatelům, je dobré, než cokoli udělat, zkontrolovat, zda geolocation objekt existuje v Window.navigator rozhraní.

if (navigator.geolocation) {
  // geolocation is available
} 
else {
  // geolocation is not supported
}

Uvnitř navigator.geolocation objektu jsou umístěny všechny metody pro API:

  • Geolocation.getCurrentPosition() – Určuje aktuální polohu zařízení.
  • Geolocation.watchPosition() - Naslouchá změnám v umístění a vyvolává zpětné volání při každém pohybu.
  • Geolocation.clearWatch() - Odebere watchPosition obsluha události.

getCurrentPosition() a watchPosition() metody se používají téměř stejným způsobem. Oba pracují asynchronně, snaží se získat polohu zařízení a v závislosti na výsledku pokusu zavolají zpětné volání o úspěchu nebo zpětné volání chyby, pokud je k dispozici.

navigator.geolocation.getCurrentPosition(

    // Success callback
    function(position) {

        /*
        position is an object containing various information about
        the acquired device location:

        position = {
            coords: {
                latitude - Geographical latitude in decimal degrees.
                longitude - Geographical longitude in decimal degrees. 
                altitude - Height in meters relative to sea level.
                accuracy - Possible error margin for the coordinates in meters. 
                altitudeAccuracy - Possible error margin for the altitude in meters. 
                heading - The direction of the device in degrees relative to north. 
                speed - The velocity of the device in meters per second.
            }
            timestamp - The time at which the location was retrieved.
        }
        */

    },

    // Optional error callback
    function(error){

        /* 
        In the error object is stored the reason for the failed attempt:

        error = {
            code - Error code representing the type of error 
                    1 - PERMISSION_DENIED
                    2 - POSITION_UNAVAILABLE
                    3 - TIMEOUT

            message - Details about the error in human-readable format.
        }
        */

    }
);

Jak vidíte, použití Geolocation API je docela jednoduché. Musíme zavolat správnou metodu, počkat, až vrátí souřadnice, a pak si s nimi dělat, co chceme.

Oprávnění uživatele

Vzhledem k tomu, že Geolocation API odhaluje hluboce osobní informace, když se k nim aplikace pokusí poprvé získat přístup, zobrazí se dialogové okno s žádostí o povolení. To zajišťuje, že uživatelé nebudou mít svá soukromá data odhalena, pokud to výslovně nepovolí.

O zobrazení dialogu se obvykle stará prohlížeč, ale o povolení může programově požádat i vývojář. To je někdy nutné, protože jednou zamítnutý původní dialog vygenerovaný prohlížečem se podruhé nezobrazí.

Zabezpečení hostitelé

Dalším ochranným opatřením je použití připojení HTTPS. Kvůli novým zásadám zabezpečení webu již Google Chrome (verze pro stolní počítače i mobilní zařízení) neumožňuje nezabezpečeným hostitelům spouštět Geolocation API. Místo toho jsou vývojáři, kteří chtějí tuto funkci používat, povinni poskytovat své aplikace přes HTTPS, čímž se minimalizuje riziko odcizení nebo zneužití dat.

Další informace o tomto problému si můžete přečíst v tomto příspěvku na blogu Google Developers.

Ukázková aplikace

Abychom demonstrovali, jak celý proces funguje, vytvořili jsme příliš zjednodušenou aplikaci, která předvádí některé možnosti rozhraní API. Skládá se z tlačítka, které po stisknutí zachytí souřadnice zařízení a předá je tomuto pluginu GMaps, čímž určí polohu na mapě.

findMeButton.on('click', function(){

    navigator.geolocation.getCurrentPosition(function(position) {

        // Get the coordinates of the current position.
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        // Create a new map and place a marker at the device location.
        var map = new GMaps({
            el: '#map',
            lat: lat,
            lng: lng
        });

        map.addMarker({
            lat: lat,
            lng: lng
        });

    });

});

Demo i celý kód jsou k dispozici na JSFiddle:

Závěr

Gelocation API je spolehlivé a připravené na produkci, takže vám doporučujeme, abyste si s ním pohráli a zjistili, čeho je schopno. Pokud jste na webu viděli nějaké originální využití této technologie nebo jste sami vytvořili skvělý projekt, můžete se o něj podělit v sekci komentářů níže – rádi to uvidíme!