Postoje slučajevi u kojima stranica ili web stranica moraju proširiti ovu funkcionalnost, a Google karte to ne pružaju. U tim prilikama možemo koristiti Polymaps, knjižara Javascript besplatni i otvoreni izvor s kojim možemo implementirati karte bilo koje vrste i funkcionalnosti na našu web stranicu.
Polymaps je idealan za prikaz informacija na različitim razinama zemalja, gradova, pa čak i pojedinačnih ulica, zahvaljujući svojoj tehnologiji Svg (Skalabilna vektorska grafikas) koji nije ništa drugo do vektorski format slike temeljen na XML koji pruža podršku za interakciju i animaciju dvodimenzionalne grafike, već smo vidjeli da to pomalo ide Polymaps Pogledajmo njegove metode, kontrole i neke primjere njegove provedbe.
Instanting Polymaps
Svaki Polymap počinje instancom metode karta (), ali prije nego što izgradimo kartu uvozimo imenski prostor u lokalnu varijablu:
var po = org.polymaps;
Polymaps ne koristi tradicionalne Javascript konstruktore, u tom slučaju Polymaps nam pruža metode koje interno stvaraju metode. Dodatno, koristi lančano postavljanje metoda, sve metode vraćaju instancu map (). Također možemo umetnuti u novi SVG dokument, a zatim slici dodati oznaku:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Također ne možemo poslati ništa u metodi kontejner a instanca karte vratit će vrijednost povezanu s poljem i poslužit će i kao postavljač i kao dobivač:map.kontejner ();Slojevi
U najjednostavnijim slučajevima, karte imaju jedan sloj, ali se mogu sastojati od više slojeva koji su jedan na drugom, prihvaćeni parametri su sljedeći:
- {X} - Koordinata stupca.
- {Y} - Koordinata retka.
- {B} - Okvir za omeđivanje.
- {Z} - Razina zumiranja.
- {S} - Domaćin.
Blijeda zora
Ova mapa ima ograničeni dizajn koji dobro funkcionira s mnoštvom informacijskih točaka, više je fokusirana na isticanje informacija u prvom planu. Ova je karta izgrađena s jednim slojem, koordinatama i ima neke osnovne interaktivne kontrole. To je dobra polazna točka za početak prilagođavanja:
Evo cijelog izvornog koda:
var po = org.polymaps; var map = po.map () .container (document.getElementById ("map"). 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 iznenađujuće/[Y-lex.europa.eu.png.webp ") .hostovi ([" a. "," B. "," C. "," "]] ))); map.add (po.compass () .pan ("nema")); Pogledajmo sada puno potpuniji primjer
Mreža pločica
U ovom primjeru imamo različite vrste zumiranja, kao i upravljanje različitim slojevima, dodatno možemo rotirati područje karte i na taj način moći vidjeti druga područja u njoj, pogledajmo neke njezine snimke:
I na kraju izvorni kod, tako da ga možete sami isprobati:
var po = org.polymaps; var div = document.getElementById ("karta"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var map = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("promijeni veličinu", promijeni veličinu) ; promijeni veličinu (); map.add (po.layer (rešetka)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("širina", "50%"); rect.setAttribute ("visina", "50%"); funkcija resize () {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("pretvori", "prevedi (" + (x / 2) + "," + (y / 2) + ")"); promijeni veličinu.ignore = istina; map.size ({x: x, y: y}); promijeni veličinu.ignore = lažno; } funkcionalna mreža (pločica) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("širina", veličina.x); rect.setAttribute ("visina", veličina.y); var text = g.appendChild (po.svg ("tekst")); 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); funkcijska tipka (e) {switch (e.keyCode) {slučaj 65: spin = e.type == "keydown"? -,004: 0; pauza; slučaj 68: spin = e.type == "keydown"? .004: 0; pauza; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", ključ, istina); window.addEventListener ("promijeni veličinu", promijeni veličinu, lažno);
Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod 
