Der er nogle lejligheder, hvor siden eller webstedet skal udvide denne funktionalitet, og Google maps ikke giver det. Ved disse lejligheder kan vi bruge Polymaps, en boghandel Javascript gratis og open source, som vi kan implementere kort af enhver type og funktionalitet på vores websted.
Polymaps er ideel til visning af oplysninger på forskellige niveauer i lande, byer og endda individuelle gader, dette takket være dens teknologi Svg (Skalerbar vektorgrafiks) som ikke er andet end et vektoriseret billedformat baseret på XML som giver støtte til interaktion og animation af todimensionel grafik, allerede set at det går lidt Polymaps Lad os se dens metoder, kontroller og nogle eksempler på dens implementering.
Instantiating Polymaps
Hver Polymap starter med en forekomst af metoden kort (), men før vi bygger et kort, importerer vi navneområdet til en lokal variabel:
var po = org.polymaps;
Polymaps bruger ikke traditionelle Javascript -konstruktører, i så fald giver Polymaps os metoder, der instantiserer metoderne internt. Derudover bruger den metodekæde, alle metoder returnerer map () forekomsten. Vi kan også indsætte i et nyt SVG -dokument og derefter tilføje et mærke til billedet:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Vi kan heller ikke sende noget i metoden til beholder og kortforekomsten returnerer værdien, der er knyttet til feltet, og fungerer både som setter og getter:map.container ();Lag
I de enkleste tilfælde har kortene et enkelt lag, men de kan bestå af flere lag, der ligger oven på hinanden, de accepterede parametre er følgende:
- {X} - Kolonnekoordinat.
- {Y} - Rækkoordinat.
- {B} - Afgrænsningsboks.
- {Z} - Zoomniveau.
- {S} - vært.
Bleg Dawn
Dette kort har et begrænset design, der fungerer godt med masser af informationspunkter, det er mere fokuseret på at fremhæve forgrundsinformationen. Dette kort er bygget med et enkelt lag, koordinerer og har nogle grundlæggende interaktive kontroller, det er et godt udgangspunkt for at begynde at tilpasse det:
Her er den fulde kildekode:
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 overraskende/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "]] )))); map.add (po.compass () .pan ("ingen")); Lad os nu se et meget mere komplet eksempel
Flisegitter
I dette eksempel har vi forskellige former for zoom, samt styring af forskellige lag, derudover kan vi rotere området på kortet og dermed kunne se andre områder i det, lad os se nogle optagelser af det:
Og endelig kildekoden, så du kan prøve det selv:
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); ændre størrelse (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("bredde", "50%"); rect.setAttribute ("højde", "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 = sand; map.size ({x: x, y: y}); resize.ignore = falsk; } funktionsgitter (flise) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("bredde", størrelse.x); rect.setAttribute ("højde", størrelse.y); var tekst = 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 (funktion () {hvis (spin) map.angle (map.angle () + spin);}, 30); funktionstast (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; pause; sag 68: spin = e.type == "keydown"? .004: 0; pause; }} window.addEventListener ("keydown", nøgle, sand); window.addEventListener ("keyup", key, true); window.addEventListener ("resize", resize, false);
Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt 
