Podstawy korzystania z API Google Maps
Transkrypt
Podstawy korzystania z API Google Maps
Laboratorium Systemów Informacji Przestrzennej Internetowy System Informacji Przestrzennej na przykładzie Google Maps 1. Podstawy korzystania z Google Maps API Firma Google udostępnia interfejs programowania internetowych aplikacji wykorzystujących biblioteki Google Maps. Pozwala to na tworzenie własnych implementacji elementów Google Maps w języku JavaScript, jak również rozszerzanie istniejących funkcjonalności o nowe elementy. Z podanego przez prowadzącego adresu należy pobrać plik map-simple.html i zapisać na dysku, a następnie otworzyć np. w Notatniku. Najważniejszym jego elementem jest funkcja initialize(), która odpowiada za wygląd mapy oraz tworzenie elementów interfejsu użytkownika. Na razie zawiera ona niezbędne elementy pozwalające na inicjalizację mapy. Struktura myOptions zawiera początkowe ustawienie widoku mapy za pomocą pól zoom o wartości 8 oraz center o wartości new google.maps.LatLng(-34.397, 150.644), co powoduje wycentrowanie utworzonej mapy na punkcie o podanych współrzędnych geograficznych oraz odpowiednio przybliża obraz (w tym wypadku jest to ósmy poziom przybliżenia obrazu). Zmienna disableDefaultUI powoduje wyłączenie domyślnych kontrolek mapy. Na początek zmienimy punkt, na który wskazywać będzie mapa. W tym celu należy wejść na http://maps.google.com, odnaleźć na mapie nowy budynek ETI i kliknąć go. Z wyskakującego okienka należy skopiować współrzędne geograficzne. Na tej podstawie należy zmienić wartość google.maps.LatLng(-34.397, 150.644) tak, by nasza strona pokazywała nowy budynek ETI. Następnie należy przyjrzeć się efektom zastosowania różnych wartości pola zoom obiektu myOptions. Następnym etapem będzie dodanie do mapy kontrolek pozwalających na przybliżanie/oddalanie i obracanie widoku. Służą do tego pola obiektu myOptions: zoomControl oraz rotateControl. Ich wartościami mogą być wartości logiczne true albo false. Należy przetestować efekty dodania do mapy każdej kontrolki z osobna, jak również kilku naraz. Przybliżanie i oddalanie widoku można również zrealizować przy użyciu kółka myszki, do czego służy pole scrollwheel. Innymi przydatnymi kontrolkami są: scaleControl, wyświetlająca aktualną skalę mapy, mapTypeControl, pozwalająca zmienić typ wyświetlanej mapy, streetViewControl, pozwalająca przełączyć się w tryb Street View. Należy zaobserwować wyniki dodania wymienionych kontrolek do mapy. Na zakończenie ćwiczenia należy stworzyć prosty skrypt przechwytywania wartości współrzędnych geograficznych z Google Maps. W tym celu należy w ciele dokumentu HTML stworzyć dwa obiekty typu input , o identyfikatorach odpowiednio „lonbox” i „latbox”. Następnie należy przechwycić wydarzenie kliknięcia na mapę przy pomocy metody google.maps.event.addListener(map, 'click', grab). Metoda ta powoduje zarejestrowanie funkcji „grab” jako obiektu reagującego na wystąpienie zdarzenia kliknięcia ('click') na obszar mapy. Następnie należy stworzyć function grab(event) i w jej ciele przypisać do obiektów lonbox i latbox odpowiednio wartości event.latLng.lat() oraz event.latLng.lng() (można wykorzystać metodę document.getElementById('..').value). Aby zwiększyć precyzję zaznaczania punktów w Google Maps, można zmienić kształt domyślnego kursora. Wygląd kursorów definiuje się jako wartości pól draggableCursor oraz draggingCursor w obiekcie myOptions. Przykładowo, var myOptions = { draggableCursor: 'crosshair' } spowoduje zmianę domyślnego kursora („rączki”) na krzyżyk. Inne dostępne kursory to m.in. 'pointer', 'move' i 'default'. 2. Podstawy opisu obiektów geograficznych przy pomocy Keyhole Markup Language. Keyhole Markup Language jest językiem opisu obiektów przestrzennych opartym na XML. Do jego najważniejszych znaczników należą: Document – jest to kontener dla obiektów i stylów. Wymagany, jeżeli stosujemy współdzielone style. Placemark – obiekt skojarzony z konkretnym kształtem geometrycznym. Jeden z niewielu obiektów, na które użytkownik może klikać. Polygon – trójwymiarowy obiekt opisywany przez dwa zamknięte kształty typu LinearRing, tworzące jego obrys zewnętrzny (OuterBoundary) oraz wewnętrzny (InnerBoundary). Każdy z nich składa się z zestawu wierzchołków opisanych współrzędnymi longitude, latitude oraz altitude (wysokość n.p.m.). LineString – trójwymiarowy obiekt odwzorowujący polilinię. Przykładowy plik KML z zaznaczonymi obiektami znajduje http://maverick.eti.pg.gda.pl:8080/googlemaps/Placemark_example.kml. się na stronie: Ponieważ Google Maps wymaga zamieszczania plików KML na serwerach www, kolejne etapy ćwiczenia będą wymagały zapisywania w osobnych plikach KML. Każdy plik powinien mieć nazwę postaci inicjały_indeks_zadanie.kml. Przykład: Dla pierwszego zadania Jan Kowalski o numerze indeksu 12345 powinien stworzyć plik o nazwie jk_12345_1.kml Przygotowany plik KML należy wysłać http://maverick.eti.pg.gda.pl:8080/googlemaps/index.htm na serwer pod adresem Rysunek 1. Formularz do wysyłania plików KML Po poprawnym załadowaniu pliku otrzymamy następujący komunikat: Zawartość powyższego łącza należy skopiować i dodać do utworzonej w punkcie pierwszym ćwiczenia mapy. W tym celu należy wykorzystać metody var kmllayer = new google.maps.KmlLayer('zawartość_łącza') oraz kmllayer.setMap(map). W przypadku dokonywania późniejszych zmian w pliku KML istnieje konieczność ponownego załadowania pliku oraz zmiany wartości adresu www w celu obejścia mechanizmu cache API Google. Aby uniknąć konieczności takich zmian, można w adresie pliku KML dodać zmienną losową, np. w postaci „http://adrespliku.kml?x="+Math.random();” 3. Geokodowanie Mapy Google udostępniają usługę konwersji współrzędnych geograficznych na adresy za pomocą klasy google.maps.Geocoder. Na terenie Polski ogranicza się ona zwykle do kodów pocztowych oraz nazw miast. W edytowanym pliku HTML przed funkcją initialize należy utworzyć nowy obiekt geocoder podanej wyżej klasy oraz nowy obiekt infowindow klasy google.maps.InfoWindow(). Następnie w ciele dokumentu HTML należy za pomocą znacznika input typu button utworzyć przycisk o atrybucie onclick do którego przypisana będzie funkcja codeLatLng(). Następnie należy utworzyć funkcję codeLatLng() w której (analogicznie jak w przypadku przypisywania wartości) należy odczytać wartość obiektów latbox oraz lonbox i na ich podstawie utworzyć nowy obiekt klasy google.maps.LatLng. Następnie w ciele tej funkcji należy wywołać metodę geocode obiektu geocoder w następujący sposób: geocoder.geocode({'latLng': latlng}, function(results, status) { var marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); }); ZADANIA DO WYKONANIA 1. Zbudowanie zgodnie z instrukcją strony internetowej pozwalającej na przechwytywanie współrzędnych za pomocą API Google Maps. 1.0 pkt. 2. Wyświetlenie na stronie pliku w formacie KML przedstawiającego 5 obiektów najbliższych miejscu zamieszkania (np. przystanki, kluby, kawiarnie). Obiektom tym należy przyporządkować krótkie opisy. Do zaznaczenia punktów należy wykorzystać znaczniki KML typu „Placemark”. 1,0 pkt. 3. Przygotowanie polilinii (przynajmniej 5 segmentów) od miejsca zamieszkania do Politechniki. Osoby mieszkające w akademikach zaznaczają orientacyjną trasę drogową/kolejową ze swojej rodzinnej miejscowości. Jako przykład można wykorzystać http://maverick.eti.pg.gda.pl:8080/googlemaps/Polyline_example.kml. 1,0 pkt. 4. Obrysowanie wybranego budynku Politechniki Gdańskiej przy pomocy znacznika KML typu Polygon. Jako przykład można wykorzystać http://maverick.eti.pg.gda.pl:8080/googlemaps/Polygon_example.kml. 1,0 pkt. 5. Zaprezentowanie mechanizmu odwrotnego geokodowania na obszarze Polski. 1,0 pkt.