Share
Come Richard Tape ha iniziato a mostrare nella sua parte 1 e parte 2 articoli su Diventare un ExpressionEngine Superstar, EE è un CMS flessibile e facile da personalizzare. Ora che tutti hanno una certa comprensione di come funziona EE, ho pensato di cogliere l'occasione per mostrare un esempio relativamente reale di creazione di una mappa dinamica di Google powered by EE.
Per questo esempio, supponiamo che la nostra azienda abbia varie sedi negli Stati Uniti e che abbiamo il compito di creare una mappa di Google che mostri tutte le posizioni e sia facile da mantenere. Dai un'occhiata alla demo per vedere cosa stiamo cercando di realizzare.
Innanzitutto, ricorda che un weblog non è altro che un semplice contenitore di dati. In realtà, in EE 2.0, stanno cambiando il termine weblog per canale. Quindi creeremo un weblog chiamato sedi e un gruppo di campi personalizzato chiamato sedi. Non è assolutamente necessario che siano nominati uguali, ma semplifica la comprensione della relazione.
In realtà mi piace creare il gruppo di campi per primo, quindi facciamolo andando su Admin> Weblog Administration> Custom Weblog Fields. Quindi fare clic sul grande pulsante verde che dice Crea un nuovo gruppo di campi weblog.
accedere sedi come Nome del gruppo di campi e fare clic su Invia.
Dopo aver fatto clic su Invia, vedrai che EE ti dice che non puoi usarlo finché non lo assegni a un weblog. Ma lo assegneremo a un weblog quando creeremo il weblog.
Ora che il nostro gruppo di campi è stato creato, dobbiamo pensare ai campi reali che vogliamo avere in esso. I seguenti sono i campi che ritengo adatti e le loro proprietà in EE:
Ora che abbiamo mappato i nostri campi, dobbiamo creare i campi in EE. Quindi, per prima cosa, fai clic su Aggiungi / modifica campi personalizzati nel record Posizioni. Quindi, fai clic sul grande pulsante verde che dice Crea un nuovo campo personalizzato.
Ora qui è dove creiamo i campi in EE che abbiamo definito in precedenza. Innanzitutto, iniziamo con Longitudine campo:
Una volta selezionate tutte le proprietà appropriate, fai clic su Invia. Ora, il campo Longitudine è stato creato.
Ora che hai visto come creare un campo, andrò avanti e creerò il resto.
Ora che il nostro gruppo di campi è stato definito, dobbiamo creare il nostro weblog e assegnargli il gruppo di campi personalizzati Locations. Innanzitutto, fai clic su Amministrazione del blog briciole di pane. Quindi fare clic su Gestione del weblog. Infine, fai clic sul grande pulsante verde che dice Crea un nuovo weblog.
accedere sedi come il nome completo del weblog e posizioni come il nome breve. Selezionare sì per Modifica preferenze di gruppo e verrà visualizzata una nuova sezione. Questo è dove selezioniamo sedi come il gruppo di campi.
Una volta selezionate tutte le impostazioni, fare clic su Invia e viene creato il weblog Località.
Ora che il nostro sedi il weblog è stato creato, possiamo iniziare a inserire le posizioni. Passa con il mouse sopra la scheda Pubblica e fai clic su sedi.
I campi Titolo, Indirizzo e Descrizione sono piuttosto auto-esplicativi, ma i campi Titolo, Longitudine, Latitudine e Foto possono richiedere una piccola spiegazione.
Il campo Titolo URL viene compilato automaticamente quando si inserisce il titolo. Il titolo dell'URL sostituisce gli spazi con caratteri di sottolineatura e rende il testo in minuscolo. Per questa determinata situazione, non lo useremo. C'è un modo per nasconderlo, ma non ho intenzione di farlo subito.
Sono sicuro che tutti sanno quale sia la longitudine e la latitudine, ma la domanda è: come lo si determina da un indirizzo? Utilizzando un sito di terze parti come Map Builder. Questo sito ti consente di inserire un indirizzo e restituisce la longitudine e la latitudine.
Se avessimo una foto della posizione, possiamo includerla quando si fa clic sul punto della trama. Caricare le immagini in EE può essere un po 'confuso, quindi passiamo oltre.
Innanzitutto, fai clic su Caricare un file collegamento che si trova sotto il pulsante di invio. Apparirà una finestra pop-up.
Cerca il file sul tuo computer e fai clic su Invia.
Puoi ridimensionare la foto dopo averla caricata facendo clic sul pulsante Ridimensiona immagine, ma ho ridimensionato la mia immagine prima di caricarla, quindi non demo quella parte. Vogliamo selezionare Solo URL per il tipo di file e Foto per la posizione dell'immagine.
Una volta selezionate le nostre opzioni, fare clic su Posiziona immagine e chiudi la finestra. Questo ora popolerà il tuo Foto campo con la posizione della tua immagine.
Se un utente carica una foto della posizione, vogliamo che inseriscano l'altezza e la larghezza dell'immagine. In caso contrario, l'immagine uscirà dalla bolla informativa a causa del modo in cui Google Maps calcola la dimensione della bolla. È abbastanza semplice aggiungere la larghezza e l'altezza per risolvere questo problema, quindi l'abbiamo aggiunto.
Se vogliamo inserire una breve descrizione da visualizzare nella bolla quando viene cliccato il punto della trama, questo è dove lo inserireste. Questo campo supporta la formattazione HTML per impostazione predefinita.
Ora che abbiamo inserito tutti i nostri dati, possiamo inviare il modulo e il luogo sarà pubblicato.
Quindi, basta ripetere questo processo per le voci aggiuntive.
Innanzitutto, dobbiamo creare un nuovo gruppo di modelli per la nostra mappa delle posizioni facendo clic su Modelli scheda. Quindi, fai clic sul grande pulsante verde che dice Crea un nuovo gruppo di modelli.
Quindi, inserisci posizioni nel campo Nome del gruppo di modelli e fare clic su Invia. Il nostro gruppo di modelli è ora stato creato.
Mentre siamo qui, facciamo un altro gruppo di template chiamato script.
Quindi, seleziona il gruppo di modelli posizioni dalla colonna a sinistra e fai clic su indice. Ora possiamo iniziare a costruire il nostro modello. Ti verrà presentato con quello che è solo una scatola vuota, questo è dove si aggiungerà tutto il codice.
Ora tutto ciò che dobbiamo fare è inserire il nostro codice e fare clic su Aggiorna, e il nostro modello è aggiornato.
Per poter utilizzare l'API di Google Maps, devi registrare una chiave API per il tuo sito. Una volta effettuato l'accesso, ti verrà fornita la chiave API, che utilizzerai quando includi il JavaScript nella pagina. Iniziamo con una semplice pagina e includiamo il nostro codice di Google Maps:
sedi
Nota: ABQIAAAAGbpRl2XCyCtoHtEtVLA9mhT9xvUTfY2sa86RDF1pWLQtRVPGPxQD1aEASfi1xtt39RqVCDd8ib1hGw è il valore della chiave API di Google Maps per il mio sito. Dovrai aggiornarlo con la tua chiave.
Una volta che questo codice è stato inserito in textarea, è sufficiente fare clic su Aggiorna per salvare il modello. Quindi, se fai clic sul grande pulsante verde che dice Visualizza il modello di rendering, vedremo come sarà la pagina.
Successivamente, dobbiamo aggiungere un div che contenga effettivamente la mappa.
sedi È necessario avere JavaScript abilitato per visualizzare questa mappa.
Nota: ho appena aggiunto il messaggio relativo alla necessità di JavaScript per gli utenti che non hanno JavaScript abilitato, ma potresti sicuramente pubblicare l'elenco di posizioni al posto di questo messaggio.
Abbiamo bisogno di definire l'altezza e la larghezza del div che conterrà la mappa, quindi per questo esempio, userò del CSS nella pagina.
sedi È necessario avere JavaScript abilitato per visualizzare questa mappa.
Questo è tutto il codice HTML di cui abbiamo bisogno per visualizzare la nostra mappa, quindi una volta inserito il codice, fare clic Aggiorna e finito, e siamo riportati alla sezione dei modelli principali. Successivamente, codificheremo il codice JavaScript per aggiungere i punti alla mappa.
Seleziona gli script dalla colonna a sinistra e clicca su Nuovo modello. accedere carta geografica come nome del modello e selezionare JavaScript dal menu a discesa Tipo di modello, quindi fare clic su Sottoscrivi.
Il nostro nuovo modello chiamato carta geografica ora è stato creato. Quindi clicca su carta geografica, e non modificare il modello.
La cosa interessante di EE è che possiamo inserire il codice EE nei modelli JS e CSS e elaborerà quel codice. Per fare ciò, dobbiamo aggiungere una variabile di configurazione nascosta al nostro file config.php che si trova nella cartella di sistema. Quindi apri il tuo file config.php e inserisci quanto segue: $ conf ['protect_javascript'] = 'n';. Quindi caricalo e i tag EE verranno elaborati nel codice JS.
Nota: per questo esempio utilizzerò semplicemente JavaScript vecchio, ma è possibile modificare facilmente del codice per utilizzare il framework scelto.
Innanzitutto, inizieremo a creare una funzione che aggiungerà i punti di trama alla mappa:
Accentsconagua
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); La prima riga sta specificando di usare l'elemento con un id di carta geografica per creare la mappa. La riga successiva imposta il centro della mappa sulla latitudine e longitudine specificata, quindi imposta il livello di zoom. Questi sono solo valori arbitrari per questo esempio, quindi molto probabilmente dovrai adeguarti. La linea finale imposta i controlli sulla mappa, ad esempio zoom, spostamento, tipo di mappa, ecc.
Ora, vogliamo accedere ai dati che abbiamo inserito in EE usando il tag exp: weblog: entries:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categorie | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if / exp: weblog: entries Quindi questo codice sta dicendo di "interrogare" il locazioni weblog, e disabilita parametri aggiuntivi che non useremo. Questa è una buona abitudine da prendere perché può migliorare le prestazioni.
Ci sono alcune variabili EE che stiamo usando che dovrò spiegare: count e total_results. contare è esattamente ciò che sembra: indica solo il numero del record corrente su cui ci troviamo. TOTAL_RESULTS indica quanti record totali verranno restituiti.
Quindi, se il conteggio è uguale a 1, questa è la prima volta attraverso il ciclo, quindi inizializziamo il nostro array che avrà una dimensione del numero totale di record restituiti.
Successivamente, vogliamo effettivamente prendere i dati e inviarli nel ciclo. Nota: aggiungo interruzioni di riga a questo codice solo per la leggibilità, ma nell'uso in produzione, è necessario rimuovere le interruzioni di riga.
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categorie | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if points [count] = [locations_latitude, locations_longitude, ' titolo
if locations_photo && locations_photo_width && locations_photo_height 
/Se Locations_address
if locations_description locations_description / if ']; / exp: weblog: entries Potrebbe sembrare molto, quindi analizziamolo pezzo per pezzo.
points [count] = [locations_latitude, locations_longitude,
Qui, stiamo aggiungendo una matrice al nostro array di punti. In questo array, aggiungeremo la latitudine, la longitudine e le informazioni da visualizzare nel fumetto informativo. Nota come locations_latitude e locations_longitude abbinare con i valori che abbiamo aggiunto per i nomi dei campi nel nostro gruppo di campi personalizzati.
''];titolo
In questo frammento, stiamo semplicemente aggiungendo un div e il titolo che è stato inserito in EE.
if locations_photo && locations_photo_width && locations_photo_height
In questo pezzo, stiamo verificando se ci fosse un valore inserito nei campi foto, larghezza foto e altezza foto. Se c'era, aggiungiamo la foto alla nostra bolla informativa.
Locations_address
if locations_description locations_description / if
Infine, aggiungiamo l'indirizzo al fumetto informativo e, se è stata inserita una descrizione, aggiungiamo anche quella. Ecco l'intera riga senza interruzioni di riga:
points [count] = [locations_latitude, locations_longitude, ''];titolo
if locations_photo && locations_photo_width && locations_photo_heightLocations_address
if locations_description locations_description / if
Per completare la funzione, è sufficiente scorrere l'array e aggiungere i punti di trama e gli ascoltatori di eventi alla mappa:
/Se function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categorie | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if points [count] = [locations_latitude, locations_longitude, 'titolo
if locations_photo && locations_photo_width && locations_photo_height/Se Locations_address
if locations_description locations_description / if']; / exp: weblog: entries per (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); Quindi stiamo creando il nostro punto e passando nella latitudine e longitudine. Quindi, stiamo creando una variabile che contiene tutte le informazioni per il fumetto informativo. Successivamente, chiameremo una funzione personalizzata che definirò in un minuto e che passerà nel testo del punto e delle informazioni. Infine, stiamo aggiungendo il marker alla mappa.
Ecco la nostra funzione personalizzata che sta creando il marcatore:
function createMarker (point, overlayText) var marker = new GMarker (punto); GEvent.addListener (marker, "click", function () marker.openInfoWindowHtml (overlayText);); indicatore di ritorno;
Quindi stiamo creando un marker basato sul nostro punto sulla mappa, quindi aggiungendo un listener di eventi che aprirà il fumetto informativo con il testo appropriato quando viene cliccato.
Quindi è più o meno così. Sebbene, aggiungerò un'altra funzione che dirà alla funzione JS di essere eseguita una volta che il dom è stato caricato:
function addLoadEvent (func) var oldonload = window.onload; if (typeof window.onload! = 'function') window.onload = func; else window.onload = function () if (oldonload) oldonload (); func (); addLoadEvent (populateMap);
Ho letto per la prima volta questa funzione di Simon Willison. È possibile sostituire nuovamente questo codice con il codice per qualsiasi libreria JS che si sta utilizzando.
Ecco il JS completo per quel modello:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categorie | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if points [count] = [locations_latitude, locations_longitude, 'titolo
if locations_photo && locations_photo_width && locations_photo_height/Se Locations_address
if locations_description locations_description / if']; / exp: weblog: entries per (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); function createMarker(point, overlayText) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() marker.openInfoWindowHtml(overlayText);); return marker; function addLoadEvent(func) var oldonload = window.onload; if (typeof window.onload != 'function') window.onload = func; else window.onload = function() if (oldonload) oldonload(); func(); addLoadEvent(populateMap); Una volta aggiunto tutto il codice, fare clic su Aggiorna e finito da restituire alla pagina principale dei modelli. Successivamente, dobbiamo tornare al gruppo di modelli di posizioni e modificare il modello di indice.
Dobbiamo includere il modello JS che abbiamo appena creato nella testa del documento:
Sto usando la variabile path per collegarmi al template JS.
Pertanto, quando torniamo indietro e visualizziamo il modello delle posizioni nel browser, potresti visualizzare un errore JS. Se è stata inserita una descrizione della posizione, è possibile aggiungere alcune nuove linee al codice, quindi questo interromperà la stringa nel JS. Quindi la soluzione è in qualche modo rimuovere quelle nuove linee.
Fortunatamente, c'è un plugin per EE chiamato Trova e sostituisci che ci permetterà di sostituire tutto \ n con niente.
Quindi vai su Admin> Utilità> Plugin Manager e trova il plugin nella colonna di destra. Quando lo trovi, fai clic su Installa, e il gioco è fatto.
Ora, possiamo usare il plugin nel nostro codice. Quindi torna indietro e modifica il modello di mappa nel nostro gruppo di modelli di script e sostituisci questo:
if locations_description locations_description / if
Con questo:
if locations_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if
In pratica, questa funzione sta semplicemente dicendo di sostituire tutte le nuove linee con niente. Ovviamente vogliamo rimuovere tutte le interruzioni di riga dal codice, quindi ecco il JS completo aggiornato:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categorie | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if points [count] = [locations_latitude, locations_longitude, 'titolo
if locations_photo && locations_photo_width && locations_photo_height/Se Locations_address
if locations_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if']; / exp: weblog: entries per (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); function createMarker(point, overlayText) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() marker.openInfoWindowHtml(overlayText);); return marker; function addLoadEvent(func) var oldonload = window.onload; if (typeof window.onload != 'function') window.onload = func; else window.onload = function() if (oldonload) oldonload(); func(); addLoadEvent(populateMap); Questo è tutto! Ora possiamo visualizzare il nostro modello nel browser e vedere la nostra Google Map con tecnologia EE. Puoi anche vedere la mia demo.
