Internet Explorer 9 – Geolokacja  

Autor: Marcin Borecki

Opublikowano: 2010-06-07

Wprowadzenie

Już nie wystarczy, by serwisy internetowe dostosowywały się do naszych preferencji, chcemy również, aby prezentowały treści zgodne z miejscem, gdzie aktualnie przebywamy. Dotychczas, aby uzyskać informacje o miejscu, gdzie znajduje się użytkownik, aplikacje musiały wykorzystywać np. adres IP, nadajniki radiowe sieci komórkowej, sieci WiFi lub urządzenia GPS.

Wraz z pojawieniem się specyfikacji Geolocation API dla przeglądarek internetowych zagadnienie stało się bardziej powszechne i zunifikowane. Najnowsze przeglądarki internetowe, w tym Internet Explorer 9, implementują mechanizm, który w prosty sposób może udostępnić witrynom m.in. wysokość i szerokość geograficzną miejsca, gdzie znajduje się czytelnik.

W tym artykule zostanie przedstawiony mechanizm pozyskiwania danych o położeniu i obsłudze błędów wraz z przykładem prezentującym położenie na mapie BING.

Prywatność

Strona internetowa nie uzyska informacji o naszej lokalizacji, jeżeli nie wyrazimy na to zgody. Podczas pierwszej próby odczytania pozycji przeglądarka Internet Explorer zapyta nas, czy jesteśmy zainteresowani przekazaniem tego typy danych stronie internetowej.

Podstawy

Poniżej przedstawiam najprostsze rozwiązanie pozwalające na uzyskanie koordynatów wskazujących na pozycję użytkownika:

functionpobierz_lokalizacje() {
  navigator.geolocation.getCurrentPosition(przetwarzaj_lokalizacje);
}

Funkcja uruchamia metodę getCurrentPosition, która zaraz po odczytaniu lokalizacji przekaże sterowanie do funkcji przetwarzaj_lokalizacje. Przykładowy kod przedstawiam poniżej:

functionprzetwarzaj_lokalizacje(position) {
varlatitude = position.coords.latitude;
varlongitude = position.coords.longitude;
var accuracy = position.coords.accuracy;

  alert(
                'dokładność pomiaru '
                +  accuracy
                + ' współrzędne: ' +  latitude + ' - ' + longitude
             ); 
}

Pozostałe właściwości, jakie mogły być wykorzystane w powyższym przykładzie przy użyciu obiektu position:

* tylko te właściwości są zawsze wypełniane przez przeglądarkę internetową, pozostałe są opcjonalne.

Obsługa błędów

Pobieranie lokalizacji jest skomplikowanym procesem, podczas którego może wystąpić wiele problemów. Poniżej znajduje się funkcja, która może zareagować na typowe problemy:

function onError(geoPositionError) {

        switch (geoPositionError.code) {
            case 0: // UNKNOWN_ERROR
                alert('Nieznany błąd');
                break;
            case 1: // PERMISSION_DENIED
                alert('Brak zgody na pobranie lokalizacji.');
                break;
            case 2: // POSITION_UNAVAILABLE
                alert('Nie można ustalić lokalizacji.');
                break;
            case 3: // TIMEOUT
                alert('Przekroczono czas oczekiwania na ustalenie lokalizacji.');
                break;
            default:
        }
    }

Funkcję podpinamy do wywołania getCurrentPosition w następujący sposób:

navigator.geolocation.getCurrentPosition(przetwarzaj_lokalizacje, onError);

Dokładność

Podczas wywołania metody odpowiedzialnej za ustalenie pozycji użytkownika serwisu możemy też wybrać, z jaką dokładnością ma się odbyć pomiar. Parametr ma znaczenie wtedy, gdy urządzenie, na którym zainstalowana jest przeglądarka internetowa, wspiera więcej niż jeden sposób ustalania pozycji, np. telefon, który może ustalić lokalizację na podstawie GPS (dokładny pomiar) oraz na podstawie sieci bazowych operatora (mało dokładny pomiar).

Opcja, jaką wybierzemy, nie tylko odzwierciedla dokładność odczytu, ale również wpływa na zużycie prądu oraz czas potrzebny do ustalenia położenia.

Zastosowanie opcji w kodzie wygląda następująco:

navigator.geolocation.getCurrentPosition(
przetwarzaj_lokalizacje, onError, { enableHighAccuracy: true});

Prezentacja na mapie

Poniżej zaprezentuję kod strony internetowej, która zaprezentuje na mapie Bing pozycję użytkownika.

Kod zawiera komentarze, które powinny wyjaśnić wszelkie zawiłości rozwiązania:

<!DOCTYPEHTMLPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />
<scripttype="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<scripttype="text/javascript">
var map = null;
    function GetLocalization() {
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: "KLUCZ_PROGRAMISTYCZNY_DO_BING",
              zoom: 14
            });

// sprawdzamy czy przeglądarka obsługuje mechanizm
if (navigator.geolocation) {
// Pobieranielokalizacji
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 0, timeout: 30000, enableHighAccuracy: true });
}
else {
window.status = "Lokalizacja nie jest wspierana przez przeglądarkęinternetową.";
        }
    }

functiononSuccess(loc) {

// ustawienie widoku mapy
var lokalizacja = newMicrosoft.Maps.Location(loc.coords.latitude, loc.coords.longitude);
map.setView({ center: lokalizacja });

// ustawienie pinezki
var pinezka = newMicrosoft.Maps.Pushpin(lokalizacja);
map.entities.push(pinezka);

        alert(
'dokładność pomiaru '
                + loc.coords.accuracy
+ ' współrzędne: ' + loc.coords.latitude + ' - ' + loc.coords.longitude
             ); 
    }

    function onError(geoPositionError) {

        switch (geoPositionError.code) {
            case 0: // UNKNOWN_ERROR
                alert('Nieznany błąd');
break;
case 1: // PERMISSION_DENIED
                alert('Użytkownik nie wyraził zgody na udostępnienie lokalizacji');
break;
            case 2: // POSITION_UNAVAILABLE
                alert('Niemożnaustalićlokalizacji.');
                break;
            case 3: // TIMEOUT
alert('Przekroczono czas oczekiwania na ustalenie lokalizacji.');
break;
            default:
        }
    }
</script>
</head>

<bodyonload="GetLocalization();">
<divid='mapDiv' style="position: relative; width: 640px; height: 480px;"></div>
</body>

</html>

Efekt działania:

Podsumowanie

W artykule omówiono specyfikację W3C Geolocation API, która została zaimplementowana między innymi w najnowszej przeglądarce Microsoftu – Internet Explorer 9. Przedstawiono również najważniejsze elementy wraz z przykładem pokazującym na mapie lokalizację wraz z informacją o możliwym błędzie pomiaru.

W tym krótkim omówieniu specyfikacji trudno o bardziej szczegółowy opis wszystkich aspektów Geolocation API, dlatego zachęcam do zapoznania się z specyfikacją na oficjalnej stronie projektu link.