Det finns tillfällen då sidan eller webbplatsen behöver utöka denna funktionalitet och Google maps inte tillhandahåller den. Vid dessa tillfällen kan vi använda Polymaps, en bokhandel Javascript gratis och öppen källkod med vilken vi kan implementera kartor av alla typer och funktioner på vår webbplats.
Polymaps är idealisk för att visa information på olika nivåer i länder, städer och till och med enskilda gator, detta tack vare dess teknik för Svg (Skalbar vektorgrafiks) vilket inte är annat än ett vektoriserat bildformat baserat på XML som ger stöd för interaktion och animering av tvådimensionell grafik, redan sett att det går lite Polymaps Låt oss se dess metoder, kontroller och några exempel på dess genomförande.
Instantierande polymaps
Varje Polymap börjar med en instans av metoden Karta (), men innan vi bygger en karta importerar vi namnutrymmet till en lokal variabel:
var po = org.polymaps;
Polymaps använder inte traditionella Javascript -konstruktörer, i så fall ger Polymaps oss metoder som instanserar metoderna internt. Dessutom använder den metodkedja, alla metoder returnerar map () -instansen. Vi kan också infoga i ett nytt SVG -dokument och sedan lägga till en tagg i bilden:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Vi kan inte heller skicka något i metoden behållare och kartinstansen returnerar värdet som är associerat med fältet och fungerar både som en setter och som en getter:map.container ();Skikten
I de enklaste fallen har kartorna ett enda lager men de kan bestå av flera lager som ligger ovanpå varandra, de accepterade parametrarna är följande:
- {X} - Kolumnkoordinat.
- {Y} - Radkoordinat.
- {B} - Gränslåda.
- {Z} - Zoomnivå.
- {S} - Värd.
Pale Dawn
Denna karta har en begränsad design som fungerar bra med massor av informationspunkter, den är mer fokuserad på att markera förgrundsinformationen. Denna karta är byggd med ett enda lager, koordinerar och har några grundläggande interaktiva kontroller, det är en bra utgångspunkt för att börja anpassa den:
Här är hela källkoden:
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 överraskande/[Y-lex.europa.eu.png.webp "). Värdar ([" a. "," B. "," C. "," "]] )))); map.add (po.compass () .pan ("ingen")); Låt oss nu se ett mycket mer fullständigt exempel
Kakelgaller
I det här exemplet har vi olika typer av zoom, liksom hantering av olika lager, dessutom kan vi rotera området på kartan och därmed kunna se andra områden i den, låt oss se några fångster av den:
Och slutligen källkoden så att du kan prova den själv:
var po = org.polymaps; var div = document.getElementById ("map"), 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 ("resize", resize); ändra storlek (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("bredd", "50%"); rect.setAttribute ("höjd", "50%"); funktion resize () {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transform", "translate (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } funktionsnät (kakel) {var g = kakel.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("bredd", storlek.x); rect.setAttribute ("höjd", storlek.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); funktionsknapp (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; ha sönder; fall 68: spin = e.type == "keydown"? .004: 0; ha sönder; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("ändra storlek", ändra storlek, falskt);
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng 
