[ Pobierz całość w formacie PDF ]
o lokalizacji: " + error.message);
break;
case 3:
aktualizujStatus("Maksymalny dozwolony czas pobierania danych zosta
przekroczony.");
break;
}
}
Praktyczne dodatki
Są techniki, które nie pasują do pokazywanych przykładów, ale są bardzo przydatne podczas tworzenia aplikacji
w HTML5. Poniżej pokażemy klika prostych, lecz przydatnych technik.
Jaki jest mój status?
Na pewno zauważyłeś już, że znaczna część Geolocation API dotyczy wartości czasowych. To nie powinno
dziwić. Techniki sprawdzające lokalizację triangulacja telefoniczna, GPS, sprawdzanie adresu IP mogą
sprawiać problemy: pobieranie lokalizacji może trwać bardzo długo lub w ogóle się nie zakończyć. Na szczęście
API dostarcza narzędzia pozwalające na zbudowanie paska postępu.
Programista, ustawiając opcję timeout przy sprawdzaniu danych geolokalizacyjnych, zawiadamia
przeglądarkę, że powinna wygenerować błąd, jeżeli operacja przekroczy zadany czas. Podczas sprawdzania
lokalizacji możemy pokazać użytkownikowi informację mówiącą o aktualnym postępie. Wyświetlanie
rozpoczyna się w momencie wysłania żądania pobrania pozycji, natomiast jego zakończenie jest definiowane
przez wartość atrybutu timeout, niezależnie od tego, czy żądanie zakończy się sukcesem.
Na listingu 5.15 uruchamiamy licznik aktualizujący dane na stronie nową wartością oznaczającą postęp
pobierania lokalizacji.
Listing 5.15. Monitorowanie statusu pobierania danych
function updateStatus(message) {
127
Poleć ksi k
Kup ksi k
ROZDZIA 5. WYKORZYSTANIE GEOLOKALIZACJI
document.getElementById("status").innerHTML = message;
}
function endRequest() {
updateStatus("Zako czono.");
}
function updateLocation(position) {
endRequest();
// obsłużenie danych geolokalizacyjnych
}
function handleLocationError(error) {
endRequest();
// obsłużenie błędów
}
navigator.geolocation.getCurrentPosition(updateLocation,
handleLocationError,
{timeout:10000}); // maksymalny czas pobierania 10 sekund
updateStatus("Pobieranie danych geolokalizacyjnych...");
Przyjrzyjmy się poszczególnym częściom. Jak poprzednio, mamy funkcję aktualizującą status na stronie:
function updateStatus(message) {
document.getElementById("status").innerHTML = message;
}
Status podajemy w formie tekstu, jednak w podobny sposób moglibyśmy zbudować bardziej skomplikowaną,
graficzną reprezentację postępu (listing 5.16).
Listing 5.16. Wyświetlenie statusu
navigator.geolocation.getCurrentPosition(updateLocation,
handleLocationError,
{timeout:10000}); // maksymalny czas pobierania 10 sekund
updateStatus("Pobieranie danych geolokalizacyjnych...");
Po raz kolejny wykorzystujemy API geolokalizacji w celu pobrania aktualnej lokalizacji użytkownika,
tym razem ustawiliśmy jednak maksymalny czas dla żądania. Po upływie podanego czasu żądanie zakończy
się sukcesem lub błędem.
Natychmiast po tym wywołaniu aktualizujemy status na stronie, aby poinformować użytkownika, że
pobieranie się rozpoczęło. Po pobraniu lokalizacji lub upływie 10 sekund modyfikujemy status, informując
użytkownika o zakończeniu operacji (listing 5.17).
Listing 5.17. Końcowa aktualizacja statusu
function endRequest() {
updateStatus("Zako czono.");
}
function updateLocation(position) {
endRequest();
// obsłużenie danych geolokalizacyjnych
}
Jest to prosty skrypt, łatwo go jednak rozbudować.
128
Poleć ksi k
Kup ksi k
ROZDZIA 5. WYKORZYSTANIE GEOLOKALIZACJI
Ta metoda jest wygodna w przypadku jednorazowego pobierania lokalizacji. Wtedy programista dokładnie
wie, kiedy rozpoczyna się pobieranie oczywiście w momencie uruchomienia funkcji getCurrentPosition().
W przypadku ciągłej aktualizacji lokalizacji (funkcja watchPosition()) programista nie ma kontroli nad tym,
kiedy rozpoczyna się pobieranie.
Co więcej, czas jest liczony dopiero od momentu udzielenia przez użytkownika zgody na pobieranie.
Implementowanie aktualizacji statusu w przypadku ciągłej aktualizacji jest niepraktyczne, ponieważ strona
nie jest informowana o momencie, w którym użytkownik udzielił pozwolenia.
Pokaż mnie na mapie
Częstym zadaniem przy korzystaniu z geolokalizacji jest pokazanie lokalizacji użytkownika na mapie na
przykład podczas korzystania z popularnej usługi Mapy Google. Jest to tak popularne, że Google wbudowało
możliwości geolokalizacji w swój produkt. Wystarczy nacisnąć przycisk Pokaż moją lokalizację (rysunek 5.6);
po jego kliknięciu wykorzystane zostanie Geolocation API (jeżeli będzie dostępne) do pobrania i wyświetlenia
lokalizacji na mapie.
Rysunek 5.6. Mapy Google i pobieranie aktualnej lokalizacji
Możliwe jest także samodzielne wykonanie takiej operacji. Google Maps API zostało zaprojektowane tak,
aby pobierać szerokość i długość geograficzną w formie liczb zmiennoprzecinkowych (i nie jest to zbieg
okoliczności). W łatwy sposób możesz więc przekazać pobrane wartości do API (listing 5.18). Więcej na ten
temat dowiesz się z książki Beginning Google Maps Applications (Apress, 2010, wydanie drugie).
Listing 5.18. Przekazanie lokalizacji do Google Maps API
// Załączenie biblioteki Google Maps
// Utworzenie mapy&
var map = new google.maps.Map(document.getElementById("map"));
function updateLocation(position) {
// przekazanie współrzędnych do Google Maps API
map.setCenter(new google.maps.LatLng(
parseFloat(position.coords.latitude),
parseFloat(position.coords.longitude));
129
Poleć ksi k
Kup ksi k
ROZDZIA 5. WYKORZYSTANIE GEOLOKALIZACJI
}
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);
Podsumowanie
W tym rozdziale omówiliśmy geolokalizację. Dowiedziałeś się, z czego składają się dane geolokalizacyjne
(szerokość, długość i inne atrybuty) oraz z jakich zródeł mogą pochodzić. Dyskutowaliśmy także na temat
problemów z prywatnością związanych z geolokalizacją. Pokazaliśmy również, jak, używając API, tworzyć
aplikacje wykorzystujące informacje o lokalizacji użytkownika.
W następnym rozdziale pokażemy, w jaki sposób HTML5 pozwala na komunikację pomiędzy zakładkami
i oknami, a także pomiędzy stronami i serwerami działającymi w różnych domenach.
130
Poleć ksi k
Kup ksi k
Skorowidz
currentTime, atrybut, 97
A
duration, atrybut, 97
AAC, 90 Ended, atrybut, 97
accuracy, atrybut, 116 Error, atrybut, 97
addColorStop(), 54 loop, atrybut, 97
addEventListener(), 36 muted, atrybut, 97
Adobe Illustrator, 87 paused, atrybut, 97
alert(), 35 src, atrybut, 95
altitude, atrybut, 116 startTime, atrybut, 97
altitudeAccuracy, atrybut, 116 volume, atrybut, 97
animacje, 68, 69, 70 autobuffer, atrybut, 97
aplikacje lokalne, 261, 263, 266 autocomplete, atrybut, 183
praca w trybie offline, 264 autofocus, atrybut, 183
wsparcie przez przeglądarki, 263 autoplay, atrybut, 96, 97
arc(), 52 avi, 89
arcTo(), 52
ARIA, 23
B
article, element, 26, 27
aside, element, 26, 27
baza indeksowana, Patrz Indexed Database
Asyncore, 157
bąbelkowanie zdarzeń, 200
asyncore.dispatcher_with_send, 157
beginPath(), 44, 45, 47
audio
bezierCurveTo(), 52
kodeki, 90
bezpieczeństwo, 22
restrykcje, 91
pochodzenia, 133
w tle strony, 106
biblioteki
wsparcie przez przeglądarki, 91, 92
excanvas.js, 218
[ Pobierz całość w formacie PDF ]