IT TUTORIJALI | jQuery

HTML5 - Geolokacija (Geolocation)

Šta je Geolokacija (Geolocation)?

Funkcija geolokacije HTML5 omogućava vam da saznate geografske koordinate (brojeve geografske širine i dužine) trenutne lokacije posjetitelja vaše web lokacije. Ova je funkcija korisna za pružanje boljeg iskustva posjetitelju web stranice. Na primjer, možete vratiti rezultate pretraživanja koji su fizički blizu lokacije korisnika.

Pronalaženje posjetiteljevih koordinata

Dobijanje podataka o položaju posjetitelja stranice pomoću HTML5 API-ja za geolokaciju prilično je jednostavno. Koristi tri metode koje su spakovane u objekt navigator.geolocation - getCurrentPosition(), watchPosition() i clearWatch(). Sljedi jednostavan primjer geolokacije koja prikazuje vaš trenutni položaj. Ali, prvo se morate složiti da dopustite pretraživaču da web serveru saopšti vašu poziciju.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tačna pozicija</title>
<script>
    function showPosition() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var positionInfo = "Tvoja tačna pozicija je (" 
                + "Dužina: " + position.coords.latitude + ", " + "Dužina: " + position.coords.longitude + ")";
                document.getElementById("result").innerHTML = positionInfo;
            });
        } else {
            alert("Žao nam je, vaš pretraživač ne podržava HTML5 geolokaciju.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Ovdje će se umetnuti podaci o položaju-->
    </div>
    <button type="button" onclick="showPosition();">Prikaži poziciju</button>
</body>
</html>

Napomena!

Web pretraživači neće dijeliti lokaciju posjetitelja s web stranicom osim ako joj posjetitelj izričito ne dozvoli. Standard geolokacije službeno je pravilo za dobijanje korisničkog odobrenja za svaku web lokaciju koja želi podatke o lokaciji.

Suočavanje s greškama i odbacivanjima

Može doći do situacije kada korisnik ne želi podijeliti podatke o svojoj lokaciji s vama. Da biste se nosili s takvim situacijama, možete navesti dvije funkcije kada pozovete funkciju getCurrentLocation(). Prva se funkcija poziva ako je vaš pokušaj geolokacije uspješan, dok se druga funkcija poziva ako vaš pokušaj geolokacije završi neuspjehom. Pogledajmo primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rukovanje greškama geolokacije</title>
<script>
    // Postavljanje globalne varijable
    var result;
    
    function showPosition() {
        // Spremite element tamo gdje stranica prikazuje rezultat
        result = document.getElementById("result");
        
        // Ako je dostupna geolokacija, pokušajte utvrditi položaj posjetitelja
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            result.innerHTML = "Dobijanje informacija o položaju...";
        } else {
            alert("Žao nam je, vaš pretraživač ne podržava HTML5 geolokaciju.");
        }
    };
    
    // Definišite funkciju povratnog poziva za uspješan pokušaj
    function successCallback(position) {
        result.innerHTML = "Vaša trenutna pozicija je (" + "Geografska širina: "
 + position.coords.latitude + ", " + "Geografsa dužina: " + position.coords.longitude + ")";
    }
    
    // Definišite funkciju povratnog poziva za neuspjeli pokušaj
    function errorCallback(error) {
        if(error.code == 1) {
            result.innerHTML = "Odlučili ste da ne dijelite svoju lokaciju. Nećemo vas više pitati.";
        } else if(error.code == 2) {
            result.innerHTML = "Mreža nije aktivna ili se ne može pristupiti usluzi pozicioniranja.";
        } else if(error.code == 3) {
            result.innerHTML = "Pokušaj je istekao prije nego što je mogao dobiti podatke o lokaciji.";
        } else {
            result.innerHTML = "Geolokacija nije uspjela zbog nepoznate greške.";
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Ovdje će se umetnuti podaci o položaju-->
    </div>
    <button type="button" onclick="showPosition();">Prikaži poziciju</button>
</body>
</html>

Prikazivanje lokacija na Google mapi

S podacima o geolokaciji možete raditi vrlo zanimljive stvari, poput prikazivanja lokacije korisnika na Google mapi. Sljedeći će primjer prikazati vašu trenutnu lokaciju na Google mapi na osnovu podataka o geografskoj širini i dužini preuzet putem HTML5 geolokacije.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Korištenje Google Maps</title>
<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }
    
    function showMap(position) {
        // Dohvatite podatke o lokaciji
        var latlong = position.coords.latitude + "," + position.coords.longitude;
        
        // Postavi URL izvora Google mape
        var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="
        +latlong+"&zoom=16&size=400x300&output=embed";
        
        // Stvorite i umetnite Google mapu
        document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
    }
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Prikaži moju poziciju na Google mapi</button>
    <div id="embedMap">
        <!--Ovdje će biti ugrađena Google karta-->
    </div>
</body>
</html>

Gornji primjer jednostavno će prikazati lokaciju na Google mapi koristeći statičnu sliku. Međutim, možete stvoriti i interaktivne Google mape s povlačenjem, uvećavanjem/smanjivanjem i drugim značenjima na koje ste naišli u stvarnom životu. Pogledajmo sljedeći primjer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Korištenje Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
        alert("Žao nam je, vaš pretraživač ne podržava HTML5 geolokaciju.");
    }
}
 
// Definišite funkciju povratnog poziva za uspješan pokušaj
function showMap(position) {
    // Dohvatite podatke o lokaciji
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"Ti si ovdje!" });
}
 
// Definišite funkciju povratnog poziva za neuspjeli pokušaj
function showError(error) {
    if(error.code == 1) {
        result.innerHTML = "Odlučili ste da ne dijelite svoju lokaciju. Nećemo vas više pitati.";
    } else if(error.code == 2) {
        result.innerHTML = "Mreža nije aktivna ili se ne može pristupiti usluzi pozicioniranja.";
    } else if(error.code == 3) {
        result.innerHTML = "Pokušaj je istekao prije nego što je mogao dobiti podatke o lokaciji.";
    } else {
        result.innerHTML = "Geolokacija nije uspjela zbog nepoznate greške.";
    }
}
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Prikaži moju poziciju na Google Map</button>
    <div id="embedMap" style="width: 400px; height: 300px;">
        <!--Google map će biti ugrađeni ovdje-->
    </div>
</body>
</html>

Praćenje kretanja posjetitelja

Svi primjeri koje smo do sada koristili oslanjali su se na metodu getCurrentPosition(). Međutim, objekt geolokacije ima još jednu metodu watchPosition() koja vam omogućuje praćenje kretanja posjetitelja vraćanjem ažurirane pozicije kako se lokacija mijenja. WatchPosition() ima iste ulazne parametre kao getCurrentPosition(). Međutim, watchPosition() može više puta pokrenuti funkciju - kada prvi put dobije lokaciju i opet, kad god otkrije novu poziciju. Pogledajmo kako ovo funkcioniše:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Watching Position</title>
<script>
    // Postavljanje globalne varijable
    var watchID;

    function showPosition() {
        if(navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else {
            alert("Žao nam je, vaš pretraživač ne podržava HTML5 geolokaciju.");
        }
    }

    function successCallback(position) {
        toggleWatchBtn.innerHTML = "Stop Watching";
        
        // Provjerite je li položaj promijenjen prije nego što ste nešto poduzeli
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // Postavi prethodnu lokaciju
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // Postavi trenutnu poziciju
            var positionInfo = "Vaša trenutna pozicija je (" + "Geografsa dužina: " 
            + position.coords.latitude + ", " + "Geografsa šrina: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
            
        }
        
    }

    function startWatch() {
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function() {
            if(watchID) {
                toggleWatchBtn.innerHTML = "Kreni nadgledati";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            } else {
                toggleWatchBtn.innerHTML = "Pribavljanje geolokacije...";
                showPosition();
            }
        }
    }
    
    // Inicirajte čitav sistem (gore)
    window.onload = startWatch;
</script>
</head>
<body>
    <button type="button" id="toggleWatchBtn">Kreni nadgledati</button>
    <div id="result">
        <!--Ovdje će se umetnuti podaci o položaju-->
    </div>   
</body>
</html>