docZaawansowane aplikacje internetowe
download 
Reklamacja Transkrypt
Zaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe
Bryk Jarosław, Drzewiński Rafał, Mieczkowski Patryk, Worobiew Rafał, Pich Kamil
AJAX 2
Celem tego laboratorium jest przybliżenie jednego z najbardziej znanych zastosowań technologii
AJAX - Google Maps. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, wyświetlająca mapę
pewnego obszaru, a następnie mapa ta zostanie wzbogacona o pewne interaktywne elementy.
Do opracowania ćwiczeń wystarczy dowolny edytor tekstowy (znacznym ułatwieniem jest
kolorowanie składni języka HTML, ale nie jest to wymagane). Powstające w trakcie ćwiczeń pliki
można umieszczać w dowolnym katalogu na dysku twardym komputera osobistego lub serwera i
otwierać przy pomocy prawie dowolnej przeglądarki graficznej (ograniczenia wynikają głównie z
braku, lub słabego wsparcia danej przeglądarki dla technologii AJAX).
Ważne jest też, aby w trakcie wykonywania ćwiczeń mieć dostęp do zasobów Google Maps (mieć
aktywne połączenie z Internetem). Posiadać konto w serwisie Google. Jest ono niezbędne do
wygenerowania klucza do obsługi najnowszych map. Niektóre przeglądarki mogą wymagać od
użytkownika potwierdzenia, iż użytkownik świadomie otwiera strony z aktywną zawartością.
Należy zapoznać się z materiałami na stronie:
https://developers.google.com/maps/documentation/javascript/
Aby znaleźć poprawne współrzędne dowolnego miejsca na mapie Google zalecamy korzystanie ze
strony: http://www.latlong.net/
I.
Przygotowanie do ćwiczenia
Pierwszym krokiem przygotowującym do tego ćwiczenia jest wybór projektu jaki będziemy chcieli
wykonać. Korzystamy ze strony:
https://console.developers.google.com/flows/enableapi?apiid=maps_backend&keyType=CLIENT_SID
E&reusekey=true
1.
Wybieramy „Create a new project” i klikamy guzik „continue”
2.
Kolejnym krokiem jest stworzenie API key dla przeglądarki. Nadajemy nazwę klucza w
polu „Name”. Na potrzeby ćwiczenia prosimy o wpisanie „WMIIZAI” na koniec klikamy guzik
„create”.
3.
Pojawi się pole z wygenerowanym kluczem.
4.
Przechodzimy do zakładki „Overview” zaznaczonej poniżej kolorem ciemnoszarym.
W grupie Google Maps APIs wybieramy „Google Maps JavaScript API”. W dalszym kroku klikamy
„Enable API”.
Dzięki tym wszystkim krokom mamy przygotowane narzędzie do pracy z Google Maps.
II.
Ćwiczenie 1
W tym ćwiczeniu zostanie przedstawiony prosty kod strony w języku HTML, wyświetlający mapę
centrum Warszawy. Rozmiar i skala mapy są to określone przez użytkownika. Poniższy kod należy
umieścić w pliku o nazwie index z rozszerzeniem .html. Prosimy zwrócić uwagę na kod i wkleić w
miejsce „API_KEY” wcześniej wygenerowany kod API key.
<!DOCTYPE html>
<html>
<head>
<title>Cwiczenie 1</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body { height: 800px; margin: 0; width: 580px; padding: 0;}
#map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() { map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.2282400, lng: 21.0080857},
zoom: 14
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async
defer>
</script>
</body>
</html>
Po zapisaniu można otworzyć dokument w przeglądarce internetowej
III.
Ćwiczenie 2
W tym ćwiczeniu na mapie zostanie dodana linia ciągła między dwoma punktami. Wybraliśmy
Politechnikę Warszawską oraz Bibliotekę Uniwersytecką w Warszawie.
W tym celu należy w pliku index.html w funkcji initMap() wkleić następujący kod:
var drogaPWBU = [
{lat: 52.2212012, lng: 21.0080857},
{lat: 52.2426470, lng: 21.0248865},
];
var wayPath = new google.maps.Polyline({
path: drogaPWBU,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
wayPath.setMap(map);
Po zapisaniu można odświeżyć stronę w przeglądarce internetowej i zaobserwować efekt.
IV.
Ćwiczenie 3
W tym ćwiczeniu na mapie zostaną oznaczone trzy interesujące obiekty znajdujące się w pobliżu
dodanej linii, w tym przypadku centrum handlowe Złote Tarasy, Pałac Kultury i Nauki oraz Ogród
Saski.
W tym celu należy dodać, pod kodem dodającym linię, następujący kod:
var marker = new google.maps.Marker({
position: {lat: 52.2297084, lng: 21.0026871},
map: map,
title: 'Złote Tarasy'
});
var marker2 = new google.maps.Marker({
position: {lat: 52.2317554, lng: 21.0061516},
map: map,
title: 'PKiN'
});
var marker3 = new google.maps.Marker({
position: {lat: 52.2405361, lng: 21.0085408},
map: map,
title:
'Ogród
});
Saski'
Po zapisaniu można odświeżyć stronę w przeglądarce internetowej i zaobserwować efekt.
V.
Ćwiczenie 4
Korzystając z właściwości Google Maps API należy:
•
•
•
Dodać na powstałej mapie logo interesującej firmy w miejscu, w którym znajduje się jej
siedziba oraz sprawić, żeby przy załadowaniu mapy spadło w odpowiednie miejsce.
Dodać animację do dla znacznika z logiem firmy tak, aby po kliknięciu podskakiwało, a po
ponownym kliknięciu pozostawało stateczne.
Sprawić, aby jeden z punktów oznaczonych mógł być przesunięty w dowolne miejsce na
mapie
