Narzędzia Informatyki
GoogleMaps + XML
GoogleMaps
Google stworzyło API, umożliwiające wstawienie własnej mapy na dowolną stronę internetową. Dostęp do API odbywa się z poziomu języka JavaScript, ActionScript 3 (Google Maps API for Flash®). Do korzystania z Google Maps API wymagany jest bezpłatny klucz, który może uzyskać każdy użytkownik konta Google. Klucz pozwala na dostęp z jednej domeny lub katalogu domeny. Google Maps API umożliwia zintegrowanie ze stroną internetową w pełni funkcjonalnej mapy, z własnymi danymi i funkcjami do obsługi zdarzeń. Usługa jest darmowa, jednak zawiera reklamy.
API może być używane bez opłat zarówno w celach domowych, jak i zastosowaniach komercyjnych.
Najprostszy przykład strony można znaleźć
Na początku należy otrzymać klucz dostępu do API
Następnie przeklejając przykład z pierwszego linku do nowo utworzonego pliku o rozszerzeniu .html powinniśmy zobaczyć mapę z markerem.
Żeby zdefiniować mapę potrzebujemy określić przybliżenie i środek mapy. Żeby wstawić marker na mapę potrzebujemy zdefiniować jego koordynaty Szerokość i długość geograficzną i
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}W przypadku, gdy popełnimy jakiś błąd możemy podejrzeć w przeglądarce Chrome za pomocą opcji Inspect, czy nasz kod nie genneruje błędów
W zakładce Console znajdziemy listę błędów kompilacji, na przykładzie literówka w nazwie zmiennej zamiast uluru jest ulurud, które nie jest zdefiniowane.
Żeby poznać koordynaty danego punktu możemy na stronie Google maps znaleźć daną lokalizacje a następnie klikając prawym przyciskiem myszy wybrać opcję "co tu jest?". Na dole strony pojawią się współrzędne.
Przykład tworzenia legendy do mapy można znaleźć tutaj:
Obsługa okna z informacjami po kliknięciu na marker
Różne typy markerów
Piny można wziąć z dostępnych przez googla repozytoriów online:
XML
Uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób. Jest niezależny od platformy, co umożliwia łatwą wymianę dokumentów pomiędzy heterogenicznymi (różnymi) systemami i znacząco przyczyniło się do popularności tego języka w dobie Internetu.
O budowie pliku XML można przeczytać tutaj:
Przykład:
<main>
<center lat="51.75341219129575" lng="-1.2543237474441938"/>
<category name="Żabki" color="FF0000">
<marker lat="51.7514758" lng="-1.239976" html="Zabka na ulicy X otwarta Y-X" />
<marker lat="51.757357" lng="-1.244820" html="Zabka na ulicy X otwarta Y-X" />
</category>
<category name="Koscioly" color="FFDE00">
<marker lat="51.748211" lng="-1.243564" html="Kosciol A" />
<marker lat="51.765557" lng="-1.260713" html="Kosciol B" />
</category>
</main>Zadanie Domowe (20pkt)
Stwórz mapę dowolnego Polskiego miasta na której oznaczysz różne elementy / miejsca / budynki w mieście.
Chcemy mieć co najmniej 3 kategorie, każda po 3 elementy (kategorie np szpitalie, kościoły, sklepy, itp.).
Każda kategoria powinna na mapie być oznaczona innym kolorem lub typem Pinu. Po kliknięciu na Pin powinno się pokazywać okienko informacyjne z dodatkowymi informacjami o danym miejscu.
Mapa ma posiadać legendę z opisem kategorii.
Na legendzie powinniśmy móc wybierać czy dana kategoria ma być widoczna na mapie, czy też nie.
Tu przykład (można podejrzeć źródło strony):
W drugiej kolejności należy zapisać informacje o danych do wyświetlenia w pliku XML i stamtąd je odczytywać.
Odczytywanie elementów XML przy pomocy tzw. parsera DOM:
Można skorzystać z zaproponowanego wyżej schematu XML.
Przykład fragmentu kodu odczytywania danych o kategoriach:
....
var x=xmlDoc.getElementsByTagName("category");
for (i=0;i<x.length;i++)
{
var college = x[i].getAttribute("name");
var color = x[i].getAttribute("color");
.....UWAGA!! Zadanie wykonujemy przez kolejne 3 zajęcia.
Wykonany plik html i plik xml proszę przesłać przez stronę:
Termin wykonania zadania: Czwartek 18.05.2017 do godziny 24.00.
- *
Wykorzystano materiały z: