Share
Așa cum Richard Tape a început să prezinte în articolele 1 și 2 despre Becoming a SuperstarEngine Expression, EE este un CMS flexibil și ușor de personalizat. Acum că toată lumea înțelege cum funcționează EE, m-am gândit să profit de această ocazie pentru a arăta un exemplu relativ real al lumii de a crea o hartă dinamică Google, alimentată de EE.
Pentru acest exemplu, să presupunem că compania noastră are locații diferite în întreaga SUA și avem sarcina de a crea o hartă Google care să indice toate locațiile și să fie ușor de întreținut. Uitați-vă la demo pentru a vedea ce încercăm să realizăm.
Mai întâi, rețineți că un blog web nu este altceva decât un container de date. De fapt, în EE 2.0, ei schimbă termenul de weblog la canal. Așa că vom crea un blog numit locaţii și un grup de câmpuri personalizate numit locaţii. Cu siguranță nu este o cerință de a le numi aceleași, dar face mai ușor să înțelegi relația.
De fapt, îmi place să creez mai întâi grupul de câmp, deci hai să facem asta, mergând la Admin> Weblog Administration> Custom Weblog Fields. Apoi faceți clic pe butonul verde mare care spune Creați un grup de câmpuri pentru Weblog nou.
introduce locaţii ca Nume grup de câmp și faceți clic pe trimiteți.
După ce faceți clic pe Trimiteți, veți vedea că EE vă spune că nu o puteți utiliza până când nu o asignați la un blog web. Dar, îl vom aloca unui weblog când creăm blogul.
Acum, când grupul nostru de câmp este creat, trebuie să ne gândim la domeniile pe care vrem să le avem în acest domeniu. Următoarele sunt domeniile pe care le consider valabile și proprietățile lor în EE:
Acum, după ce am inventat domeniile noastre, trebuie să creăm domeniile în EE. Deci, mai întâi, dați clic pe Adăugați / editați câmpurile personalizate din înregistrarea Locații. Apoi, faceți clic pe butonul verde mare care spune Creați un nou câmp personalizat.
Acum, aici vom crea câmpurile din EE pe care le-am definit anterior. În primul rând, să începem cu Longitudine camp:
După ce am selectat toate proprietățile potrivite, faceți clic pe trimiteți. Acum este creat câmpul longitudinal.
Acum, că ați văzut cum să creați un câmp, voi merge mai departe și voi crea restul.
Acum că grupul nostru de câmpuri a fost definit, trebuie să creați un blog web și să alocați grupului de câmpuri personalizate pentru Locații. Mai întâi, faceți clic pe Administrarea Weblog pâine prăjită. Apoi faceți clic pe Gestionarea weblog-urilor. În cele din urmă, faceți clic pe butonul verde mare care spune Creați un nou Weblog.
introduce locaţii ca nume Weblog complet și locații ca nume scurt. Selectați da pentru Modificări preferințe de grup și se va afișa o nouă secțiune. Aici alegem locaţii ca grup de câmp.
Odată ce toate setările au fost selectate, faceți clic pe trimiteți, iar blogul Web Locații este creat.
Acum asta locaţii este creat un blog web, putem începe să accesăm locațiile. Treceți cursorul peste fila Editare și faceți clic pe locaţii.
Campurile Titlu, Adresă și Descriere sunt destul de explicative, dar câmpurile URL Titlu, Longitudine, Latitudine și Foto pot avea nevoie de o mică explicație.
Câmpul URL al titlului este umplut automat când introduceți titlul. Titlul adresei URL înlocuiește spațiile cu subliniere și face textul cu litere mici. Pentru această situație, nu o vom folosi. Există o modalitate de ao ascunde, dar nu voi trece prin asta chiar acum.
Sunt sigur că toată lumea știe ce longitudine și latitudine există, dar întrebarea este: cum o determinați de la o adresă? Utilizând un site terț cum ar fi Map Builder. Acest site vă permite să introduceți o adresă și returnează longitudinea și latitudinea.
Dacă am avea o fotografie a locației, o putem include în momentul în care se face clic pe punctul de plotare. Încărcarea imaginilor în EE poate fi puțin confuză, deci hai să mergem prin ea.
Mai întâi, faceți clic pe Incarca fisier care este situat sub butonul de trimitere. Va apărea o fereastră pop-up.
Căutați fișierul pe computer și faceți clic pe Trimiteți.
Poți să redimensionezi fotografia după ce ai încărcat-o făcând clic pe butonul Redimensionare imagine, dar mi-am dimensionat imaginea înainte de ao încărca, așa că nu o să demonstrez acea parte. Vrem să selectăm Doar URL-ul pentru tipul și tipul fișierului Fotografie pentru locația imaginii.
Odată ce ați selectat opțiunile, faceți clic pe Poziționați imaginea și închideți fereastra. Acest lucru vă va popula acum Fotografie câmpul cu locația imaginii dvs..
Dacă un utilizator încarcă o fotografie a locației, vrem să introducă înălțimea și lățimea imaginii. Dacă nu, imaginea va ieși din bulele de informații din cauza modului în care Google Maps calculează dimensiunea bulei. Este suficient de simplu să adăugați lățimea și înălțimea pentru a rezolva această problemă, așa că am adăugat că în.
Dacă vrem să introducem o descriere scurtă care să fie afișată în bule când se face clic pe punctul de plotare, acesta este locul în care îl veți introduce. Acest câmp acceptă în mod implicit formatarea HTML.
Acum, că am introdus toate datele noastre, putem trimite formularul și locația va fi publicată.
Apoi repetați acest proces pentru intrările suplimentare.
În primul rând, trebuie să creați un nou grup de șabloane pentru harta locațiilor făcând clic pe Template-uri tab. Apoi, faceți clic pe butonul verde mare care spune Creați un nou grup de șabloane.
Apoi, intrați locații în câmpul Nume grup de șabloane și faceți clic pe Trimiteți. Grupul nostru de șabloane a fost creat acum.
În timp ce suntem aici, să facem un alt grup de șabloane chemat script-uri.
Apoi, selectați grupul șablon de locații din coloana din stânga și faceți clic pe index. Acum putem începe să construim șablonul nostru. Veți fi prezentat cu o cutie goală, aici veți adăuga tot codul.
Acum, tot ce trebuie să faceți este să introduceți codul nostru și faceți clic pe actualizare, iar șablonul nostru este actualizat.
Pentru a utiliza API-ul Google Maps, trebuie să vă înscrieți pentru o cheie API pentru site-ul dvs. Odată ce vă înscrieți, vi se va oferi cheia API, pe care o utilizați când includeți JavaScript pe pagină. Să începem cu o pagină simplă și să includem codul Google Maps:
locaţii
Notă: ABQIAAAAGbpRl2XCyCtoHtEtVLA9mhT9xvUTfY2sa86RDF1pWLQtRVPGPxQD1aEASfi1xtt39RqVCDd8ib1hGw este valoarea cheii API-ului Google Maps pentru site-ul meu. Va trebui să actualizați acest lucru cu ajutorul cheii proprii.
Odată ce acest cod a fost introdus în textarea, faceți clic pe Actualizare pentru a salva șablonul. Apoi, dacă faceți clic pe butonul verde mare care spune Vizualizare șablon redat, vom vedea ce va arata pagina.
Apoi, trebuie să adăugăm o div care va conține de fapt harta.
locaţii Trebuie să aveți JavaScript activat pentru a vizualiza această hartă.
Notă: Tocmai am adăugat mesajul despre necesitatea JavaScript pentru utilizatorii care nu au activat JavaScript, dar cu siguranță puteți afișa lista de locații în loc de acest mesaj.
Trebuie să definim înălțimea și lățimea div care va conține hărțile, deci pentru acest exemplu, voi folosi doar câteva CSS pe pagină.
locaţii Trebuie să aveți JavaScript activat pentru a vizualiza această hartă.
Acesta este tot HTML-ul de care avem nevoie pentru ca harta noastră să apară, așa că odată ce ați introdus codul, faceți clic pe Actualizare și terminat, și suntem luați înapoi la secțiunea principale șabloane. Apoi, vom codifica JavaScript pentru a adăuga punctele pe hartă.
Selectați scripturi din coloana din stânga și faceți clic pe Nou șablon. introduce Hartă ca nume de șablon și selectați JavaScript din meniul drop-down Template Type, apoi faceți clic pe A depune.
Noul șablon pe care l-am numit Hartă a fost creată acum. Deci, faceți clic pe Hartă, și să nu editați șablonul.
Lucrul minunat despre EE este că putem introduce codul EE în șabloanele JS și CSS și va procesa acel cod. Pentru a face acest lucru, trebuie să adăugăm o variabilă config ascunsă în fișierul config.php care se află în dosarul de sistem. Deci, deschideți fișierul config.php și introduceți următoarele: $ conf ['protect_javascript'] = 'n';. Apoi încărcați-l, iar etichetele EE vor fi procesate în cod JS.
Notă: Voi folosi JavaScript simplu pentru acest exemplu, dar ați putea modifica cu ușurință unele coduri pentru a utiliza cadrul dvs. de alegere.
În primul rând, vom începe să creăm o funcție care va adăuga punctele de pe hartă:
Accentsconagua
funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); Prima linie specifică folosirea elementului cu un id de Hartă pentru a crea harta. Următoarea linie stabilește centrul hărții la latitudinea și longitudinea specificată, apoi stabilește nivelul de zoom. Acestea sunt doar valori arbitrare pentru acest exemplu, deci va trebui cel mai probabil să vă ajustați. Linia finală stabilește comenzile de pe hartă, adică zoom, mutare, tip de hartă, etc.
Acum, dorim să accesăm datele pe care le-am introdus în EE utilizând exp: weblog: tags entry:
funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: intrări weblog = "locații" disable = "categorii | category_fields | member_data | paginare | trackbacks if count == 1 var points = new Array (total_results); / if / exp: weblog: înregistrări Deci, acest cod spune că "interoghează" locații weblog, și dezactivați parametrii suplimentari pe care nu le vom folosi. Acesta este un obicei bun pentru a intra, deoarece poate îmbunătăți performanța.
Există câteva variabile EE pe care le folosim pe care va trebui să le explic: numărul și rezultatul total. numara este exact ceea ce sună: indică doar numărul înregistrării curente la care suntem. TOTAL_RESULTS indică numărul total de înregistrări returnate.
Deci, dacă numărul este egal cu 1, aceasta este prima dată prin buclă, deci inițializăm matricea noastră care va avea o dimensiune a numărului total de înregistrări returnate.
Apoi, vrem să luăm de fapt datele și să le scoatem în buclă. Notă: Voi adăuga pauze de linie la acest cod doar pentru lizibilitate, dar în timpul utilizării în producție, pauzele de linie trebuie eliminate.
funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: intrări weblog = "locații" disable = "categorii | category_fields | member_data | paginare | trackbacks if count == 1 var points = new Array (total_results); / if puncte [count] = [locations_latitude, locations_longitude, " titlu
if locations_photo && locations_photo_width && locations_photo_height 
/dacă Locations_address
if locations_description locations_description / if „]; / exp: weblog: înregistrări Poate arata mult, asa ca sa trecem prin ea cu bucata.
punctele [count] = [locations_latitude, locations_longitude,
Aici adăugăm o matrice la matricea punctelor noastre. În această matrice, vom adăuga latitudinea, longitudinea și informațiile care trebuie afișate în bule de informații. Observați cum locations_latitude și locations_longitude se potrivesc cu valorile pe care le-am adăugat pentru numele câmpurilor din grupul nostru de câmpuri personalizate.
'„];titlu
În acest fragment, adăugăm doar div și titlul care a fost introdus în EE.
if locations_photo && locations_photo_width && locations_photo_height
În această piesă, verificăm dacă a fost introdusă o valoare în câmpurile fotografiei, lățimea fotografiei și înălțimea fotografiilor. Dacă există, adăugăm fotografia în balonul nostru de informații.
Locations_address
if locations_description locations_description / if
În cele din urmă, adăugăm adresa la bulele de informații, iar dacă a fost introdusă o descriere, adăugăm și ea. Aici este acea linie întreagă fără nicio rupere de linie:
punctele [count] = [locations_latitude, locations_longitude, "„];titlu
if locations_photo && locations_photo_width && locations_photo_heightLocations_address
if locations_description locations_description / if
Pentru a termina funcția, trebuie doar să cuplați prin matrice și să adăugați pe hartă punctele de plot și ascultătorii de evenimente:
/dacă funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: intrări weblog = "locații" disable = "categorii | category_fields | member_data | paginare | trackbacks if count == 1 var points = new Array (total_results); / if puncte [count] = [locations_latitude, locations_longitude, "titlu
if locations_photo && locations_photo_width && locations_photo_height/dacăLocations_address
if locations_description locations_description / if„]; / exp: weblog: intrări pentru (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); Așadar, ne creează punctul și trece în latitudine și longitudine. Apoi, creăm o variabilă care conține toate informațiile pentru bulele de informații. Apoi, sunăm o funcție personalizată pe care o voi defini într-un minut și care va trece în textul cu bule și informații. În final, adăugăm marcatorul pe hartă.
Aici este funcția personalizată care creează marker-ul:
funcția createMarker (punct, overlayText) var marker = GMarker nou (punct); GEvent.addListener (marker, "click", functie () marker.openInfoWindowHtml (overlayText);); marcator de returnare;
Așadar, vom crea un marker bazat pe punctul nostru de pe hartă, apoi adăugăm un ascultător al evenimentului care va deschide bulele de informații cu textul corespunzător când este apăsat.
Deci asta este destul de mult. Deși, voi adăuga încă o funcție care va spune funcției JS să ruleze după ce domul a fost încărcat:
funcția addLoadEvent (func) var oldonload = window.onload; dacă (typeof window.onload! = 'funcția') window.onload = func; altfel window.onload = function () if (oldonload) oldonload (); func (); addLoadEvent (populateMap);
Am citit mai întâi despre această funcție de la Simon Willison. Puteți înlocui din nou acest cod cu codul pentru orice bibliotecă JS pe care o utilizați.
Iată JS-ul complet pentru șablonul respectiv:
funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: intrări weblog = "locații" disable = "categorii | category_fields | member_data | paginare | trackbacks if count == 1 var points = new Array (total_results); / if puncte [count] = [locations_latitude, locations_longitude, "titlu
if locations_photo && locations_photo_width && locations_photo_height/dacăLocations_address
if locations_description locations_description / if„]; / exp: weblog: intrări pentru (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); Odată ce ați adăugat tot codul, faceți clic pe Actualizare și terminat pentru a reveni la pagina principală a șabloanelor. Apoi, trebuie să ne întoarcem la grupul de șabloane pentru locații și să editați șablonul de index.
Trebuie să includeți șablonul JS pe care tocmai l-am creat în capul documentului:
Folosesc variabila de cale pentru a face legătura cu șablonul JS.
Deci, acum, când ne întoarcem și vizualizăm șablonul de locații din browser, este posibil să apară o eroare JS. Dacă a fost introdusă o descriere a locației, este posibil să se adauge niște linii noi la cod, astfel încât aceasta va rupe șirul în JS. Deci, soluția este de a elimina într-un fel aceste linii noi.
Din fericire, există un plugin pentru EE numit Găsire și înlocuire care ne va permite să le înlocuim pe toate \ n cu nimic.
Deci, navigați la Admin> Utilities> Plugin Manager și găsiți plugin-ul în coloana din dreapta. Când o găsiți, faceți clic pe instalare, și asta-i tot.
Acum, putem folosi plugin-ul în codul nostru. Așa că mergeți înapoi și editați șablonul de hartă în grupul de șabloane al scripturilor și înlocuiți-l pe acesta:
if locations_description locations_description / if
Cu asta:
if locations_description exp: înlocuire find = "\ n" multiple = "da" regex = "da" locations_description / exp:
Această funcție se referă doar la înlocuirea tuturor liniilor noi cu nimic. Bineînțeles că vrem să eliminăm toate pauzele de linie din cod, deci aici este JS complet actualizat:
funcția populateMap () var map = nou GMap2 (document.getElementById ("hartă")); map.setCenter (noul GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: intrări weblog = "locații" disable = "categorii | category_fields | member_data | paginare | trackbacks if count == 1 var points = new Array (total_results); / if puncte [count] = [locations_latitude, locations_longitude, "titlu
if locations_photo && locations_photo_width && locations_photo_height/dacăLocations_address
if locations_description exp: înlocuire find = "\ n" multiple = "da" regex = "da" locations_description / exp:„]; / exp: weblog: intrări pentru (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); Asta e! Acum, puteți vedea șablonul nostru în browser și puteți vedea harta Google Maps. De asemenea, puteți vedea demo-ul meu.
