Existují případy, kdy stránka nebo web potřebuje rozšířit tuto funkci a mapy Google ji neposkytují. Při těchto příležitostech můžeme použít Polymapy, knihkupectví Javascript bezplatný a otevřený zdroj, pomocí kterého můžeme na našich webových stránkách implementovat mapy jakéhokoli typu a funkcí.
Polymaps je díky své technologii ideální pro zobrazování informací na různých úrovních zemí, měst a dokonce i jednotlivých ulic Svg (Škálovatelná vektorová grafikas), což není nic jiného než vektorový formát obrázku založený na XML který poskytuje podporu pro interakci a animaci dvourozměrné grafiky, již bylo vidět, že to trochu jde Polymapy Podívejme se na jeho metody, ovládací prvky a některé příklady jeho implementace.
Instance polymapy
Každý Polymapa začíná instancí metody mapa (), ale než sestavíme mapu, importujeme obor názvů do místní proměnné:
var po = org.polymaps;
Polymaps nepoužívá tradiční konstruktory Javascriptu, v takovém případě nám Polymaps poskytuje metody, které tyto metody interně vytvářejí. Navíc používá řetězení metod, všechny metody vrací instanci mapy (). Můžeme také vložit do nového dokumentu SVG a poté přidat značku k obrázku:
var mapa = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Rovněž nemůžeme odeslat nic způsobem kontejner a instance mapy vrátí hodnotu přidruženou k poli a bude sloužit jak jako nastavovač, tak jako getter:map.container ();Vrstvy
V nejjednodušších případech mají mapy jednu vrstvu, ale mohou se skládat z více vrstev, které jsou jedna nad druhou, akceptované parametry jsou následující:
- {X} - Souřadnice sloupců.
- {Y} - Souřadnice řádků.
- {B} - Ohraničující rámeček.
- {Z} - Úroveň přiblížení.
- {S} - hostitel.
Bledý úsvit
Tato mapa má omezený design, který funguje dobře s hromadou informačních bodů, je více zaměřena na zvýraznění informací v popředí. Tato mapa je vytvořena s jedinou vrstvou, souřadnicemi a má několik základních interaktivních ovládacích prvků, je dobrým výchozím bodem pro zahájení přizpůsobování:
Zde úplný zdrojový kód:
var po = org.polymaps; var mapa = po.map () .container (document.getElementById ("mapa"). appendChild (po.svg ("svg"))) .add (po.interact ()) .add (po.hash ()); map.add (po.image () .url (po.url ("http: // {S} tile.cloudmade.com" + "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register + "/998 /256/{Z-lex.europa.eu/[X překvapivé/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass () .pan ("none")); Nyní se podívejme na mnohem úplnější příklad
Mřížka na dlaždice
V tomto příkladu máme různé typy zoomu, stejně jako správu různých vrstev, navíc můžeme oblast mapy otáčet a mít tak možnost vidět v ní další oblasti, podívejme se na některé její záběry:
A nakonec zdrojový kód, abyste si to mohli sami vyzkoušet:
var po = org.polymaps; var div = document.getElementById ("mapa"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var mapa = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("resize", resize); resize (); map.add (po.layer (mřížka)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("šířka", "50%"); rect.setAttribute ("výška", "50%"); funkce resize () {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transformace", "translate (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } funkční mřížka (dlaždice) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), velikost = map.tileSize (); rect.setAttribute ("width", size.x); rect.setAttribute ("výška", velikost.y); var text = g.appendChild (po.svg ("text")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () {if (spin) map.angle (map.angle () + spin);}, 30); funkční klávesa (e) {přepínač (e.keyCode) {případ 65: spin = e.type == "keydown"? -.004: 0; přestávka; případ 68: spin = e.type == "keydown"? 0,004: 0; přestávka; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("změnit velikost", změnit velikost, false);
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod 
