1
JavaScriptJavaScript a APIa API
RNDr. TomRNDr. Tomášáš ŘŘEZNEZNÍÍK, Ph.D.K, Ph.D.
GeoinformaGeoinformaččnníí technologie 2technologie 2 webovwebováá kartografie,kartografie,
podzim 2008podzim 2008
Laboratoř geoinformatiky a kartografie, Masarykova univerzita Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScriptJavaScript
* Teorie viz. přednáška
* PSPad
* Kombinace se známým (X)HTML
* V tomto předmětu pouze skripty vkládané do zdroj. kódu
* Samostatné skripty (.js nebo .jse) součástí AxioMapu
* Potřeba opět webový prohlížeč
* Není validace
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScriptJavaScript
* Skript se píše mezi tagy
* Vkládají se i do , ale i
* Záleží podle účelu
* Syntaxe tagu
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScriptJavaScript vlovložžený do strený do stráánkynky
* Atribut language název skriptovacího jazyka
* Atribut type typ skriptu u našich webových map vždy
text/javascript
* Existují prohlížeče, které nemusí rozumět JavaScriptu je vhodné
zapsat začátek skriptu
* Prohlížeč by jinak vypsal skript jako normální text, takto ho bere jako
komentář a neukáže ho
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
JavaScriptJavaScript vlovložžený do strený do stráánkynky
* JavaScript je Case sensitive
* Nejjednodušší skript
document.write("ahoj");
* Každá metoda, funkce nebo vlastnost skriptu má být ukončena
středníkem
* Bez uvozovek by prohlížeč ahoj bral za proměnnou
* Proto psaní uvozovek navíc potřebuje před znak " ` lomítko
document.write("Tohle \"jsou\" uvozovky");
* Komentáře se přidávají pomocí znaků /* nebo */ pro víceřádkový
komentář
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Deklarace promDeklarace proměěnnnnéé
* Vkládají dynamiku; každá proměnná má název a dynamiku
var prom = 23;
var město="Paříž";
var nadpis1="
nadpis1
";
var marker;
var position = new GLatLng(49.204876043213574,
16.597048044204712);
var map = new GMap2(document.getElementById("mapField"));
* Zápis proměnné
var mesto = "Paříž";
document.write(mesto); //zapíše 'Paříž'
2
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
PrPrááce s promce s proměěnnýminnými
var mesic_plat = 45000; //měsíční plat
var rok = 12; //rok má 12 měsíců
var rok_plat = mesic_plat*rok; //plat za rok
var rok_den = 365; //rok má 365 dní
var plat_den = rok_plat/rok_den; //plat za den
document.write("Váš měsíční plat činí "+mesic_plat+
+"Kč Váš roční plat činí "+rok_plat+"Kč Za den
dostanete"+plat_den+"Kč");
* Můžete využívat aritmetické operátory a++ přičte 1, a-- odečte 1,
a+=y přičte y, a-=y odečte y, a*=y vynásobí y, a/=y vydělí y
* Kromě proměnných existují i pole proměnných
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
FunkceFunkce
* Kromě existujících funkcí JavaScriptu můžete přidávat své vlastní
* Deklarace funkce
function napis(){ document.write("ahoj"); }
* Klíčové slovo function deklaruje funkci povinné
* Slovo napis je název funkce (pište je bez diakritiky)
* () uvádí, že se jedná o funkci s parametrem
* {} ohraničuje tělo funkce
* Vyvolání funkce
napis(); // funkce bez argumentu
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
UdUdáálostilosti
* Najedete myší na text změní barvu, kliknete na mapu vrátí
vám informace o bodu,...
* Deklarují se u značek (X)HTML
* Zapsání jméno události="skript který se má
zavolat;"
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
NejNejččastastěějjšíší ududáálosti pro webovlosti pro webovéé mapymapy
* onClick Při kliknutí
* onDblClick Při dvojitém kliknutí
* onSubmit Při odesílání formuláře
* onMouseOver Při najetí kurzoru na objekt
* onMouseWheel Při rolování kolečkem
* Více o JavaScriptu např. na http://www.tvorba-
webu.cz/javascript/
GOOGLE MAPS API
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle MapsMaps APIAPI
* Princip API viz. přednáška
* Hlavní zdroj http://code.google.com/apis/maps/
* Postup
,,upsat se" pro API klíč na
http://code.google.com/apis/maps/signup.html
vložit klíč do svých stránek
začít tvořit (nejlépe s ohledem na zdroje):
http://code.google.com/apis/maps/documentation/index.html
http://code.google.com/apis/maps/documentation/examples/
http://code.google.com/apis/maps/documentation/reference.html
http://koti.mbnet.fi/ojalesa/exam/index.html
http://econym.org.uk/gmap/
3
* http://makingmaps.wordpress.com/2007/10/18/custom-map-
symbols-in-google-maps/
* http://atenasio.googlepages.com/gdd2007.html
* http://www.nelso.cz/mapa-cen-piva-v-praze/
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
DalDalšíší uužžiteiteččnnéé odkazyodkazy
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle knihovny figurknihovny figuráálnlníích symbolch symbolůů
* Dostupné na Google serveru
* Google mapy užívají KML renderer pro jejich vykreslování
* 4 složky ikon (http://maps.google.com/mapfiles/kml/pal2/ až 5)
* Každá složka obsahuje 64 ikon (icon0.png icon64.png)
* Pro každou ikonu PNG (32×32) dostupný také stín PNG
(59×32) pojmenování icon27s.png
* Nastavení vhodné pro většinu ikon
Icon.iconSize=new GSize(32,32);
Icon.shadowSize=new GSize(56,32);
Icon.iconAnchor=new GPoint(16,32);
Icon.infoWindowAnchor=new GPoint (16,0);
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle knihovny figurknihovny figuráálnlníích symbolch symbolůů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle knihovny figurknihovny figuráálnlníích symbolch symbolůů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle knihovny figurknihovny figuráálnlníích symbolch symbolůů
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
GoogleGoogle knihovny figurknihovny figuráálnlníích symbolch symbolůů