Vladimír Jarotek Název Live Search prezentace Maps
Nadpis Obsah 1. Co je to Live Search Maps 2. API 3. Závěr 4. Literatura
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ě
Nadpis 1.1 - Prohledávání map Zadání názvu města Explore Collection RSS Obr. 1
Nadpis 1.1 - Prohledávání map Plánování trasy Dopravní situace Zajímavá místa Přidávání informací do LSM https://ssl.search.live.com/listings/listingcente r.aspx
Nadpis 1.2 - Letecké mapy Zobrazení letecké mapy (Aerial) Obr. 2
Nadpis 1.3-2D, 3D pohled a speciální pohled z ptačí perspektivy 2D pohled 3D pohled Obr. 3
Nadpis 1.3-2D, 3D pohled a speciální pohled z ptačí perspektivy Pohled z ptačí perspektivy Obr. 4
Nadpis 1.4 - Informace o doprave Doprava Obr. 5
Nadpis 2 - API Použitím na www umožňuje zobrazovat kromě 2D pohledu i 3D mapy Oficiální dokumentace na http://dev.live.com/virtualearth/sdk/ Popis tříd a metod na http://msdn2.microsoft.com/enus/library/bb429619.aspx Kód je ve formátu HTML
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í.
Nadpis 2.1.1 Zdrojový kód <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"> </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>
Nadpis 2.1.1 Ukázka Obr. 5
Nadpis 2.1.1 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)
Nadpis 2.1.1 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
Nadpis 2.1.1 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);
Nadpis 2.1.1 Výsledek Obr. 6
Nadpis 2.2 Menu Vyhledání lokace Kontrola mapy Nastavení zem. šířky a délky a velikost zoom levelu
Nadpis 2.2.1 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();">
Nadpis 2.2.2 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);
Nadpis 2.2.2 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>
Nadpis 2.2 Menu Výsledek pak vypadá následovně Obr. 7
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.
Nadpis 4 - Literatura http://dev.live.com/virtualearth/sdk/ http://msdn2.microsoft.com/enus/library/bb429619.aspx http://programujte.com/index.php?akce=clanek&cl =2008030100-microsoft-virtual-earth-uvod-do-api http://www.extrawindows.cz/online-mapy-svetana-live-search-maps
Nadpis Konec Děkuji za pozornost