Další příklady
- Mapa, která se roztáhne na celou obrazovku
- Vše o ikonkách! Kterak vytvořit vlastní png ikonku i s Pixyho rolloverem
- Dynamická značka, aneb jak ji schovat, zobrazit, změnit polohu nebo vyměnit obrázek.
- Předávání parametrů mapě pomocí Url
Zde se nachází rozličné příklady, většinou vytvořené na požádání. Pokud máte vlastní kus kódu, který by za zveřejnění stál, pošlete jej a objeví se zde.
1. Mapa, která se roztáhne na celou obrazovku
Přiklad ukazuje, jak vytvořit mapu která pokryje celou plochu okna prohlížeče, aniž by se zobrazily posuvníky.
[příklad na zobrazení maximální mapy]2. Vše o ikonkách! Kterak vytvořit vlastní PNG ikonku i s Pixyho rolloverem
Značky na mapě, objekty typu AMarker, používají pro definici svého vzhledu AIcon. AMapy API obsahuje několik předdefinovaných ikonek, a další si můžete snadno vytvořit sami. Lze směle říci, že definice ikonky v AMapy API je nejjednoduší, skýtá nejvíce možností jak ovlivnit vzhled, a zároveň je přidávání značek na mapu maximálně rychlé.
Co všechno ikonky umí?
- ikonka může být jednoduchý gif obrázek, nebo průhledný png
- ikonka může mít stín, není třeba definovat klikací oblast!
- ikonka umožňuje definovat vzhled pro tři stavy (normal, hover, active)
- ikonku lze vytvořit bez obrázku, pouze pomocí CSS
Stín ikonek
Stín pro ikonku se pozicuje stejně jako obrázek. Musí být tedy vytvořen tak, aby už v grafickém editoru byl pozicován (vůči obrázku definovaném pomocí imageSrc) správně. Stín musí být formátu PNG. Pro automatické vytvoření stínu lze použít třeba tento nástroj.
Následující příklad ukazuje celou škálu různých ikonek. Zajímá vás, jak vytvořit:
- jednoduchou gif ikonku
- gif ikonku s popiskem
- png ikonku se stínem, a s jedním stavem
- png ikonku, s průhledným png stínem a se třemi stavy
- ikonku bez jakéhokoliv obrázku
- ... a nebo se podívat na ikonky pro vás již připravené :-)
Všechny ikonky v příkladu jsou dragovací, a ukazují jak zobrazit bublinu na click, nebo na konci dragování.
[příklad na zobrazení různých ikonek]Dynamická značka, aneb jak ji schovat, zobrazit, změnit polohu nebo vyměnit obrázek.
Je-li třeba zobrazit na mapě různé skupiny značek, jednu skupinu schovat, a druhou zobrazit, budou užitečné nové metody hide, show a isHidden. Nyní je i možné, aby značka cestovala po mapě a měnila přitom svůj vzhled. K tomu se hodí metody setGeoPoint, getGeoPoint a setImage.
Příklad také ukazuje, jak předefinovat výchozí myší kurzory nad mapou, což je vhodné třeba při offsetovém pozicování markerů. Pozice myšího kurzoru byla vyladěna (Opera, FF a IE) tak, aby špička šipky, nebo střed ručičky přesně označovali pozici, kterou lze získat pomocí AMap.getGeoMousePos.
[příklad na zobrazení dynamických značek]Akční značky
Značky sice označují polohu, ta se ale může měnit. Rovněž ikonku může být užitečné změnit. Proto AMarker poskytuje metody setImage a setGeoPoint. Polohu lze změnit staticky, nebo animací, přičemž předdefinovanou dobu a průběh můžete libovolně nahradit vlastní. Více prozradí následující příklad:
[příklad na zobrazení akčních značek - hra]Předávání parametrů mapě pomocí Url.
Často je třeba zobrazit mapu v nějakém stavu již při načtení stránky. Mám-li například seznam článků, a u každého chci mít odkaz do nového okna s mapou, musím nějak předat mapě parametry. Odkaz může vypadat takto: <a href="url.htm?name=Praha&gps=50%c2%b05'7.35%22N%3b+14%c2%b025'26.68%22E">Praha</a>
Dejte pozor, a v případě použití nestandardních znaků použijte url encoder. Třeba tento.
// nactu z url jmeno
var name = Url.getParam('name');
var marker = new AMarker(map.getGeoCenter(), {
'onClickShowBubble' : name
});
S třídou Url, je načítání Url parametrů, ať už normálních (.htm?name=Pepa&age=12), nebo Ajaxových (.htm#name=Pepa@age=12) opravdu jednoduché, viz. příklad.
[příklad na práci se třídou URL]