docZaawansowane aplikacje internetowe
download 
Reklamacja Transkrypt
Zaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe
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 Gogle Maps
(mieć aktywne połączenie z Internetem). Niektóre przeglądarki mogą wymagać od
użytkownika potwierdzenia, iż użytkownik świadomie otwiera strony z aktywną
zawartością.
Ćwiczenie 1
W tym ćwiczeniu zostanie przedstawiony prosty kod strony w języku HTML, wyświetlający
mapę pewnego, ściśle określonego obszaru. Rozmiar i skala mapy także są tu dokładnie
określone przez użytkownika.
Należy zapoznać się z materiałami udostępnionymi na stronie:
http://www.google.com/apis/maps/documentation/
Poniższy kod należy umieścić w dowolnym pliku z rozszerzeniem html
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Google Maps JavaScript API Example</title>
<script src=http://maps.google.com/maps/api/js?sensor=false
type="text/javascript"></script>
</head>
<body onload="mapaStart()">
<script type="text/javascript">
var mapa;
function mapaStart()
{
var wspolrzedne = new google.maps.LatLng(52.2212012.21, 21.0080857);
var opcjeMapy = {
zoom = 14,
center = wspolrzedne
};
mapa = new google.maps.Map(document.getElementById(“mapka”), opcjeMapy);
}
</script>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black;
background: gray;">
</div>
</body>
</html>
Po zapisaniu można otworzyć dokument w przeglądarce internetowej
Ćwiczenie 2
W tym ćwiczeniu na mapie zostanie dodana linia ciągła między dwoma interesującymi
punktami, w tym przypadku Politechniką Warszawską a Biblioteką Uniwersytecką w
Warszawie
W tym celu należy w pliku bezpośrednio po funkcji mapaStart() dodać następujący kod:
var polilinie =
[
{ minZoom: 2, maxZoom: 3, kolor: '#ff0000', punkty: [
new google.maps.LatLng(52.2212012,21.0080857),
new google.maps.LatLng(52.2426470,21.0248865)]},
];
for (i = 0; i < polilinie.length; i++)
{
var polilinia = new google.maps.Polyline({ path: polilinie[i].punkty,
strokeColor: polilinie[i].kolor, strokeWeight: 3, map: mapa});
polilinia.maxZoom = polilinie[i].maxZoom;
polilinia.minZoom = polilinie[i].minZoom;
sprawdzanePolilinie.push(polilinia);
}
Po zapisaniu można otworzyć plik w przeglądarce internetowej i zaobserwować efekt
Ć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 w pliku, między funkcją mapaStart() a kodem dodającym linię dodać
następujący kod:
function dodajMarker(opcjeMarkera)
{
opcjeMarkera.map = mapa;
var marker = new google.maps.Marker(opcjeMarkera);
}
dodajMarker({position: new google.maps.LatLng(52.2301084,21.0026871),
title:"Złote Tarasy"});
dodajMarker({position: new google.maps.LatLng(52.2317554,21.0064816),
title:"PKiN"});
dodajMarker({position: new google.maps.LatLng(52.2405361,21.0085408),
title:"Ogród Saski"});
Po zapisaniu można otworzyć plik w przeglądarce internetowej i zaobserwować efekt
Ć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
Chwilę po załadowaniu mapa zacznie się przesuwać tak, aby w jej środku znalazł się
najpierw początek, a później koniec trasy.
