Scarica MMAP in formato PDF Gratuito

Ciao ragazzi, bentornati! Nell'ultimo video abbiamo aggiunto alcune funzionalità interessanti di Leaflet, come la scala nella vista mappa a schermo intero e anche la funzione di visualizzazione delle coordinate della mappa. In questo video, aggiungerò un'altra funzione chiamata funzionalità di stampa della mappa. Per questo, voglio semplicemente aggiungere un pulsante qui, quindi il nome del pulsante potrebbe essere "pulsante con classe" forse "stampa mappa" e poi aggiungerò il testo "stampa mappa". Ok, ora puoi vedere il pulsante "stampa mappa", ma non fa nulla. Quindi, stiamo per aggiungere questa funzionalità qui. Per fare ciò, quando clicco su questo, in jQuery possiamo selezionare l'elemento usando il nome della classe con la funzione dot, forse "stampa mappa". Sì, qui abbiamo selezionato questo pulsante e poi "stampa mappa.click" possiamo trovare questa funzione di clic e poi ciò che dovrebbe fare è che quando clicchiamo sul pulsante "stampa mappa", dovrebbe stampare "window.print". Ok, questo significa che è la funzione predefinita di JavaScript, quindi possiamo semplicemente stampare la nostra mappa quando clicchiamo sulla funzione "stampa mappa". Proviamo. Sì, ora funziona, ora possiamo stampare una mappa, ma a causa delle dimensioni della mappa nella nostra dimensione dello schermo, non è reattiva. Questo significa che appare nella seconda pagina e vediamo tutto all'interno della mappa e anche la mappa non è reattiva, tocca i bordi, quindi non è un buon comportamento, ma l'abbiamo implementato in qualche modo. Per questa funzionalità di stampa, in realtà abbiamo un bel plugin chiamato "leaflet-browser-print", quindi forse dobbiamo usare questo qui. Sì, quindi sto per usare questo plugin. Per farlo, scaricherò semplicemente il codice usando Git oppure puoi semplicemente scaricare il file zip da qui, va bene anche questo. Tornerò alla cartella di download e sì, ora è scaricato. Se vado nella directory "leaflet-browser-print", significa che ho già scaricato questo file, quindi dobbiamo leggere un po' di documentazione su come implementare questo plugin. Per farlo, dobbiamo aggiungere questo "browserprint.min.js" nel nostro codice, quindi lo copierò manualmente da qui. Ok, all'interno di questo abbiamo questa funzione principale e copierò questo file e poi lo incollerò nella cartella. Scusate, creerò una directory chiamata "leaf" e poi lo incollerò qui. Quindi ora posso importare questa libreria. Dopo jQuery, importerò questo script src e poi "./leaf" e poi "browserprint.min.js", qualcosa del genere. Dopo aver importato questo, ciò che dobbiamo fare è passare questa funzione, quindi qui "control.browser.print" per la mappa. Ok, facciamolo qui. Ok, stampa mappa. Sì, forse copierò questo e poi lo incollerò qui. Ok, ora aggiungerà automaticamente la nostra icona di stampa e poi possiamo semplicemente stampare la nostra mappa. Se ci sono diverse opzioni, possiamo semplicemente selezionare la dimensione della carta, se è in verticale o orizzontale o personalizzata, forse proverò prima "auto". Sì, non sta rispondendo bene, importato. Sì, è venuto bene. Quindi...