Share
Hai progettato un nuovo sito lucido; selezionando attentamente i colori, la tipografia e le fotografie per riflettere perfettamente il marchio dell'azienda. Quindi il tuo cliente ti chiede di aggiungere una mappa. Certo, potresti utilizzare una "procedura guidata" per la creazione di mappe, come quella che viene fornita con ogni account Google. Ma, ammettiamolo, le loro funzionalità sono limitate e sembrano piuttosto generiche!
L'API di Google Maps, d'altra parte, ti dà la libertà di creare mappe completamente personalizzate, che possono fare ogni sorta di cose interessanti. La mappa della cronologia di Portsmouth è un sito che ho costruito di recente utilizzando questa API.
Questa serie di esercitazioni ti mostrerà come creare mappe personalizzate utilizzando l'API di Google Maps. Comporterà sporcarsi le mani con un po 'di JavaScript, ma ne varrà la pena.
I tutorial copriranno ogni sorta di cose. Per citarne alcuni: colori, menu e indicatori di mappe personalizzate; portare in vita la tua mappa (ad esempio una mappa handrawn) sovrapponendola a una mappa google zoomabile; collegamento fino all'API di Flickr; ottimizzazione dell'immagine; design reattivo; ottimizzazione del codice e convalida. O, in altre parole, quando hai finito, non solo sarai in grado di creare mappe adorabili, ma avrai anche guardato molte cose rilevanti per la creazione di qualsiasi sito web.
Questi tutorial utilizzano lo scenario di un'azienda britannica che promuove festival musicali. L'immagine "Prodotto finale" sopra mostra il tipo di cosa che stiamo mirando. Dai un'occhiata alla demo.
Nota: Solo il marker di Glastonbury è 'attivo' in questo esempio.
Prima di iniziare, potresti voler scaricare i file associati a questo tutorial. Ho incluso un file html separato per ogni attività.
Un'API, o interfaccia di programmazione dell'applicazione, è un modo elegante di dire una serie di comandi (ad esempio funzioni) di una società (ad esempio Facebook, Twitter, You Tube, Google) pubblicare. L'idea è che puoi usare questi comandi per creare una versione altamente personalizzata del loro contenuto. Ad esempio, nel caso dell'API di Google Maps il "contenuto" è la mappa, mentre nel caso dell'API di Flickr il "contenuto" è la foto.
Quando la gente parla di "mash-up", significa che ha utilizzato l'API di due o più aziende per combinare il contenuto, ad esempio la visualizzazione di immagini da Flickr su una mappa di Google. Ci sono letteralmente migliaia di queste API in giro; dare un'occhiata al Web programmabile per maggiori informazioni.
Vedremo l'API di Flickr in un'esercitazione successiva, ma per iniziare ci concentreremo sull'API di Google Maps. Questo ti permetterà di fare ogni sorta di cose, inclusa la personalizzazione di colori, indicatori di mappa, stile di finestre a comparsa, livello di dettaglio e livello di zoom. Per non parlare, in realtà, di fare in modo che la mappa faccia cose interessanti, come la visualizzazione di dati in tempo reale, il raggruppamento di marcatori, la pianificazione di percorsi, il disegno di sovrapposizioni personalizzate, dati dinamici che rivelano ... la lista è infinita!
A rischio di evidenziare l'ovvio, per iniziare è necessario un account Google. Se al momento non ne hai uno, vai su Google e registrati.
Armato con il tuo account Google, ora puoi avventurarti nelle pagine API di Google Maps. Metti questa pagina nei preferiti; diventerai molto familiare con esso. Le aree principali sono:-
Prima di andare oltre, hai bisogno anche di una chiave API (una lunga sequenza di lettere e numeri, unica per te). Ottieni la tua chiave API qui.
OK, sei pronto per iniziare a costruire.
Per far funzionare la mappa fornita, sostituisci dove dice "YOUR_API_KEY_GOES_HERE" con la tua chiave API. La tua mappa dovrebbe assomigliare alla mappa mostrata sopra.
Il principio di base del codice è che crea un div (chiamato festival-map) in cui il JavaScript carica la mappa. Ho aggiunto commenti nel codice per spiegare come funziona, ma vale la pena evidenziare i bit principali.
Il codice prima dichiara la tua applicazione come HTML5 usando la dichiarazione Doctype .
Quindi imposta lo stile per la mappa; i bit tra il tag. Puoi adattare lo stile al # Festival-map id a seconda di dove vuoi mettere la tua mappa. Se si desidera una mappa "a schermo intero", impostare larghezza e altezza su 100% e rimuovere i margini.
Quindi, ignorando per un momento il codice JavaScript, il codice tra i tag body imposta un oggetto html vuoto, ovvero un div (festival-map) per tenere la mappa. Questo agisce come una sorta di "segnaposto", in cui il JavaScript carica la mappa.
OK - ora guardando il codice JavaScript - il codice prima si connette alla tua chiave API di google maps.
Viene quindi avviato nel JavaScript che crea la mappa. Promemoria rapido: funzioni JavaScript (ad es. loadFestivalMap) sono un insieme di comandi che vengono eseguiti solo quando vengono chiamati da un altro codice. Questo può sembrare complicato, ma in realtà sta solo facendo alcune cose -
Accentsconagua
festivalMapOptions) della mappa (ad esempio latitudine e longitudine, livelli di zoom ecc.) e una variabile JavaScript vuota (festivalMap) viene creato a cui verrà assegnata la mappa a breve. (Suggerimento: itouchmap è un comodo sito per cercare le coordinate di latitudine e longitudine di qualsiasi posizione.)loadFestivalMap la funzione viene attivata per essere eseguita da questa linea:google.maps.event.addDomListener (window, 'load', loadFestivalMap); festivalMap). Facendo ciò, applica anche le opzioni di configurazione e carica la mappa nel festival-map div creato per tenerlo.loadMapMarkers la funzione viene attivata in esecuzione dall'ultima riga di loadFestivalMap funzione.Se questo non ha senso, fai una lettura dei commenti all'interno della versione completa del codice mentre lo spiegano ulteriormente.
Ormai dovresti avere una mappa attiva e funzionante, e con un po 'di fortuna non sei stato troppo sconcertato dal JavaScript! Supponendo che tutto vada bene, possiamo iniziare a rendere la mappa un po 'più interessante.
È facile usare le tue immagini come indicatori di mappa. In modo simile al modo in cui imposti le opzioni di proprietà per la mappa stessa (ad es. centro, zoom ecc. come abbiamo fatto sopra), puoi anche modificare le proprietà degli indicatori di mappa. Per utilizzare un'immagine diversa come indicatore della mappa, è sufficiente impostare il icona proprietà dei tuoi indicatori di mappa. (Se sei interessato, l'API di google maps - sezione marcatori elenca tutte le proprietà, i metodi e gli eventi dei marcatori della mappa che puoi utilizzare).
In genere i marker delle mappe sono .png perché consentono di avere una forma irregolare con uno sfondo trasparente.
Abbiamo anche bisogno di impostare l'area 'cliccabile' per ciascun marker per garantire che il bit 'image' del file .png sia cliccabile e il bit trasparente no. Questo è molto importante se i marcatori si sovrappongono.
Per prima cosa create l'immagine dell'icona della mappa (markerIconGlastonbury), quindi creare la forma dell'icona della mappa (markerShapeGlastonbury), e alla fine poi li colleghi entrambi al tuo indicatore di mappa (markerGlastonbury).
// Impostazione della posizione del marker della mappa di Glastonbury. var markerPositionGlastonbury = new google.maps.LatLng (51.159803, -2.585585); // Impostazione dell'icona da utilizzare con il marker della mappa di Glastonbury. var markerIconGlastonbury = url: 'icons / icon_glas_uk.png', // Il file immagine di dimensioni. dimensione: new google.maps.Size (225, 120), // Il punto sull'immagine per misurare l'ancora. 0, 0 è in alto a sinistra. origine: new google.maps.Point (0, 0), // Le coordinate x y del punto di ancoraggio sul marker. per esempio. Se il tuo indicatore di mappa era una puntina da disegno, allora l'ancora sarebbe la punta del perno. anchor: new google.maps.Point (189, 116); // Impostazione della forma da utilizzare con il marker della mappa di Glastonbury. var markerShapeGlastonbury = coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56], digitare: 'poly'; // Creazione del marker della mappa di Glastonbury. markerGlastonbury = new google.maps.Marker (// utilizza la posizione impostata sopra. position: markerPositionGlastonbury, // aggiunge il marker alla mappa. map: festivalMap, titolo: 'Glastonbury Festival', // assegna l'immagine all'icona impostata sopra icona: markerIconGlastonbury, // assegna la forma dell'icona impostata sopra al marker forma: markerShapeGlastonbury, // imposta lo z-index dell'indicatore della mappa zIndex: 102);
Puoi scaricare il file html completo dalla parte superiore di questa pagina, o dare un'occhiata alla versione live. Per il momento, ho appena aggiunto un indicatore di mappa ... ovviamente ne aggiungerò altri a breve!
Suggerimento: Per ottenere le coordinate della forma dell'icona della mappa, inserisco l'immagine dell'icona in una pagina Web temporanea in Dreamweaver, quindi utilizzo lo strumento Hotspot Polygon per ottenere le coordinate e quindi copiare nuovamente queste coordinate nella mia pagina della mappa principale.Gli elementi, come gli indicatori di mappa, possono avere entrambe le coordinate x, ye z. Lo z-index è la profondità. Determina in che modo gli elementi sono "impilati" uno sopra l'altro e quindi come si sovrappongono.
Se le coordinate x e y di un elemento sono le stesse, gli elementi con indici z più alti vengono visualizzati in cima agli elementi con indici z inferiori. (L'indice Z funziona solo sugli elementi posizionati, ad esempio relativo, fisso o assoluto).
Finora la mappa sembra OK perché, per impostazione predefinita, l'API di Google Maps fornisce agli elementi che appaiono più in basso sullo schermo uno z-index più alto, in modo che appaiano sugli elementi leggermente più in alto sullo schermo. Per esempio. l'icona dell'Isola di Wight è in cima al Glastonbury e alle icone del festival di Reading (vedi foto sotto).
Più avanti in questo tutorial daremo un'occhiata a come è possibile modificare gli z-index per manipolare la modalità di visualizzazione degli indicatori di mappa.
Sebbene la mappa stia iniziando a prendere forma, la mappa predefinita non si adatta perfettamente all'effetto generale che voglio raggiungere. Fortunatamente, è davvero semplice utilizzare le opzioni "stile" dell'API per personalizzare l'aspetto della mappa.
A questo punto dovrei anche dire che ho appena preso alcuni festival musicali per illustrare questo esempio. Questo è stato un po 'casuale, e la mia selezione non riflette la mia opinione - a favore o contro - qualsiasi festival!
Usa la procedura guidata JSON per allenarti su come vuoi che appaia la tua mappa. Puoi cambiare i colori di praticamente tutto, aggiungere e rimuovere dettagli, impostare il riempimento colore e la geometria in modo indipendente, ecc. Vale la pena dedicare un po 'di tempo ad abituarsi a come funziona. (Nel caso ti stia chiedendo, JSON è solo un modo per formattare le informazioni in modo che un computer possa leggerle.)
Quando si è soddisfatti dello stile mostrato nell'anteprima della procedura guidata JSON, fare clic su Mostra JSON pulsante e copia il codice.
Torna al documento html, aggiungi una variabile subito dopo l'apertura del tag JavaScript per conservare queste informazioni, quindi incolla il codice.
// Primo, leggiamo nei dati che descrivono lo stile. var style_festival = ["featureType": "administrative", "stylers": ["visibility": "off"], "featureType": "poi", "stylers": ["visibility": " off "], " featureType ":" transit "," stylers ": [" visibility ":" off "], " featureType ":" road "," stylers ": [" visibility " : "off"], "featureType": "landscape", "stylers": ["color": "# FFE200"], "featureType": "water", "stylers": [ "visibility": "on", "color": "# 4f92c6"]];
Devi ottenere la mappa per trattare le informazioni che hai appena aggiunto come stile di mappa. Uso StyledMapType per fare questo.
// Quindi usiamo questi dati per creare gli stili. var styled_festival = new google.maps.StyledMapType (style_festival, name: "Stile festival");
Infine, devi assegnare il tuo nuovo stile alla tua mappa per "attivare" lo stile.
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId ( 'map_styles_festival'); Si prega di utilizzare il collegamento all'inizio di questo tutorial per scaricare una copia del codice per la mappa finora, o dare un'occhiata alla demo dal vivo per questa parte del tutorial. In realtà ho aggiunto due stili. Uno viene attivato immediatamente e l'altro verrà attivato quando la mappa viene ingrandita per fornire un livello di dettaglio maggiore. (Questo è spiegato più sotto).
Non ho nemmeno potuto resistere aggiungendo uno sfondo a questo punto :) Dai un'occhiata al corpo selettore di CSS per vedere come ho fatto questo.
Ok, è ora di fare in modo che la mappa faccia effettivamente qualcosa! È possibile utilizzare la sovrapposizione della finestra informativa integrata, ma non sembrano fantastico e non possono essere facilmente personalizzati. Quindi, useremo la libreria Infobox.
Scarica una copia della libreria Infobox. Decomprimilo e memorizzalo in una cartella vicino alla tua mappa. Quindi aggiungi questa linea nella parte superiore del tuo file html.
Aggiungi gli z-indici per ciascun indicatore di mappa in modo che quelli più vicini alla parte inferiore dello schermo appaiano in cima a quelli più in alto. (cioè più vicino al fondo dello schermo è un marcatore, più alto dovrebbe essere il suo indice z). Tutto verrà rivelato in seguito sul motivo per cui lo state facendo! Per esempio -
// Creazione del marker della mappa di Glastonbury. markerGlastonbury = new google.maps.Marker (// utilizza la posizione impostata sopra. position: markerPositionGlastonbury, // aggiunge il marker alla mappa. map: festivalMap, titolo: 'Glastonbury Festival', // assegna l'immagine all'icona impostata sopra icona del marker: markerIconGlastonbury, // assegna la forma dell'icona impostata sopra al marker shape: markerShapeGlastonbury, // imposta l'indice z del marker della mappa zIndex: 107);
Aggiungi il seguente codice dopo ogni indicatore di mappa. Si prega di leggere i commenti all'interno del codice per vedere cosa sta facendo.
// Crea le informazioni per andare nella finestra di informazioni a comparsa. var boxTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '
'; // Imposta le opzioni di configurazione della finestra di informazioni pop-up. var infoboxOptionsGlastonbury = content: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size (-241, 0), zIndex: null, boxStyle: background: "url ('infobox / pop_up_box_top_arrow.png') ) no-repeat ", opacity: 1, width:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: new google.maps.Size (1, 1), isHidden: false, pane: "floatPane", enableEventPropagation: false; // Crea la casella di pop-up per Glastonbury, aggiungendo le opzioni di configurazione impostate sopra. infoboxGlastonbury = new InfoBox (infoboxOptionsGlastonbury); // Aggiungi un 'ascoltatore di eventi' al marker della mappa di Glastonbury per ascoltare quando viene cliccato. google.maps.event.addListener (markerGlastonbury, "click", function (e) // Apri la finestra di informazioni su Glastonbury infoboxGlastonbury.open (festivalMap, questo); // Cambia la proprietà z-index dell'indicatore per rendere l'indicatore viene visualizzato sopra ad altri marcatori this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); // Ingrandisce la mappa. setZoomWhenMarkerClicked (); // Imposta il marker di Glastonbury come il centro della mappa. festivalMap.setCenter (markerGlastonbury.getPosition ());); Nel codice sopra, hai chiamato la funzione setZoomWhenMarkerClicked. Ciò ingrandirà la mappa quando una persona fa clic su un indicatore. Ma non succederà un sacco di cose finché non avrai creato questa funzione! Questa è la funzione che devi creare -
function setZoomWhenMarkerClicked () var currentZoom = festivalMap.getZoom (); se (currentZoom < 7) festivalMap.setZoom(7);
Mentre la mappa si ingrandisce, è probabile che tu voglia mostrare più dettagli sulla tua mappa. Questo viene fatto aggiungendo un listener di eventi e usando il getZoom metodo per controllare continuamente se lo zoom è stato modificato. Se è stato aumentato (sopra il livello 6), il setMapTypeId metodo è usato per impostare il secondo stile (più dettagliato) sopra definito.
// Ascolta continuamente quando il livello di zoom cambia. Questo include quando la mappa si ingrandisce quando viene cliccato un marcatore. google.maps.event.addListener (festivalMap, "zoom_changed", function () var newZoom = festivalMap.getZoom (); // Se la mappa viene ingrandita, passa allo stile che mostra il livello di dettaglio più alto. (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // Altrimenti la mappa deve essere rimpicciolita, quindi usa lo stile con il livello di dettaglio più basso. else festivalMap.setMapTypeId ('map_styles_festival'); ); Modella il tuo infobox usando il CSS per farlo sembrare carino.
// Variabile contenente lo stile per la casella di pop-up. var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding: 15px; margin-top: 8px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; ; box-shadow: 1px 1px # 888; ";
Quando è stata aperta una casella informativa, l'indicatore della mappa viene portato in primo piano. Tuttavia, se chiudi la finestra delle informazioni e quindi ingrandisci la mappa nella sua posizione originale, il marcatore rimane in primo piano. Questo può sembrare strano.
Nel passaggio 1 imposti lo z-index per ciascun marker. È possibile utilizzare questo ora per risolvere questo problema. Devi creare una funzione (es. resetZindexes) che reimposta gli z-index ai valori originali e quindi aggiunge una chiamata a questa funzione (es. resetZindexes ();) a infobox.js per attivare la funzione da eseguire quando la finestra della finestra delle informazioni viene chiusa.
Vai al link in cima a questa pagina per una copia del codice per il sito fino ad ora, o dai un'occhiata alla versione live di come dovrebbe essere ora. Ho solo aggiunto il pop-up per Glastonbury. Sentiti libero di aggiungere gli altri te stesso!
Siamo quasi arrivati con la personalizzazione dell'aspetto della mappa, ma prima di chiamarla un giorno dovremmo aggiungere alcuni controlli di navigazione.
Google Maps ha 12 aree in cui puoi aggiungere controlli mappa, banner, ecc. Puoi personalizzare completamente queste aree, aggiungendo qualsiasi HTML ecc.
Stiamo per aggiungere un banner personalizzato e la navigazione sul lato destro della mappa.
Per iniziare, prima definire una funzione per creare il menu. Questo estratto di codice è piuttosto lungo ...
// Funzione che crea l'area del pannello di controllo, es. il titolo della mappa e i 2 pulsanti appena sotto di esso. function createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ('div'); controlUI.style.border = '0px bianco fisso'; controlUI.style.margin = '10px'; controlUI.style.paddingTop = '11px'; controlUI.style.paddingBottom = '5px'; controlUI.style.paddingLeft = '0px'; controlUI.style.paddingRight = '0px'; controlUI.style.width = '245px'; controlUI.style.height = '419px'; controlPanelDiv.appendChild (controlUI); // Mappa titolo titleBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = '255px'; titleBar.style.width = '245px'; titleBar.style.marginTop = '0px'; titleBar.style.marginBottom = '0px'; titleBar.style.marginLeft = '0px'; titleBar.style.marginRight = '0px'; titleBar.style.paddingTop = '6px'; titleBar.style.paddingBottom = '2px'; titleBar.style.paddingLeft = '0px'; titleBar.style.paddingRight = '0px'; titleBar.style.borderTopLeftRadius = '5px'; titleBar.style.borderTopRightRadius = '5px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.cssFloat = 'left'; titleBar.innerHTML = '
'; controlUI.appendChild (TitleBar); yellowStripe = document.createElement ('div'); yellowStripe.style.backgroundColor = '# FFFF00'; yellowStripe.style.height = '2px'; yellowStripe.style.width = '245px'; yellowStripe.style.marginTop = '3px'; yellowStripe.style.marginBottom = '3px'; yellowStripe.style.marginLeft = '0px'; yellowStripe.style.marginRight = '0px'; yellowStripe.style.paddingTop = '0px'; yellowStripe.style.paddingBottom = '0px'; yellowStripe.style.paddingLeft = '0px'; yellowStripe.style.paddingRight = '0px'; yellowStripe.style.cssFloat = 'left'; yellowStripe.style.fontFamily = 'Georgia, serif'; yellowStripe.style.fontSize = '14px'; controlUI.appendChild (Yellowstripe); // Pulsante eventi "più piccoli". smallEvents = document.createElement ('div'); smallEvents.style.height = '108px'; smallEvents.style.width = '129px'; smallEvents.style.marginTop = '0px'; smallEvents.style.marginBottom = '0px'; smallEvents.style.marginLeft = '0px'; smallEvents.style.marginRight = '0px'; smallEvents.style.paddingTop = '0px'; smallEvents.style.paddingBottom = '2px'; smallEvents.style.paddingLeft = '0px'; smallEvents.style.paddingRight = '0px'; smallEvents.style.cssFloat = 'left'; smallEvents.innerHTML = '
'; controlUI.appendChild (smallEvents); // Pulsante Umbrella brolly = document.createElement ('div'); brolly.style.height = '149px'; brolly.style.width = '94px'; brolly.style.marginTop = '0px'; brolly.style.marginBottom = '0px'; brolly.style.marginLeft = '0px'; brolly.style.marginRight = '0px'; brolly.style.paddingTop = '0px'; brolly.style.paddingBottom = '2px'; brolly.style.paddingLeft = '0px'; brolly.style.paddingRight = '0px'; brolly.style.cssFloat = 'left'; brolly.innerHTML = '
'; controlUI.appendChild (brolly); Nota rapida sugli stili: il codice sopra utilizza il stile proprietà di un elemento per definire i suoi stili usando JavaScript. Per convertire le proprietà CSS nella loro notazione JavaScript, è sufficiente ricordare che le proprietà che non hanno un trattino rimangono le stesse, mentre quelle con un trattino vengono convertite in camelCase, ad es. background-image diventa backgroundImmagine. L'eccezione è galleggiante, che diventa cssFloat.
Quindi, crea un div per mantenere il menu e aggiungi il menu a questo div chiamando la funzione appena creata nel passaggio 1.
// Crea pannello di controllo (ad es. Titolo del sito e 2 pulsanti) che appare sul lato destro. var controlPanelDiv = document.createElement ('div'); var festivalMapControlPanel = new createControlPanel (controlPanelDiv, festivalMap); Quindi imposta il controlli proprietà della tua mappa per aggiungere il menu alla posizione pertinente, in questo caso RIGHT_TOP.
// Aggiungi il pannello di controllo e il pulsante di ripristino (creato in precedenza) alla mappa. festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .push (controlPanelDiv);
A questo punto dovresti avere qualcosa che assomiglia ad un menu personalizzato visualizzato sul lato destro della tua mappa. Quindi tutto ciò che resta da fare è ottenere il tuo menu per fare qualcosa ...
Nel corso delle prossime esercitazioni otterremo il pulsante Eventi più piccoli per rivelare le foto da Flickr, e il pulsante dell'ombrello per mostrare una sovrapposizione di mappe pluviometriche. (Un cliché, lo so, ma qui otteniamo un bel po 'di pioggia durante i mesi estivi!)
Quindi, per ottenere qualcosa che funzioni in questo tutorial, ho ripetuto i passaggi precedenti per aggiungere anche un pulsante Ripristina al IN BASSO A DESTRA la zona. Ciò include il codice di avvolgimento attorno al pulsante Ripristina per chiamare il handelRequests funzione.
// Funzione che crea il pulsante 'Reser map'. function createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = '5px'; controlUI2.style.margin = '10px'; controlUI2.style.paddingTop = '2px'; controlUI2.style.paddingBottom = '2px'; controlUI2.style.paddingLeft = '2px'; controlUI2.style.paddingRight = '5px'; controlUI2.style.textAlign = 'center'; controlUI2.style.width = '148px'; controlUI2.style.height = '31px'; controlUI2.innerHTML = '
'; resetButtonDiv.appendChild (controlUI2); Il handelRequests la funzione fa alcune cose: dai un'occhiata ai commenti nel codice.
// Funzione chiamata quando si fa clic sui pulsanti "eventi minori", "unbrella" o "reset map". function handelRequests (buttonPressed) if (buttonPressed === "reset") // Reimposta lo zoom, la posizione della mappa e gli z-index dei marker nella loro posizione originale. Chiude anche tutte le infobox attualmente aperte. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // Questa è una funzione che ho creato che chiude tutte le finestre di informazioni che sono aperte. closeAllInfoboxes (); else if (buttonPressed === "small_events") alert ("Questo pulsante farà qualcosa di utile in un tutorial successivo!"); else if (buttonPressed === "rainfall") alert ("Questo pulsante farà qualcosa di utile in un'esercitazione successiva!"); Puoi ottenere una copia completa del file html per questa parte del tutorial dalla parte superiore di questa pagina, o dare un'occhiata all'esempio dal vivo. Solo l'indicatore della mappa di Glastonbury è attivo in questo esempio.
Questo è tutto per questo tutorial! Speriamo che ora abbia qualcosa di funzionante che assomiglia vagamente all'immagine in cima a questa pagina. Se qualcosa non funziona, dai un'occhiata ai file scaricabili disponibili su GitHub. Ho incluso il codice in file separati per ogni parte di questo tutorial, quindi dovresti essere in grado di capire dove è andato tutto storto.
Il prossimo tutorial vedrà come puoi utilizzare l'API di Google Maps per portare in vita le tue mappe (ad esempio una mappa handrawn o storica), rendendole zoomabili e interattive.
Le fotografie utilizzate in questo tutorial sono state rilasciate sotto la licenza Creative Commons.
