Share
Som Richard Tape har begynt å vise i sin del 1 og del 2 artikler om Becoming an ExpressionEngine Superstar, EE er en fleksibel og lett å tilpasse CMS. Nå som alle har en viss forståelse for hvordan EE fungerer, trodde jeg at jeg ville benytte anledningen til å vise et relativt ekte verdens eksempel på å skape en dynamisk Google Map drevet av EE.
For dette eksempelet, må vi anta at vårt firma har forskjellige steder i hele USA, og vi har til oppgave å skape et Google Map som viser alle steder og er lett å vedlikeholde. Ta en titt på demoen for å se hva vi prøver å oppnå.
Først husk at en weblog ikke er noe mer enn bare en databeholder. Faktisk, i EE 2.0, endrer de begrepet weblog til kanal. Så vi skal lage en weblog som heter steder og en egendefinert feltgruppe kalt steder. Det er absolutt ikke et krav om at de blir navngitt, men det gjør det bare lettere å forstå forholdet.
Jeg liker faktisk å lage feltgruppen først, så la oss gjøre det ved å gå til Admin> Weblog administrasjon> Tilpassede weblogfelt. Deretter klikker du på den store grønne knappen som sier Opprett en ny weblogfeltgruppe.
Tast inn steder som feltgruppe navn og klikk send.
Når du klikker på send, ser du at EE forteller deg at du ikke kan bruke den til du tilordner den til en weblog. Men vi vil tildele den til en blogg når vi lager bloggen.
Nå som vår feltgruppe er opprettet, må vi tenke på de aktuelle feltene vi vil ha i den. Følgende er feltene som jeg synes passer, og deres egenskaper i EE:
Nå som vi har kartlagt feltene våre, må vi lage feltene i EE. Først klikker du på Legg til / Rediger egendefinerte felt i Steder-posten. Deretter klikker du på den store grønne knappen som sier Opprett et nytt tilpasset felt.
Nå er her hvor vi lager feltene i EE som vi tidligere definerte. Først, la oss starte med lengde~~POS=TRUNC felt:
Når vi har valgt alle de aktuelle egenskapene, klikker du på Send. Nå er feltet Lengdegrad opprettet.
Nå som du har sett hvordan du lager et felt, skal jeg bare gå videre og skape resten.
Nå som vår feltgruppe er definert, må vi opprette vår blogg og tilordne den tilpassede feltgruppen for Locations til den. Først klikker du på Weblog administrasjon brødsmule. Klikk deretter på Weblog Management. Til slutt klikker du på den store grønne knappen som sier Lag en ny weblogg.
Tast inn steder som Full Weblog Name og steder som kortnavnet. Å velge Ja for Rediger gruppeinnstillinger, og en ny seksjon vil dukke opp. Dette er hvor vi velger steder som feltgruppe.
Når alle innstillingene er valgt, klikker du på send, og webloggen for Locations er opprettet.
Nå som vår steder webloggen er opprettet, vi kan begynne å skrive inn stedene. Hold musepekeren over Publiser-fanen og klikk på steder.
Tittel-, adresse- og beskrivelse-feltene er ganske selvforklarende, men URL-tittle-, lengde-, bredde- og bildefeltene kan trenge en liten forklaring.
Nettstedet Tittel Tittel er automatisk befolket når du skriver inn Tittelen. Nettstedet Tittel erstatter mellomrom med underskrifter og gjør teksten små bokstaver. For denne bestemte situasjonen skal vi ikke bruke den. Det er en måte å skjule det på, men jeg kommer ikke til å gå gjennom det akkurat nå.
Jeg er sikker på at alle vet hva lengdegrad og breddegrad er, men spørsmålet er: hvordan bestemmer du det fra en adresse? Ved å bruke et tredjeparts nettsted som Map Builder. Dette nettstedet lar deg legge inn en adresse, og den returnerer lengdegrad og breddegrad.
Hvis vi hadde et bilde av stedet, kan vi inkludere det når plottepunktet klikkes. Opplasting av bilder i EE kan være litt forvirrende, så la oss gå gjennom det.
Først klikker du på Last opp fil lenke som ligger under innleveringsknappen. Et popup-vindu vil komme opp.
Bla etter filen på datamaskinen din, og klikk på Send.
Du kan endre størrelsen på bildet etter å ha lastet det opp ved å klikke på knappen Endre størrelse på bildet, men jeg har formatet bildet mitt før du laster opp, så jeg vil ikke demo den delen. Vi ønsker å velge Bare URL for filtypen og Bilde for bildeplasseringen.
Når alternativene våre er valgt, klikker du på Legg bilde og lukk vindu. Dette vil nå fylle din Bilde feltet med plasseringen av bildet ditt.
Hvis en bruker laster opp et bilde av stedet, vil vi at de skal legge inn bildehøyde og bredde. Hvis de ikke gjør det, vil bildet bryte ut av informasjonsboblen på grunn av hvordan Google Maps beregner størrelsen på boblen. Det er enkelt nok å legge til i bredde og høyde for å løse dette problemet, så vi lagt til det i.
Hvis vi ønsker å skrive inn en kort beskrivelse som skal vises i boblen når plottepunktet klikkes, er dette stedet du vil skrive inn. Dette feltet støtter HTML-formatering som standard.
Nå som vi har skrevet inn alle dataene våre, kan vi sende inn skjemaet og stedet vil bli publisert.
Så gjenta denne prosessen for de ekstra oppføringene.
Først må vi opprette en ny malegruppe for kartet vårt ved å klikke på maler fane. Deretter klikker du på den store grønne knappen som sier Opprett en ny malgruppe.
Deretter skriver du inn steder i feltet Mallnavn, og klikk på Send. Vår malegruppe er nå opprettet.
Mens vi er her, la oss lage en annen malegruppe kalt skript.
Deretter velger du gruppemallgruppen fra venstre kolonne, og klikker på index. Nå kan vi begynne å bygge vår mal. Du vil presentere med det som er bare en tom boks, dette er hvor du vil legge til all din kode.
Nå er alt vi trenger å gjøre, skriv inn koden vår og klikk oppdatering, og vår mal er oppdatert.
For å kunne bruke Google Maps API må du registrere deg for en API-nøkkel for nettstedet ditt. Når du registrerer deg, vil du bli forsynt med API-tasten, som du bruker når du inkluderer JavaScript på siden. La oss komme i gang med en enkel side og inkludere vår Google Maps-kode:
steder
Merk: ABQIAAAAGbpRl2XCyCtoHtEtVLA9mhT9xvUTfY2sa86RDF1pWLQtRVPGPxQD1aEASfi1xtt39RqVCDd8ib1hGw er verdien av Google Maps API-nøkkelen for nettstedet mitt. Du må oppdatere dette med din egen nøkkel.
Når denne koden er skrevet inn i textarea, klikker du bare på oppdatering for å lagre malen. Deretter, hvis du klikker på den store grønne knappen som sier Se gjengitt mal, Vi vil se hvordan siden vil se ut.
Deretter må vi legge til en div som faktisk inneholder kartet.
steder Du må ha JavaScript aktivert for å vise dette kartet.
Merk: Jeg har nettopp lagt til meldingen om at du trenger JavaScript for brukerne som ikke har JavaScript aktivert, men du kan sikkert sende listen over steder i stedet for denne meldingen.
Vi må definere høyden og bredden på div som skal inneholde kartet, så for dette eksempelet skal jeg bare bruke noen CSS på siden.
steder Du må ha JavaScript aktivert for å vise dette kartet.
Det er all HTML-koden vi trenger for å få kartet vårt til å dukke opp, så når koden er oppgitt, klikker du Oppdater og Ferdig, og vi blir tatt tilbake til hovedmalerens seksjon. Deretter skal vi koden vår JavaScript for å legge til poengene på kartet.
Velg skript fra venstre kolonne og klikk på Ny mal. Tast inn kart som malnavn, og velg Javascript fra rullegardinmenyen Template Type, og klikk deretter Sende inn.
Vår nye mal heter kart har nå blitt opprettet. Så klikk på kart, og ikke rediger malen.
Den kule tingen om EE er at vi kan skrive inn EE-kode i JS og CSS maler og det vil behandle den koden. For å gjøre dette må vi legge til en skjult config-variabel i vår config.php-fil som ligger i systemmappen. Så åpne opp config.php filen din og skriv inn følgende: $ conf ['protect_javascript'] = 'n';. Last opp det, og EE-koder blir behandlet i JS-kode.
Merk: Jeg skal bruke vanlig gammel JavaScript for dette eksempelet, men du kan enkelt endre noen kode for å bruke ditt valgramme.
Først skal vi begynne å lage en funksjon som vil legge til plottepunktene på kartet:
Accentsconagua
funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); Den første linjen spesifiserer å bruke elementet med et ID på kart å lage kartet. Neste linje setter midten av kartet til angitt breddegrad og lengdegrad, og setter deretter zoomnivået. Dette er bare vilkårlige verdier for dette eksempelet, så du vil sannsynligvis måtte justere. Den endelige linjen setter opp kontrollene på kartet, dvs. zoom, flytte, karttype osv.
Nå ønsker vi å få tilgang til dataene som vi skrev inn i EE ved å bruke exp: weblog: entries tag:
funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: oppføringer weblog = "steder" disable = "kategorier | category_fields | member_data | pagination | trackbacks" hvis tall == 1 var poeng = nytt Array (total_resultater); / if / exp: weblog: oppføringer Så denne koden sier å "spørre" på steder weblogg, og deaktiver ytterligere parametere som vi ikke skal bruke. Dette er en god vane å komme inn på, fordi det kan forbedre ytelsen.
Det er noen EE-variabler som vi bruker som jeg må forklare: telle og total_resultater. telle er akkurat det det høres ut som: det indikerer bare nummeret på gjeldende rekord som vi er på. TOTAL_RESULTS Indikerer hvor mange totale poster som skal returneres.
Så hvis teller er lik 1, dette første gangen gjennom løkken, så vi initialiserer vårt utvalg som vil ha en størrelse på det totale antall poster som returneres.
Deretter vil vi faktisk få tak i dataene og sende den ut i løkken. Merk: Jeg skal legge til linjeskift til denne koden bare for lesbarhet, men i produksjonsbruk må linjeskiftene fjernes.
funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: oppføringer weblog = "steder" disable = "kategorier | category_fields | member_data | pagination | trackbacks" hvis tall == 1 var poeng = nytt Array (total_resultater); / if poeng [count] = [locations_latitude, locations_longitude, ' tittel
hvis locations_photo && locations_photo_width && locations_photo_height 
/hvis Locations_address
hvis locations_description locations_description / if ']; / exp: weblog: oppføringer Det kan se ut som mye, så la oss gå gjennom det stykke for hverandre.
poeng [count] = [locations_latitude, locations_longitude,
Her legger vi til en matrise i vår poengmatrise. I denne gruppen skal vi legge til breddegrad, lengdegrad og informasjon som skal vises i informasjonsboblen. Legg merke til hvordan locations_latitude og locations_longitude samsvare med verdiene vi la til for feltnavn i vår tilpassede feltgruppe.
''];tittel
I dette utsnittet legger vi bare en div og tittelen som ble skrevet inn i EE.
hvis locations_photo && locations_photo_width && locations_photo_height
I dette stykket sjekker vi for å se om det var en verdi som ble angitt i bildefeltet, fotobredden og bildehøydefeltene. Hvis det var, legger vi bildet til vår informasjonsboble.
Locations_address
hvis locations_description locations_description / if
Til slutt legger vi til adressen til informasjonsboblen, og hvis det ble lagt inn en beskrivelse, legger vi til det også. Her er den hele linjen uten noen linjeskift:
poeng [count] = [locations_latitude, locations_longitude, ''];tittel
hvis locations_photo && locations_photo_width && locations_photo_heightLocations_address
hvis locations_description locations_description / if
For å fullføre funksjonen, trenger vi bare å gå gjennom arrayet og legge til plottepunktene og hendelseslytterne til kartet:
/hvis funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: oppføringer weblog = "steder" disable = "kategorier | category_fields | member_data | pagination | trackbacks" hvis tall == 1 var poeng = nytt Array (total_resultater); / if poeng [count] = [locations_latitude, locations_longitude, 'tittel
hvis locations_photo && locations_photo_width && locations_photo_height/hvis Locations_address
hvis locations_description locations_description / if']; / exp: weblog: oppføringer for (var i = 1; jeg < 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); Så vi skaper vårt poeng og passerer i breddegrad og lengdegrad. Deretter lager vi en variabel som inneholder all informasjonen til informasjonsboblen. Deretter kaller vi en egendefinert funksjon som jeg vil definere om et minutt og passerer i punkt og informasjon boble tekst. Til slutt legger vi markøren til kartet.
Her er vår egendefinerte funksjon som lager markøren:
funksjon createMarker (punkt, overlayText) var markør = ny GMarker (punkt); GEvent.addListener (markør, "klikk", funksjon () marker.openInfoWindowHtml (overlayText);); retur markør;
Så vi lager en markør basert på vårt punkt på kartet, og legger til en hendelseslytter som vil åpne informasjonsboblen med riktig tekst når den klikkes.
Så det er ganske mye det. Selv om jeg vil legge til en funksjon som forteller JS-funksjonen å løpe når dom er lastet:
funksjon addLoadEvent (func) var oldonload = window.onload; hvis (type av window.onload! = 'funksjon') window.onload = func; else window.onload = function () if (oldonload) oldonload (); func (); addLoadEvent (populateMap);
Jeg leser først om denne funksjonen fra Simon Willison. Du kan igjen erstatte dette med kode for hva som helst JS-bibliotek du bruker.
Her er den fulle JS for den mal:
funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: oppføringer weblog = "steder" disable = "kategorier | category_fields | member_data | pagination | trackbacks" hvis tall == 1 var poeng = nytt Array (total_resultater); / if poeng [count] = [locations_latitude, locations_longitude, 'tittel
hvis locations_photo && locations_photo_width && locations_photo_height/hvis Locations_address
hvis locations_description locations_description / if']; / exp: weblog: oppføringer for (var i = 1; jeg < 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); Når all den koden er lagt til, klikker du Oppdater og Ferdig å bli returnert til hovedmaler siden. Deretter må vi gå tilbake til vår lokaliseringsmalgruppe og redigere indeksmalen.
Vi må inkludere JS-malen som vi nettopp har opprettet i dokumentets hode:
Jeg bruker stivariabelen til å koble til JS-malen.
Så nå, når vi går tilbake og ser vår plasseringsmal i nettleseren, ser du kanskje en JS-feil. Hvis en posisjonsbeskrivelse ble oppgitt, kan det legge til noen nye linjer i koden, så dette vil bryte strengen i JS. Så løsningen er å fjerne de nye linjene på en eller annen måte.
Heldigvis er det et plugin for EE som heter Søk og erstatt som vil la oss erstatte alle \ n med ingenting.
Så bla til Admin> Verktøy> Plugin Manager, og finn pluginet i høyre kolonne. Når du finner det, klikk på installasjon, og det er det.
Nå kan vi bruke pluginet i vår kode. Så gå tilbake og rediger kartmalen i vår skriptmallgruppe, og erstatt dette:
hvis locations_description locations_description / if
Med dette:
if locations_description exp: erstatt find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: erstatte / if
Denne funksjonen sier i utgangspunktet bare å erstatte alle nye linjer med ingenting. Selvfølgelig vil vi fjerne alle linjeskiftene fra koden, så her er oppdatert full JS:
funksjon populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (ny GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: oppføringer weblog = "steder" disable = "kategorier | category_fields | member_data | pagination | trackbacks" hvis tall == 1 var poeng = nytt Array (total_resultater); / if poeng [count] = [locations_latitude, locations_longitude, 'tittel
hvis locations_photo && locations_photo_width && locations_photo_height/hvis Locations_address
if locations_description exp: erstatt find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: erstatte / if']; / exp: weblog: oppføringer for (var i = 1; jeg < 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); Det er det! Vi kan nå se vår mal i nettleseren og se vår EE-drevne Google Map. Du kan også vise min demo.
