Prosty licznik podróży korzystający z interfejsu Geolocation API

Michael Mahemoff

Wprowadzenie

Interfejs Geolocation API pozwala ustalić, gdzie znajduje się użytkownik, i śledzić jego ruchy, zawsze za jego zgodą. Ta funkcja może być używana w ramach zapytań użytkowników, np. do wskazywania miejsca docelowego. Może ona też służyć do „geotagowania” niektórych treści utworzonych przez użytkownika, np. do oznaczenia miejsca, w którym zostało zrobione zdjęcie. Interfejs API jest niezależny od urządzenia; nie ma znaczenia, jak przeglądarka określa lokalizację, o ile tylko klienci mogą żądać i otrzymywać dane o lokalizacji w standardowy sposób. Mechanizm ten może polegać na użyciu GPS-a, Wi-Fi lub prośbie o ręczne podanie lokalizacji przez użytkownika. Ponieważ każde z tych wyszukiwań zajmuje trochę czasu, interfejs API jest asynchroniczny; przekazujesz mu metodę wywołania zwrotnego za każdym razem, gdy wysyłasz żądanie lokalizacji.

W tym przykładzie licznik podróży pokazuje początkową lokalizację i utrzymuje wyświetlanie odległości przebytej od załadowania strony.

Krok 1. Sprawdzanie zgodności

Zgodność możesz łatwo sprawdzić, testując obecność obiektu geolokalizacji:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Krok 2. Zadeklaruj HTML licznika przebytych kilometrów

W tym przykładzie tworzysz licznik przejazdu, więc zadeklaruj ten kod HTML:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

W kolejnych krokach użyjemy interfejsu Geolocation API do wypełnienia wszystkich pustych zakresów.

Krok 3. Określanie bieżącej lokalizacji użytkownika

getCurrentPosition() będzie asynchronicznie przekazywać informacje o bieżącej lokalizacji użytkownika. Wywołaj go zaraz po załadowaniu strony, aby prawidłowo wypełnić i zapisz na później pozycję początkową:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Jeśli aplikacja w tej domenie po raz pierwszy poprosi o uprawnienia, przeglądarka zazwyczaj poprosi o zgodę użytkownika. W zależności od przeglądarki możesz też mieć ustawienia, które pozwalają zawsze zezwalać lub nie zezwalać na wyszukiwanie uprawnień. W takim przypadku proces potwierdzenia zostanie pominięty.

Po uruchomieniu tego kodu powinieneś zobaczyć pozycję początkową. W zależności od urządzenia do określania lokalizacji używanego przez przeglądarkę obiekt position może zawierać znacznie więcej niż tylko współrzędne geograficzne, np. wysokość lub kierunek. Aby uzyskać więcej informacji, możesz skonfigurować rejestrowanie zmiennej pozycji w konsoli.

Krok 4. Obsługa błędów

Niestety nie wszystkie wyszukiwania lokalizacji kończą się sukcesem. Być może nie udało się znaleźć urządzenia GPS lub użytkownik nagle wyłączył wyszukiwanie lokalizacji. Drugi, opcjonalny argument funkcji getCurrentPosition() będzie wywoływany w przypadku błędu, aby umożliwić powiadomienie użytkownika w ramach funkcji wywołania zwrotnego:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Krok 5. Monitorowanie lokalizacji użytkownika

Poprzedni wywołanie funkcji getCurrentPosition() zostało wykonane tylko raz, podczas wczytywania strony. Aby śledzić zmiany, użyj watchPosition(). Gdy użytkownik się przemieszcza, funkcja automatycznie powiadomi o tym funkcję wywołania zwrotnego:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Krok 6. Pokaż przebyty dystans

Ten krok nie jest bezpośrednio związany z interfejsem Geolocation API, ale stanowi podsumowanie demonstracji i przykład użycia danych o lokalizacji. Dodaj dodatkową linię do obsługi watchPosition(), aby wypełnić pole „Odległość do pokonania”:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

Funkcja calculateDistance() wykonuje algorytm geometryczny, aby określić odległość między dwoma współrzędnymi. Implementacja JavaScript została zaadaptowana z skryptu udostępnionego przez Moveable Type na licencji Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}