Ci sono alcune occasioni in cui la pagina o il sito web ha bisogno di estendere questa funzionalità e Google Maps non la fornisce. In queste occasioni possiamo usare polimappe, una libreria Javascript gratuito e open source con cui possiamo implementare mappe di qualsiasi tipo e funzionalità sul nostro sito web.
Polymaps è ideale per visualizzare informazioni a diversi livelli di paesi, città e anche singole strade, questo grazie alla sua tecnologia di Svg (Grafica vettoriale scalabiles) che non è altro che un formato di immagine vettorializzato basato su XML che fornisce supporto per l'interazione e l'animazione della grafica bidimensionale, già visto che va un po' polimappe Vediamone i metodi, i controlli e alcuni esempi della sua implementazione.
Istanziare le Polymap
Ogni Polymap inizia con un'istanza del metodo carta geografica (), ma prima di costruire una mappa importiamo lo spazio dei nomi in una variabile locale:
var po = org.polymaps;
Polymaps non utilizza i tradizionali costruttori Javascript, in tal caso Polymaps ci fornisce metodi che istanziano i metodi internamente. Inoltre, utilizza il concatenamento dei metodi, tutti i metodi restituiscono l'istanza map(). Possiamo anche inserire in un nuovo documento SVG e quindi aggiungere un tag all'immagine:
var map = po.map() .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (…)) Inoltre, non possiamo inviare nulla nel metodo di contenitore e l'istanza della mappa restituirà il valore associato al campo e fungerà sia da setter che da getter:mappa.contenitore ();strati
Nei casi più semplici le mappe hanno un solo layer ma possono essere costituite da più layer sovrapposti, i parametri accettati sono i seguenti:
- {X} - Coordinata della colonna.
- {Y} - Coordinata riga.
- {B} - Riquadro di delimitazione.
- {Z} - Livello di zoom.
- {S} - Ospite.
alba pallida
Questa mappa ha un design limitato che funziona bene con tonnellate di punti informativi, è più focalizzata sull'evidenziazione delle informazioni in primo piano. Questa mappa è costruita con un singolo livello, coordinate e ha alcuni controlli interattivi di base, è un buon punto di partenza per iniziare a personalizzarla:
Qui il codice sorgente completo:
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 sorprendente/[Y-lex.europa.eu.png.webp ") .hosts ([" a. "," B. "," C. "," "] ))); map.add (po.compass() .pan ("nessuno")); Ora vediamo un esempio molto più completo
Griglia di piastrelle
In questo esempio abbiamo diversi tipi di zoom, oltre alla gestione di diversi livelli, inoltre possiamo ruotare l'area della mappa e quindi essere in grado di vedere altre aree in essa, vediamo alcune acquisizioni:
E infine il codice sorgente in modo che tu possa provarlo tu stesso:
var po = org.polymaps; var div = document.getElementById ("mappa"), 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 ("ridimensiona", ridimensiona); ridimensiona (); map.add (po.layer (griglia)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("larghezza", "50%"); rect.setAttribute ("altezza", "50%"); funzione resize() {if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("trasforma", "traduci (" + (x / 2) + "," + (y / 2) + ")"); ridimensiona.ignora = vero; map.size ({x: x, y: y}); ridimensiona.ignora = falso; } griglia di funzioni (tile) {var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("larghezza", dimensione.x); rect.setAttribute ("altezza", dimensione.y); var testo = g.appendChild (po.svg ("testo")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (funzione () {if (spin) map.angle (map.angle () + spin);}, 30); tasto funzione (e) {switch (e.keyCode) {case 65: spin = e.type == "keydown"? -.004: 0; rompere; case 68: spin = e.type == "keydown"? .004: 0; rompere; }} window.addEventListener ("keydown", chiave, vero); window.addEventListener ("keyup", chiave, vero); window.addEventListener ("ridimensiona", ridimensiona, falso);
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo 
