Share
Zoals Richard Tape in zijn deel 1 en deel 2 artikelen over Becoming an Expression Engine Superstar begint te laten zien, EE is een flexibel en gemakkelijk aan te passen CMS. Nu iedereen weet hoe EE werkt, dacht ik dat ik van de gelegenheid gebruik zou maken om een relatief realistisch voorbeeld te laten zien van het maken van een dynamische Google Map met EE.
Laten we voor dit voorbeeld aannemen dat ons bedrijf verschillende locaties heeft in de Verenigde Staten en we zijn belast met het maken van een Google Map die alle locaties toont en gemakkelijk te onderhouden is. Bekijk de demo om te zien wat we proberen te bereiken.
Vergeet niet dat een weblog niet meer is dan een container met gegevens. Eigenlijk veranderen ze in EE 2.0 de term weblog in kanaal. Dus gaan we een weblog maken met de naam locaties en een aangepaste veldgroep genaamd locaties. Het is absoluut geen vereiste om ze dezelfde naam te geven, maar het maakt het eenvoudig om de relatie te begrijpen.
Ik maak eigenlijk eerst de veldgroep, dus laten we dat doen door naar Beheer> Weblogbeheer> Aangepaste weblogvelden te gaan. Klik vervolgens op de grote groene knop die zegt Maak een nieuwe Weblog-veldgroep.
invoeren locaties als de veldgroepsnaam en klik op verzenden.
Nadat u op Verzenden hebt geklikt, ziet u dat EE u vertelt dat u het niet kunt gebruiken totdat u het toewijst aan een weblog. Maar we zullen het toewijzen aan een weblog wanneer we de weblog maken.
Nu onze veldgroep is gemaakt, moeten we nadenken over de feitelijke velden die we daarin willen hebben. De volgende zijn de velden die volgens mij geschikt zijn, en hun eigenschappen in EE:
Nu we onze velden in kaart hebben gebracht, moeten we de velden in EE maken. Dus klik eerst op Aangepaste velden toevoegen / bewerken in het record Locaties. Klik vervolgens op de grote groene knop die zegt Maak een nieuw aangepast veld.
Nu maken we hier de velden in EE die we eerder hebben gedefinieerd. Laten we eerst beginnen met de Lengtegraad veld:
Zodra we alle geschikte eigenschappen hebben geselecteerd, klikt u op Verzenden. Nu wordt het veld Lengtegraad gemaakt.
Nu je hebt gezien hoe je één veld kunt maken, ga ik gewoon door en maak ik de rest.
Nu onze veldgroep is gedefinieerd, moeten we onze weblog maken en de aangepaste locatiegroep Locaties eraan toewijzen. Klik eerst op de Beheer van weblogs broodkruimel. Klik vervolgens op Weblog Management. Klik ten slotte op de grote groene knop die zegt Maak een nieuwe weblog.
invoeren locaties als de volledige weblognaam en locaties als de korte naam. kiezen Ja voor Edit Group Preferences, en een nieuwe sectie zal verschijnen. Dit is waar we selecteren locaties als de Field Group.
Nadat alle instellingen zijn geselecteerd, klikt u op Verzenden en wordt het weblog Locaties gemaakt.
Nu dat onze locaties weblog is aangemaakt, kunnen we beginnen met het invoeren van de locaties. Plaats de muisaanwijzer op het tabblad Publiceren en klik op locaties.
De velden Titel, Adres en Beschrijving spreken voor zich, maar de velden Titel, Lengtegraad, Breedtegraad en Foto kunnen een beetje uitleg nodig hebben.
Het veld URL-titel wordt automatisch ingevuld wanneer u de titel invoert. De URL-titel vervangt spaties door onderstrepingstekens en maakt de tekst in kleine letters. Voor deze bepaalde situatie zullen we het niet gebruiken. Er is een manier om het te verbergen, maar daar ga ik nu niet doorheen.
Ik weet zeker dat iedereen weet wat lengte- en breedtegraad zijn, maar de vraag is: hoe bepaal je het vanaf een adres? Door een externe site zoals Map Builder te gebruiken. Op deze site kunt u een adres invoeren en retourneert het de lengte- en breedtegraad.
Als we een foto van de locatie hadden, kunnen we deze opnemen wanneer op het plotpunt wordt geklikt. Het uploaden van afbeeldingen in EE kan een beetje verwarrend zijn, dus laten we er doorheen lopen.
Klik eerst op de Upload bestand link die zich bevindt onder de verzendknop. Er verschijnt een pop-upvenster.
Blader naar uw bestand op uw computer en klik op Verzenden.
Je kunt het formaat van de foto veranderen nadat je hem hebt geüpload door op de knop Afbeelding verkleinen te klikken, maar ik heb mijn afbeelding eerst aangepast voordat ik hem upload, dus ik zal dat gedeelte niet demonstreren. We willen selecteren Alleen URL voor het bestandstype en Foto voor de afbeeldingslocatie.
Zodra onze opties zijn geselecteerd, klikt u op Plaats afbeelding en sluit venster. Dit vult nu uw Foto veld met de locatie van uw afbeelding.
Als een gebruiker een foto van de locatie uploadt, willen we dat ze de hoogte en breedte van het beeld invoeren. Als dit niet het geval is, breekt de afbeelding uit de informatieballon vanwege de manier waarop Google Maps de grootte van de ballon berekent. Het is eenvoudig genoeg om in de breedte en hoogte toe te voegen om dit probleem op te lossen, dus hebben we dat toegevoegd.
Als we een korte beschrijving willen invoeren om weer te geven in de ballon wanneer er op het plotpunt wordt geklikt, moet u dit hier invoeren. Dit veld ondersteunt standaard HTML-opmaak.
Nu we al onze gegevens hebben ingevoerd, kunnen we het formulier verzenden en wordt de locatie gepubliceerd.
Herhaal vervolgens dit proces voor de aanvullende vermeldingen.
Eerst moeten we een nieuwe sjabloongroep maken voor onze locatiekaart door op de. Te klikken templates tab. Klik vervolgens op de grote groene knop die zegt Maak een nieuwe sjabloongroep.
Voer dan in locaties in het veld Sjabloongroep naam en klik op verzenden. Onze sjabloongroep is nu gemaakt.
Terwijl we hier zijn, laten we een andere sjabloongroep maken scripts.
Selecteer vervolgens de locatiesjabloongroep in de linkerkolom en klik op inhoudsopgave. Nu kunnen we beginnen met het bouwen van onze sjabloon. Je krijgt te zien wat alleen een leeg vak is, dit is waar je al je code zult toevoegen.
Nu hoeven we alleen maar onze code in te voeren en op update te klikken en onze sjabloon wordt bijgewerkt.
Als u de Google Maps API wilt gebruiken, moet u zich aanmelden voor een API-sleutel voor uw site. Zodra u zich aanmeldt, ontvangt u de API-sleutel die u gebruikt bij het opnemen van JavaScript op de pagina. Laten we aan de slag gaan met een eenvoudige pagina en onze Google Maps-code opnemen:
locaties
Opmerking: ABQIAAAAGbpRl2XCyCtoHtEtVLA9mhT9xvUTfY2sa86RDF1pWLQtRVPGPxQD1aEASfi1xtt39RqVCDd8ib1hGw is de waarde van de Google Maps API-sleutel voor mijn site. U moet dit bijwerken met uw eigen sleutel.
Zodra deze code is ingevoerd in textarea, klikt u op update om de sjabloon op te slaan. Dan, als je op de grote groene knop klikt die zegt Bekijk de gerenderde sjabloon, we zullen zien hoe de pagina eruit zal zien.
Vervolgens moeten we een div toevoegen die de kaart daadwerkelijk bevat.
locaties U moet JavaScript ingeschakeld hebben om deze kaart te bekijken.
Opmerking: ik heb zojuist het bericht toegevoegd dat ik JavaScript nodig heb voor de gebruikers die JavaScript niet hebben ingeschakeld, maar u kunt zeker de lijst met locaties uitvoeren in plaats van dit bericht.
We moeten de hoogte en breedte definiëren van de div die de kaart gaat bevatten, dus in dit voorbeeld ga ik gewoon wat CSS gebruiken op de pagina.
locaties U moet JavaScript ingeschakeld hebben om deze kaart te bekijken.
Dat is alle HTML die we nodig hebben om onze kaart weer te geven, dus klik zodra de code is ingevoerd op Bijwerken en klaar, en we worden teruggebracht naar de sectie hoofdsjablonen. Vervolgens gaan we onze JavaScript coderen om de punten aan de kaart toe te voegen.
Selecteer scripts in de linkerkolom en klik op Nieuwe sjabloon. invoeren kaart als de sjabloonnaam en selecteer JavaScript in de vervolgkeuzelijst Sjabloontype en klik vervolgens op voorleggen.
Onze nieuwe sjabloon met de naam kaart is nu gemaakt. Dus klik op kaart, en laat de sjabloon niet bewerken.
Het leuke van EE is dat we EE-code kunnen invoeren in de JS- en CSS-sjablonen en dat die code wordt verwerkt. Om dit te doen, moeten we een verborgen configuratievariabele toevoegen aan ons config.php-bestand dat zich in de systeemmap bevindt. Dus open je config.php bestand en voer het volgende in: $ conf ['protect_javascript'] = 'n';. Upload het vervolgens en EE-tags worden verwerkt in JS-code.
Opmerking: ik ga gewoon oud JavaScript gebruiken voor dit voorbeeld, maar u kunt eenvoudig een aantal code aanpassen om uw framework van keuze te gebruiken.
Eerst gaan we aan de slag met het maken van een functie die de plotpunten aan de kaart toevoegt:
Accentsconagua
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); De eerste regel geeft aan dat het element met een ID van moet worden gebruikt kaart om de kaart te maken. De volgende regel stelt het midden van de kaart in op de opgegeven breedtegraad en lengtegraad en stelt vervolgens het zoomniveau in. Dit zijn slechts willekeurige waarden voor dit voorbeeld, dus u moet dit waarschijnlijk aanpassen. In de laatste regel worden de bedieningselementen op de kaart ingesteld, zoals zoom, verplaatsing, kaarttype, enzovoort.
Nu willen we toegang krijgen tot de gegevens die we in EE hebben ingevoerd met de tag exp: weblog: entries:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categories | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if / exp: weblog: ingangen Dus deze code zegt om de locaties weblog, en schakel extra parameters uit die we niet zullen gebruiken. Dit is een goede gewoonte om erin te komen, omdat het de prestaties kan verbeteren.
Er zijn enkele EE-variabelen die we gebruiken en die ik moet uitleggen: aantal en totale resultaten. tellen is precies wat het klinkt: het geeft alleen het nummer van de huidige record aan waar we aan toe zijn. TOTAL_RESULTS geeft aan hoeveel totale records zullen worden geretourneerd.
Dus als telling gelijk is aan 1, dit de eerste keer door de lus, dus initialiseren we onze array die een grootte zal hebben van het totale aantal geretourneerde records.
Vervolgens willen we de gegevens daadwerkelijk pakken en deze in de lus uitvoeren. Opmerking: ik ga regelafbrekingen aan deze code toevoegen alleen voor leesbaarheid, maar bij productiegebruik moeten de regeleinden worden verwijderd.
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categories | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if punten [count] = [locations_latitude, locations_longitude, ' titel
if locations_photo && locations_photo_width && locations_photo_height 
/als Locations_address
if locations_description locations_description / if ']; / exp: weblog: vermeldingen Dat lijkt veel, dus laten we het stuk voor stuk bekijken.
punten [count] = [locations_latitude, locations_longitude,
Hier voegen we een array toe aan onze puntenserie. In deze array gaan we de breedtegraad, lengtegraad en informatie toevoegen die in de informatieballon wordt weergegeven. Merk op hoe locations_latitude en locations_longitude overeenkomen met de waarden die we hebben toegevoegd voor de veldnamen in onze aangepaste veldgroep.
''];titel
In dit fragment voegen we alleen een div toe en de titel die is ingevoerd in EE.
if locations_photo && locations_photo_width && locations_photo_height
In dit stuk controleren we of er een waarde is ingevoerd in de velden voor de foto, de fotoformaat en de fotohoogte. Als dat het geval was, voegen we de foto toe aan onze informatieballon.
Locations_address
if locations_description locations_description / if
Ten slotte voegen we het adres toe aan de informatieballon en als er een beschrijving is ingevoerd, voegen we dat ook toe. Hier is die hele regel zonder regelonderbrekingen:
punten [count] = [locations_latitude, locations_longitude, ''];titel
if locations_photo && locations_photo_width && locations_photo_heightLocations_address
if locations_description locations_description / if
Om de functie af te maken, moeten we gewoon door de array lopen en de plotpunten en gebeurtenislisteners toevoegen aan de kaart:
/als function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categories | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if punten [count] = [locations_latitude, locations_longitude, 'titel
if locations_photo && locations_photo_width && locations_photo_height/als Locations_address
if locations_description locations_description / if']; / exp: weblog: entries for (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); Dus we creëren ons punt en passeren de breedte- en lengtegraad. Vervolgens maken we een variabele die alle informatie voor de informatieballon bevat. Vervolgens bellen we een aangepaste functie die ik in een minuut zal definiëren en de tekst van het punt en de informatieballon zal doorgeven. Ten slotte voegen we de markering aan de kaart toe.
Dit is onze aangepaste functie die de markering maakt:
function createMarker (point, overlayText) var marker = new GMarker (point); GEvent.addListener (markering, "klik", functie () marker.openInfoWindowHtml (overlayText);); terugkeer marker;
We maken dus een markering op basis van ons punt op de kaart en voegen vervolgens een gebeurtenislistener toe die de informatieballon met de juiste tekst opent wanneer erop wordt geklikt.
Dus dat is zo ongeveer. Hoewel, ik zal nog een functie toevoegen die de JS functie vertelt om te draaien als de dom is geladen:
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);
Ik heb eerst over deze functie gelezen van Simon Willison. Je zou dit opnieuw kunnen vervangen met code voor elke JS-bibliotheek die je gebruikt.
Hier is de volledige JS voor die sjabloon:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categories | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if punten [count] = [locations_latitude, locations_longitude, 'titel
if locations_photo && locations_photo_width && locations_photo_height/als Locations_address
if locations_description locations_description / if']; / exp: weblog: entries for (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); Zodra al die code is toegevoegd, klikt u op Bijwerken en klaar om terug te gaan naar de hoofdsjablonenpagina. Vervolgens moeten we teruggaan naar onze locatiesjabloongroep en de indexsjabloon bewerken.
We moeten de JS-sjabloon opnemen die we zojuist in het hoofd van het document hebben gemaakt:
Ik gebruik de padvariabele om te koppelen aan de JS-sjabloon.
Dus nu, wanneer we teruggaan en onze locatiesjabloon bekijken in de browser, ziet u mogelijk een JS-fout. Als een locatiebeschrijving is ingevoerd, kan deze nieuwe regels aan de code toevoegen, waardoor de tekenreeks in de JS wordt verbroken. Dus de oplossing is om die nieuwe regels op de een of andere manier te verwijderen.
Gelukkig is er een plug-in voor EE genaamd Zoeken en vervangen waarmee we alles kunnen vervangen \ n met niets.
Blader dus naar Beheer> Hulpprogramma's> Plugin Manager en vind de plug-in in de rechterkolom. Als je het vindt, klik je op Installeren, en dat is alles.
Nu kunnen we de plug-in in onze code gebruiken. Dus ga terug en bewerk de kaartsjabloon in onze scripts-sjabloongroep en vervang deze:
if locations_description locations_description / if
Hiermee:
if locations_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if
Deze functie is eigenlijk alleen maar om alle nieuwe regels te vervangen door niets. Natuurlijk willen we alle regeleinden van de code verwijderen, dus hier is de bijgewerkte volledige JS:
function populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (nieuwe GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entries weblog = "locations" disable = "categories | category_fields | member_data | pagination | trackbacks" if count == 1 var points = new Array (total_results); / if punten [count] = [locations_latitude, locations_longitude, 'titel
if locations_photo && locations_photo_width && locations_photo_height/als Locations_address
if locations_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if']; / exp: weblog: entries for (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); Dat is het! We kunnen onze sjabloon nu in de browser bekijken en onze door EE aangedreven Google Map bekijken. Je kunt ook mijn demo bekijken.
