Název Live prez Sear enta Maps

HTML
DOWNLOAD

Rozměr: px

Začít zobrazení ze stránky:

Download "Název Live prez Sear enta Maps"

Přemysl Vávra
před 5 lety
Počet zobrazení:

1 Vladimír Jarotek Název Live Search prezentace Maps

2 Nadpis Obsah 1. Co je to Live Search Maps 2. API 3. Závěr 4. Literatura

3 Nadpis 1 Co je to a co nabízí Live Search Maps Jedná se o projekt (službu) prohledávání map od společnosti Microsoft a tato služba je součástí služby Live Search Nabízí zobrazení Leteckých Map 2D, 3D zobrazení a speciální pohled z ptačí perspektivy Informace o dopravě

4 Nadpis Prohledávání map Zadání názvu města Explore Collection RSS Obr. 1

5 Nadpis Prohledávání map Plánování trasy Dopravní situace Zajímavá místa Přidávání informací do LSM r.aspx

6 Nadpis Letecké mapy Zobrazení letecké mapy (Aerial) Obr. 2

7 Nadpis 1.3-2D, 3D pohled a speciální pohled z ptačí perspektivy 2D pohled 3D pohled Obr. 3

8 Nadpis 1.3-2D, 3D pohled a speciální pohled z ptačí perspektivy Pohled z ptačí perspektivy Obr. 4

9 Nadpis Informace o doprave Doprava Obr. 5

10 Nadpis 2 - API Použitím na www umožňuje zobrazovat kromě 2D pohledu i 3D mapy Oficiální dokumentace na Popis tříd a metod na Kód je ve formátu HTML

11 Nadpis 2.1 Mapa Nejprve je uveden DOCTYPE Následuje metatag udávající kódováni a přidání reference na map control V hlavičce (head) html souboru se definujeme vlastní funkce GetMap, která zajišťuje vykreslování mapy. Vytvoříme v ní instanci třídy VEMap a zavoláme metodu LoadMap pro samotné vykreslení.

12 Nadpis Zdrojový kód <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src=" </script> <script type="text/javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.loadmap(); } </script> </head> <body onload="getmap();"> <div id='mymap' style="position:relative; width:800px; height:400px;"></div> </body> </html>

13 Nadpis Ukázka Obr. 5

14 Nadpis getmap() Pro určení přesné oblasti, která má být vykreslena je třeba definovat parametry metody LoadMap() Ta je volána ve funkci getmap() LoadMap() může obsahovat několik parametrů LoadMap(VELatLong, zoom, style, fixed, mode)

15 Nadpis loadmap() Parametr VELatLong Zoom Style Fixed Mode Popis Objekt třídy VELatLong reprezentuje střed mapy. Přiblížení mapy v rozsahu 1 až 19. Standardně je nastaveno 4. Specifikuje styl mapy. Standardně je VEMapStyle.Road. Booleova hodnota určuje, jestli je uživateli zamezeno měnit zobrazenou mapu. Standardně je tato možnost vypnuta. Udává styl zobrazení 2D nebo 3D mapy. Standardně je zobrazena VEMapMode.Mode2D. Tab. 1

16 Nadpis getmap() Pro zobrazení Ostravy, se zoom levelem 12, hybridní mapa, a pohybování mapou není zakázáno map.loadmap(new VELatLong(49.83, 18.26), 12, 'h', false);

17 Nadpis Výsledek Obr. 6

18 Nadpis 2.2 Menu Vyhledání lokace Kontrola mapy Nastavení zem. šířky a délky a velikost zoom levelu

19 Nadpis Vyhledání lokace Pro možnost zadání místa a jeho vyhledání na mapě, stačí přidat novou funkci function FindLoc() { try { map.find(null, txtwhere.value); } catch(e) { alert(e.message); } } A poté přidat dva vstupy. Jeden jako formulář pro zadání výrazu a druhý jako tlačítko <INPUT id="txtwhere" type="text" name="txtwhere"> <INPUT id="find" type="button" value="find" name="find" onclick="findloc();">

20 Nadpis Kontrola mapy Pro možnost nastavování zoomu, je nutné přidat dvě metody: function DoZoomIn(c) { map.zoomin(); } function DoZoomOut() { map.zoomout(); } A pro možnost zadání zem. šířky a délky function DoCenterZoom() { } var lat = document.getelementbyid('txtmaplat').value; var lon = document.getelementbyid('txtmaplon').value; var zoom = document.getelementbyid('zoomlevel').value; map.setcenterandzoom(new VELatLong(lat, lon), zoom);

21 Nadpis Kontrola mapy Nakonec se přidají jendotlivé formuláře pro zadání hodnot <div>zem. šířka:<input id='txtmaplat' style='width: 30px' type='text' value='45' /></div> <div>zem. délka:<input id='txtmaplon' style='width: 30px' type='text' value='-120' /></div> <div> Zoom level:<input id='zoomlevel' type='text' style='width:15px;' value='5' /> <input type='button' value='set center & zoom' onclick='docenterzoom();' /> </div> <div> <input type='button' value='zoom In' onclick='dozoomin();' /> <input type='button' value='zoom Out' onclick='dozoomout();'/> </div>

22 Nadpis 2.2 Menu Výsledek pak vypadá následovně Obr. 7

23 Nadpis 3 - Závěr Kvalita a rozlišení map zachycujících území USA je velmi dobrá, nechybí ani propracované 3D modely budov ve velkých městech. Mimo Severní Ameriku už snímky tak dokonalé nejsou. Oproti Google Earth Aplikace od Microsoftu zatím nemá tak propracované možnosti zobrazování různých informačních a datových vrstev.

24 Nadpis 4 - Literatura = microsoft-virtual-earth-uvod-do-api

25 Nadpis Konec Děkuji za pozornost

Podobné dokumenty

Mapy.cz vs. amapy.cz

Mapy.cz vs. amapy.cz VŠB-TU Ostrava 18. února 2009 Osnova 1 Osnova 1 2 Osnova 1 2 3 Shodné funkce Rozdíly Podklady Poznámky k použití Osnova 1 2 3 Shodné funkce Rozdíly Podklady Poznámky k použití 4 Osnova 1 2 3 Shodné funkce