Det er noen anledninger der siden eller nettstedet må utvide denne funksjonaliteten og Google maps ikke gir den. Ved disse anledningene kan vi bruke Polymaps, en bokhandel Javascript gratis og åpen kildekode som vi kan implementere kart av hvilken som helst type og funksjonalitet på vårt nettsted.
Polymaps er ideelt for å vise informasjon på forskjellige nivåer av land, byer og til og med individuelle gater, dette takket være teknologien til Svg (Skalerbar vektorgrafikks) som ikke er annet enn et vektorisert bildeformat basert på XML som gir støtte for interaksjon og animasjon av todimensjonal grafikk, allerede sett at det går litt Polymaps La oss se metodene, kontrollene og noen eksempler på implementeringen.
Instantiating Polymaps
Hver Polymap starter med en forekomst av metoden kart (), men før vi bygger et kart importerer vi navneområdet til en lokal variabel:
var po = org.polymaps;
Polymaps bruker ikke tradisjonelle Javascript -konstruktører, i så fall gir Polymaps oss metoder som instantiserer metodene internt. I tillegg bruker den metodekjetting, alle metoder returnerer map () forekomsten. Vi kan også sette inn i et nytt SVG -dokument og deretter legge til en tagg i bildet:
var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Vi kan heller ikke sende noe i metoden container og kartforekomsten vil returnere verdien som er knyttet til feltet, og vil fungere som både en setter og en getter:map.container ();Lag
I de enkleste tilfellene har kartene et enkelt lag, men de kan bestå av flere lag som er ett på hverandre, de aksepterte parameterne er følgende:
- {X} - Kolonnekoordinat.
- {Y} - Radkoordinat.
- {B} - Grenseboks.
- {Z} - Zoomnivå.
- {S} - Vert.
Blek Dawn
Dette kartet har en begrenset design som fungerer godt med tonnevis av informasjonspunkter, det er mer fokusert på å markere forgrunnsinformasjonen. Dette kartet er bygget med et enkelt lag, koordinerer og har noen grunnleggende interaktive kontroller, det er et godt utgangspunkt for å begynne å tilpasse det:
Her er hele kildekoden:
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 "). Verter ([" a. "," B. "," C. "," "]] ))); map.add (po.compass () .pan ("ingen")); La oss nå se et mye mer komplett eksempel
Tile Grid
I dette eksemplet har vi forskjellige typer zoom, samt styring av forskjellige lag, i tillegg kan vi rotere området på kartet og dermed kunne se andre områder i det, la oss se noen fangster av det:
Og til slutt kildekoden slik at du kan prøve den 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); endre størrelse (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("bredde", "50%"); rect.setAttribute ("høyde", "50%"); function 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; kart.størrelse ({x: x, y: y}); resize.ignore = false; } funksjonsgitter (flis) {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øyde", 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 (funksjon () {if (spin) map.angle (map.angle () + spin);}, 30); funksjonstast (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; gå i stykker; sak 68: spin = e.type == "keydown"? .004: 0; gå i stykker; }} window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("endre størrelse", endre størrelse, falsk);
Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng 
