1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 1, średnia ocena: 5,00)
Loading...Loading...

Kompletny realny przykład

W rozdziale:

Kompletny realny przykład

W tej części rozdziału przedstawiam przykład użycia skryptu geoPosition.js do sprawdzenia pozycji użytkownika i wyświetlenia mapy jego najbliższego otoczenia:

Jak to działa? Zobaczmy. Podczas wczytywania strony wywoływana jest metoda geoPosition.init() w celu sprawdzenia, czy dostępny jest którykolwiek interfejs geolokalizacji obsługiwany przez geoPosition.js. Jeśli tak, to wyświetlany jest odnośnik pozwalający użytkownikowi sprawdzić swoje położenie. Kliknięcie tego łącza powoduje wywołanie funkcji lookup_location():

function lookup_location() {
  geoPosition.getCurrentPosition(show_map, show_map_error);
}

Gdy wyrazisz zgodę na śledzenie swojego miejsca pobytu i usługom uda się określić twoje położenie, skrypt geoPosition.js wywoła pierwszą funkcję zwrotną (show_map()) z argumentem loc. Obiekt loc ma własność coords zawierającą szerokość geograficzną, długość geograficzną oraz informację o dokładności pomiaru. (W tym przykładzie informacja o dokładności nie jest wykorzystywana.) Dalej w funkcji show_map() znajduje się kod wyświetlający mapę przy użyciu API Map Google.

function show_map(loc) {
  $("#geo-wrapper").css({'width':'320px','height':'350px'});
  var map = new GMap2(document.getElementById("geo-wrapper"));
  var center = new GLatLng(loc.coords.latitude, loc.coords.longitude);
  map.setCenter(center, 14);
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.addOverlay(new GMarker(center, {draggable: false, title: "Jesteś tutaj (tak mniej więcej)"}));
}

Jeśli skrypt geoPosition.js nie może określić położenia użytkownika, wywołuje drugą funkcję zwrotną, o nazwie show_map_error().

function show_map_error() {
  $("#live-geolocation").html('Nie można określić twojego położenia.');
}

Lektura uzupełniająca

Dodaj komentarz









Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!