Nacházíte se: WALL.cz › Nástěnka › Rychlé vložení API mapy na váš web
Kategorie: Nástěnka

Rychlé vložení API mapy na váš web

AMapyPro stránky o Tipech na výlet jsem hledal vhodné API mapy, na kterých bych mohl zobrazit jednotlivé tipy. Potřeboval jsem na mapě vytvořit vlastní značky s tím, že po kliknutí na značku bude uživatel přesměrován na článek o daném turistickém místě.

Tuto službu nabízí Seznam, Google a Atlas. Vyzkoušel jsem všechny služby, a požadavky splnila až služba AMapy od Atlasu. AMapy API je služba od Atlasu, která je určena nejen pro rychlé vložení mapy do stránek, ale i pro vývoj sofistikovaných mapových aplikací. Služba je poskytována zdarma. Na stránkách AMapy najdete podrobného průvodce a mnoho užitečných příkladů.

Vložení API mapy.

Po zaregistrování a zadání vaší stránky, kde bude mapa zobrazena, vám bude na e-mail zaslán přístupový klíč. Do dané stránky pak stačí zadat následující kód.

<script type="text/javascript" src="http://amapy.atlas.cz/api/api.ashx?guid=VAS_GUID"></script>

a element DIV s takřka libovolnými rozměry.

<div id="mojeMapa" style="width: 450px; height: 450px"></div>

Styl elementu DIV můžete také nastavit v CSS souboru.

#mojeMapa {width: 450px; height: 450px; border: 1px solid #7E7E7E;}

Pro zobrazení mapy je ještě nutné mapy inicializovat skriptem, který můžete vložit přímo do stránky nebo skript vložit do vlastního souboru. Vzhledem k tomu, že jsem použil několik funkcí a budu stále definovat nové značky na mapě, zvolil jsem uložení do vlastního JS souboru.

<script type="text/javascript"> var Page = { load: function() { var mainMap = new AMap("mojeMapa"); // zde je možné vložit další funkce, nastavení mapy // a značky, viz. příklady níže mainMap.loadMaps(stred, 2000000, 'Základní'); } } window.addEvent('domready', Page.load.bind(Page)); </script>

Příklady nastavení a funkcí.

Příklad definování vlastní ikony značky s vrženým stínem.

var ikona = new AIcon({ fastRollover : false, fixPng : false, imageSrc : './upload/js/img/arrow.gif', imageSize : new ASize(21, 33), shadowSrc : './upload/js/img/shadow.png', shadowSize : new ASize(38, 33), iconOffset : new APoint(11, 34), labelStyle : 'position: absolute; width: 21px; text-align: center; left: 0; top: 1px; color: white; font: bold 10px Tahoma' });

Příklad definování značky (GeoPointu) s odkazem na článek. Počet značek na mapě není omezen.

var ev_Place = new AGeoPoint("50°40'43.07\"N; 14°3'3.23\"E"); var ev_Marker = new AMarker(ev_Place, { title : "Zde leží Erbenova vyhlídka", link : "http://wall.cz/erbenova-vyhlidka.a1.html", label : "1", icon : ikona, draggable : false }); mainMap.addOverlay(ev_Marker);
AMapy API

Možnosti jsou opravdu široké a záleží jen na vás, jakou si vytvoříte vlastní mapu. Výsledek a plnou funkčnost služby AMapy API si můžete vyzkoušet zde.

Autor: icon admin
Vydáno: 7.1.2009 20:55
Přečteno: 15994x

print Formát pro tisk

Sdílet článek:


QR kód s odkazem na článek "Rychlé vložení API mapy na váš web"

Pokud máte ve svém mobilu nainstalovanou čtečku QR kódů, načtením tohoto kódu přenesete článek do prohlížeče svého mobilního telefenu.
QR kód s odkazem na článek

Komentáře rss

Přidat komentář >

Nebyly přidány žádné komentáře.

Uživatelské menu

Nejste přihlášen(a)
avatar\n

Menu

Formulář Faktura

Formulář Faktura IV

Oblíbený formulář Faktura byl vylepšen a rozšířen.
Více se dočtete zde.

Helios iNuvio

Používáte podnikový systém Helios iNuvio? Potřebujete pomoci se správou nebo vyvinout SQL proceduru? Více informací naleznete na stránce Helios iNuvio.

On-line nástroje