Ai creat un nou site strălucitor; selectând cu atenție culorile, tipografia și fotografiile pentru a reflecta perfect branding-ul companiei. Apoi, clientul vă cere să adăugați o hartă. Sigur, ați putea folosi un "vrăjitor" de construcție a hărților, cum ar fi acela care vine cu fiecare cont Google. Dar, să recunoaștem, funcționalitatea lor este limitată și arată destul de generic!
Aplicația Google Maps API, pe de altă parte, vă oferă libertatea de a crea hărți complet personalizate, care pot face tot felul de lucruri reci. Harta Portsmouth History este un site pe care l-am construit recent folosind acest API.
Această serie de tutoriale vă va arăta cum să creați hărți personalizate utilizând API-ul Google Maps. Acesta va implica obtinerea mâinile murdare cu un pic de JavaScript, dar va fi meritat.
Tutorialele vor acoperi tot felul de lucruri. Pentru a numi câteva: culori personalizate ale hărții, meniuri și marcaje; aducerea la viață a propriei dvs. hărți (de ex. a unei hărți) prin suprapunerea acesteia pe o hartă Google zoomabilă; conectarea la API-ul Flickr; optimizarea imaginii; proiectare receptivă; optimizarea codului și validarea. Sau, cu alte cuvinte, până când ați terminat, nu numai că veți putea să creați hărți frumoase, ci veți fi analizat și multe lucruri relevante pentru construirea oricărui site web.
Aceste tutoriale utilizează scenariul unei companii britanice care promovează festivaluri de muzică. Imaginea "Produsul final" de mai sus arată tipul de lucru pentru care vrem. Uitați-vă la demo.
Notă: Doar marcatorul Glastonbury este "activ" în acest exemplu.
Înainte de a începe, vă recomandăm să descărcați fișierele asociate acestui tutorial. Am inclus un fișier html separat pentru fiecare activitate.
Un API sau o interfață de programare a aplicațiilor este un mod fantezist de a publica un set de comenzi (de ex. Funcții) pe care le publică o companie (de exemplu, Facebook, Twitter, You Tube, Google). Ideea este că puteți utiliza aceste comenzi pentru a crea o versiune foarte personalizată a conținutului lor. De exemplu, în cazul aplicației Google Maps API, "conținutul" este hărțile, în timp ce în cazul API-ului Flickr "conținutul" este fotografia.
Atunci când oamenii vorbesc despre "mash-up" înseamnă că au folosit API-ul a două sau mai multe companii pentru a combina conținutul, de exemplu, fotografiile de pe Flickr apar pe o hartă Google. Există literalmente mii de astfel de API în jurul valorii de; aruncați o privire la Web programabil pentru mai multe informații.
Ne vom uita la API-ul Flickr într-un tutorial mai târziu, dar pentru început vom rămâne concentrați asupra API-ului Google Maps. Acest lucru vă va permite să faceți tot felul de lucruri, inclusiv personalizarea culorilor, marcajele hărților, stilul pop-up box, nivelul detaliilor și nivelul de mărire. Să nu mai vorbim de fapt, făcând harta să facă niște lucruri reci, cum ar fi afișarea datelor live, marcarea grupărilor, rutele de planificare, desenarea suprapunerilor personalizate, afișarea dinamic a datelor ... lista este nesfârșită!
Cu riscul de a scoate în evidență faptul că pentru a începe, aveți nevoie de un cont Google. Dacă nu aveți în prezent unul, mergeți la Google și înscrieți-vă.
Înarmați cu contul dvs. Google, vă puteți aventura acum în paginile API Google Maps. Marcați această pagină; vei deveni foarte familiarizat cu asta. Principalele domenii sunt:-
Înainte de a merge mai departe, aveți nevoie și de o cheie API (o succesiune lungă de litere și numere, unice pentru dvs.). Obțineți cheia API aici.
Bine, sunteți gata să începeți să construiți.
Pentru a face lucrarea furnizată, înlocuiți unde se afișează "YOUR_API_KEY_GOES_HERE" cu propria cheie API. Harta dvs. ar trebui să semene cu harta de mai sus.
Principalul element principal al codului este acela că creează un div (numit festival-map
) în care JavaScript încarcă harta. Am adăugat comentarii în cod pentru a explica cum funcționează, dar merită să se evidențieze principalele biți.
Codul declară mai întâi aplicația dvs. ca HTML5 utilizând declarația Doctype .
Apoi stabilește stilul pentru hartă; biții între
Etichete. Aveți posibilitatea să adaptați stilul pe # Festival-hartă
id în funcție de locul în care doriți să puneți harta. Dacă doriți o hartă "pe ecran complet", setați lățimea și înălțimea la 100% și eliminați marginile.
Apoi, sărind JavaScript peste o clipă, codul dintre etichetele corporale stabilește un obiect html gol, adică div (festival-map
) pentru a ține harta. Aceasta acționează ca un fel de "suport de locație", în care JavaScript încarcă harta.
OK - acum se uită la JavaScript - codul se conectează mai întâi la cheia API-ului Google Maps.
Se lansează apoi în JavaScript care creează harta. Remediere rapidă: funcțiile JavaScript (de ex. loadFestivalMap
) reprezintă un set de comenzi care se execută numai atunci când sunt chemați de un alt cod. Acest lucru poate părea complicat, dar de fapt face doar câteva lucruri -
festivalMapOptions
) a hărții (de exemplu, latitudinea și longitudinea, nivelurile zoomului etc.) și o variabilă JavaScript goală (festivalMap
), pe care hartă va fi alocată în scurt timp. (Sfat: itouchmap este un site la îndemână pentru căutarea coordonatelor de latitudine și longitudine ale oricărei locații.)loadFestivalMap
funcția este declanșată pentru a rula prin această linie:google.maps.event.addDomListener (fereastră, "încărcare", loadFestivalMap);
festivalMap
). În timp ce faceți acest lucru, se aplică și opțiunile de configurare și se încarcă harta în festival-map
div creat să-l țină.loadMapMarkers
funcția este declanșată în rularea de către ultima linie a loadFestivalMap
funcţie.Dacă acest lucru nu are sens, citiți comentariile în versiunea completă a codului, așa cum explică mai departe.
Până acum ar trebui să aveți o hartă în desfășurare și cu orice noroc nu ați fost prea derutat de JavaScript! Presupunând că totul este bine, putem începe să facem harta mai interesantă.
Este ușor să utilizați propriile imagini ca marcaje de hartă. În mod similar cu modul în care setați opțiunile de proprietăți pentru hartă (de ex. centru, zoom
așa cum am făcut mai sus), puteți modifica, de asemenea, proprietățile marcatorilor de hartă. Pentru a utiliza o altă imagine ca marcator de hartă, trebuie doar să setați icoană
proprietățile marcatorilor dvs. de hartă. (Dacă sunteți interesat, secțiunea Google Maps API - markeri enumeră toate proprietățile, metodele și evenimentele pe care le puteți utiliza).
De obicei, marcatorii de hartă sunt .pngs deoarece acestea vă permit să aveți o formă neregulată cu un fundal transparent.
De asemenea, trebuie să setăm zona "clicabilă" pentru fiecare marcator pentru a asigura că bitul "imagine" al .png este clicabil și bitul transparent nu este. Acest lucru este cu adevărat important dacă marcajele se suprapun.
Mai întâi creați imaginea cu pictograma hărții (markerIconGlastonbury
), apoi creați forma pictogramei hărții (markerShapeGlastonbury
) și, în final, le puteți conecta la marcajele hartă (markerGlastonbury
).
// Stabilirea poziției marcatorului de hartă Glastonbury. var markerPositionGlastonbury = nou google.maps.LatLng (51.159803, -2.585585); // Setarea pictogramei care va fi utilizată cu marcatorul de hartă Glastonbury. var markerIconGlastonbury = url: 'icons / icon_glas_uk.png', // Fișierul imagine de dimensiune. dimensiune: nou google.maps.Size (225, 120), // Punctul din imagine pentru a măsura ancora de la. 0, 0 este partea stângă sus. origine: nou google.maps.Point (0, 0), // coordonatele x y ale punctului de ancorare de pe marker. de exemplu. În cazul în care marcatorul dvs. de hartă a fost un bolț de desen, atunci ancora ar fi vârful pinului. ancora: noul google.maps.Point (189, 116); // Stabilirea formei care va fi utilizată cu marcatorul de hartă Glastonbury. var markerShapeGlastonbury = coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56], tip: "poly"; // Crearea marcatorului de harta Glastonbury. markerGlastonbury = nou google.maps.Marker (// foloseste pozitia setata mai sus pozitie: markerPositionGlastonbury, // adauga markerul pe harta harta: festivalMap, title: 'Festivalul Glastonbury', // atribuie imaginea de icon setata mai sus icoanei: markerIconGlastonbury, // atribuie formularul de pictograma setat mai sus markerului.form: markerShapeGlastonbury, // stabilește indexul z al marcatorului de hartă zIndex: 102);
Puteți descărca fișierul html complet din partea de sus a acestei pagini sau puteți vedea versiunea live. Pentru moment, tocmai am adăugat un marcator al hărții ... evident, voi adăuga mai târziu!
Aluzie: Pentru a obține coordonatele formei pictogramelor de hartă, insotesc imaginea pictogramei într-o pagină Web temporară în Dreamweaver și apoi folosiți instrumentul Hotspot Poligon pentru a obține coordonatele și apoi copiați aceste coordonate înapoi în pagina principală a hărții mele.Elementele, cum ar fi marcajele de hartă, pot avea ambele coordonate x, y și z. Indexul z este adâncimea. Aceasta determină modul în care elementele sunt "stivuite" unul peste celălalt și, prin urmare, cum se suprapun.
Dacă coordonatele x și y ale unui element sunt aceleași, atunci elementele cu indexuri z mai mari sunt afișate în partea de sus a elementelor cu indicii z mai mici. (Indexul Z funcționează numai pe elemente poziționate, de exemplu relativă, fixă sau absolută).
Până acum, harta pare OK, deoarece implicit API-ul Google Maps oferă elemente care apar în partea inferioară a ecranului cu un z-index mai înalt, astfel încât acestea să apară în partea de sus a elementelor puțin mai sus pe ecran. De exemplu. pictograma Isle of Wight se află în partea de sus a icoanelor festivalului Glastonbury și Reading (a se vedea imaginea de mai jos).
Mai târziu, în acest tutorial vom examina modul în care puteți modifica indexurile z pentru a manipula modul în care sunt afișate marcatorii de hartă.
Deși harta începe să se formeze, harta implicită nu se potrivește cu efectul general pe care vreau să îl obțin. Din fericire, este foarte ușor să folosiți opțiunile "stilului" API pentru a particulariza modul în care arată harta.
Ar trebui să spun și în acest moment că tocmai am luat câteva festivaluri de muzică pentru a ilustra acest exemplu. Acest lucru a fost oarecum aleatoriu, iar selecția mea nu reflectă opinia mea - fie pentru, fie împotriva - oricăror festivaluri!
Utilizați expertul JSON pentru a antrena modul în care doriți ca harta dvs. să arate. Puteți schimba culorile multor lucruri, adăugați și eliminați detaliile, setați umplerea culorilor și geometria în mod independent etc. Merită să vă petreceți puțin timp să vă obișnuiți cu modul în care funcționează. (În cazul în care vă întrebați, JSON este doar o modalitate de formatare a informațiilor, astfel încât un calculator să o poată citi.)
Când sunteți mulțumit de stilul afișat în previzualizarea expert JSON, faceți clic pe Afișați JSON și copiați codul.
Reveniți la documentul dvs. html, adăugați o variabilă imediat după eticheta de deschidere JavaScript pentru a ține aceste informații, apoi lipiți-o în cod.
// În primul rând, citim datele care descriu stilul. var style_festival = ["featureType": "administrativ", "stylers": ["visibility": "off" off "," "," : "color": "#FFE200"], "featureType": "apă", "stylers" "vizibilitate": "on", "culoare": "# 4f92c6"];
Trebuie să obțineți harta pentru a trata informațiile pe care tocmai le-ați adăugat ca stil de hartă. Utilizare StyledMapType
pentru a face acest lucru.
// Apoi folosim aceste date pentru a crea stilurile. var styled_festival = nou google.maps.StyledMapType (style_festival, name: "Stilul Festivalului");
În cele din urmă, trebuie să alocați noului stil hărții dvs. pentru a "activa" stilul.
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId ( 'map_styles_festival');
Utilizați link-ul de la începutul acestui tutorial pentru a descărca o copie a codului pentru hartă până acum sau pentru a vedea o demonstrație live pentru această parte a tutorialului. Am adăugat de fapt două stiluri. Unul este activat imediat, iar celălalt va fi activat când harta este mărite pentru a oferi un nivel mai detaliat. (Acest lucru este explicat mai jos.)
De asemenea, nu am putut rezista adăugarea unui fundal în acest moment :) Aruncati o privire la corp
css selector pentru a vedea cum am făcut acest lucru.
Bine, acum este momentul să faceți ca harta să facă ceva! Ați putea să utilizați suprapunerea ferestrei Info, dar acestea nu arată fantastic și nu pot fi personalizate cu ușurință. Deci, în schimb, vom folosi biblioteca Infobox.
Descărcați o copie a bibliotecii Infobox. Dezarhivați-l și păstrați-l într-un dosar aproape de hartă. Apoi, adăugați această linie în partea de sus a fișierului html.
Adăugați indexuri z pentru fiecare marcator de hartă astfel încât cele mai apropiate de partea inferioară a ecranului să apară în partea superioară a celor de sus. (adică, mai aproape de partea de jos a ecranului un marker este, cu atât mai mare ar trebui să fie indexul său z). Totul va fi dezvăluit mai târziu cu privire la motivul pentru care faceți acest lucru! De exemplu -
// Crearea marcatorului de harta Glastonbury. markerGlastonbury = nou google.maps.Marker (// foloseste pozitia setata mai sus pozitie: markerPositionGlastonbury, // adauga markerul pe harta harta: festivalMap, title: 'Festivalul Glastonbury', // atribuie imaginea de icon setata mai sus la pictograma pictogramă: markerIconGlastonbury, // atribuie forma de pictogramă setată mai sus la marcator.form: markerShapeGlastonbury, / / setază indexul z al marcatorului de hartă zIndex: 107);
Adăugați următorul cod după fiecare marcator de hartă. Citiți comentariile din cadrul codului pentru a vedea ce face.
// Creează informațiile pentru a intra în caseta info pop-up. caseta varTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '„; // Stabilește opțiunile de configurare din caseta info pop-up. var infoboxOptionsGlastonbury = conținut: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: nou google.maps.Size (-241, 0), zIndex: null, boxStyle: background: "url ('infobox / pop_up_box_top_arrow.png' ) no-repeat ", opacitate: 1, lățime:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: new google.maps.Size (1, isHidden: false, panou: "floatPane", enableEventPropagation: false; // Creează infobox pop-up pentru Glastonbury, adăugând opțiunile de configurare stabilite mai sus. infoboxGlastonbury = noul InfoBox (infoboxOptionsGlastonbury); // Adăugați un "ascultător al evenimentului" pe marcatorul de hartă Glastonbury pentru a asculta când este apăsat. google.maps.event.addListener (markerGlastonbury, "click", funcția (e) // Deschide caseta info Glastonbury. infoboxGlastonbury.open (festivalMap, aceasta); // Schimbă proprietatea z-index a markerului pentru a face marcatorul apare pe partea de sus a altor marcatori this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); // mări harta.setZoomWhenMarkerClicked (); // Setează markerul Glastonbury ca centru al hărții festivalMap.setCenter (markerGlastonbury.getPosition ()););
În codul de mai sus, ați sunat funcția setZoomWhenMarkerClicked
. Aceasta va mări harta în momentul în care o persoană face clic pe un marcator. Dar nu se va întâmpla prea mult până când nu ați creat această funcție! Aceasta este funcția pe care trebuie să o creați -
funcția setZoomWhenMarkerClicked () var actualZoom = festivalMap.getZoom (); dacă (curentZoom < 7) festivalMap.setZoom(7);
Odată cu apropierea hărții, este posibil să doriți să afișați mai multe detalii pe hartă. Aceasta se face prin adăugarea unui ascultător al evenimentului și prin utilizarea acestuia getZoom
pentru a verifica continuu dacă zoom-ul a fost modificat. Dacă a crescut (peste nivelul 6), setMapTypeId
metoda este utilizată pentru a seta al doilea stil mai detaliat definit mai sus.
// Ascultă continuu când se schimbă nivelul de zoom. Aceasta include când harta se mări când un clic este marcat. google.maps.event.addListener (festivalMap, "zoom_changed", function () var newZoom = festivalMap.getZoom (); // Dacă harta este mărite, treceți la stilul care arată nivelul de detaliu mai mare. (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // În caz contrar, harta trebuie micșorată, deci folosiți stilul cu nivelul inferior de detaliu altceva festivalMap.setMapTypeId ('map_styles_festival'); );
Stilul dvs. de infobox folosind CSS pentru a face să arate destul.
// variabilă care conține stilul pentru infoboxul pop-up. var pop_up_info = "border: 0px solid negru; fundal-culoare: #ffffff; padding: 15px; margin-top: 8px; border-radius: 10px; ; box-shadow: 1px 1px # 888; ";
Când a fost deschis un infobox, marcatorul de hartă este adus în față. Cu toate acestea, dacă închideți infobox-ul și apoi măriți harta în poziția inițială, marcatorul rămâne în față. Acest lucru poate părea ciudat.
În pasul 1, setați indexul z pentru fiecare marcator. Puteți folosi acest lucru acum pentru a rezolva această problemă. Trebuie să creați o funcție (de ex. resetZindexes)
care resetează indexurile z la valorile lor inițiale, apoi adaugă un apel la această funcție (adică. resetZindexes ();)
la infobox.js pentru a declanșa funcția să ruleze când fereastra infobox este închisă.
Mergeți la link-ul din partea de sus a acestei pagini pentru o copie a codului site-ului până acum sau aruncați o privire la versiunea live a modului în care ar trebui să arate până acum. Am adăugat doar pop-up-ul pentru Glastonbury. Simțiți-vă liber să vă adăugați și pe ceilalți!
Suntem aproape acolo, cu personalizarea aspectului hărții, dar înainte de ao numi o zi, ar trebui să adăugăm câteva controale de navigare.
Google Maps are 12 domenii în care puteți adăuga controale de hartă, bannere etc. Puteți personaliza complet aceste zone, adăugând orice html etc. doriți.
Vom adăuga un banner personalizat și o navigare în partea dreaptă a hărții.
Pentru a începe, definiți mai întâi o funcție pentru a crea meniul. Acest extras de cod este destul de lung ...
// Funcție care creează zona panoului de control, adică. titlul hărții și cele 2 butoane situate chiar sub ea. funcția createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ("div"); controlUI.style.border = '0px solid alb'; controlUI.style.margin = '10px'; controlUI.style.paddingTop = '11px'; controlUI.style.paddingBottom = '5px'; controlUI.style.paddingLeft = '0px'; controlUI.style.paddingRight = '0px'; controlUI.style.width = '245px'; controlUI.style.height = '419px'; controlPanelDiv.appendChild (controlUI); // Titlul hărții titleBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = '255px'; titleBar.style.width = '245px'; titleBar.style.marginTop = '0px'; titleBar.style.marginBottom = '0px'; titleBar.style.marginLeft = '0px'; titleBar.style.marginRight = '0px'; titleBar.style.paddingTop = '6px'; titleBar.style.paddingBottom = '2px'; titleBar.style.paddingLeft = '0px'; titleBar.style.paddingRight = '0px'; titleBar.style.borderTopLeftRadius = '5px'; titleBar.style.borderTopRightRadius = '5px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.cssFloat = 'stânga'; titleBar.innerHTML = '„; controlUI.appendChild (titlebar); yellowStripe = document.createElement ("div"); galbenStripe.style.backgroundColor = '# FFFF00'; yellowStripe.style.height = '2px'; yellowStripe.style.width = '245px'; yellowStripe.style.marginTop = '3px'; yellowStripe.style.marginBottom = '3px'; yellowStripe.style.marginLeft = '0px'; yellowStripe.style.marginRight = '0px'; yellowStripe.style.paddingTop = '0px'; yellowStripe.style.paddingBottom = '0px'; yellowStripe.style.paddingLeft = '0px'; yellowStripe.style.paddingRight = '0px'; yellowStripe.style.cssFloat = 'stânga'; yellowStripe.style.fontFamily = 'Georgia, serif'; yellowStripe.style.fontSize = '14px'; controlUI.appendChild (yellowStripe); Butonul "Evenimente mai mici". smallEvents = document.createElement ("div"); smallEvents.style.height = '108px'; smallEvents.style.width = '129px'; smallEvents.style.marginTop = '0px'; smallEvents.style.marginBottom = '0px'; smallEvents.style.marginLeft = '0px'; smallEvents.style.marginRight = '0px'; smallEvents.style.paddingTop = '0px'; smallEvents.style.paddingBottom = '2px'; smallEvents.style.paddingLeft = '0px'; smallEvents.style.paddingRight = '0px'; smallEvents.style.cssFloat = 'stânga'; smallEvents.innerHTML = '„; controlUI.appendChild (smallEvents); // Butonul Umbrella brolly = document.createElement ('div'); brolly.style.height = '149px'; brolly.style.width = '94px'; brolly.style.marginTop = '0px'; brolly.style.marginBottom = '0px'; brolly.style.marginLeft = '0px'; brolly.style.marginRight = '0px'; brolly.style.paddingTop = '0px'; brolly.style.paddingBottom = '2px'; brolly.style.paddingLeft = '0px'; brolly.style.paddingRight = '0px'; brolly.style.cssFloat = 'stânga'; brolly.innerHTML = '„; controlUI.appendChild (Brolly);
Notă rapidă despre stiluri: Codul de mai sus utilizează funcția stil
proprietatea unui element pentru a defini stilurile acestuia folosind JavaScript. Pentru a converti proprietățile CSS la notația lor JavaScript, trebuie doar să rețineți că proprietățile care nu au o cratimă rămân aceleași, în timp ce cele cu o cratimă sunt convertite în camelCase, de ex. imaginea de fundal devine fundal. Excepția este pluti
, care devine cssFloat
.
Apoi, creați un div pentru a ține meniul și adăugați meniul la această div apelând funcția pe care tocmai ați creat-o în pasul 1.
// Creați panoul de control (de ex., Titlul site-ului și 2 butoane) care apare în partea dreaptă. var controlPanelDiv = document.createElement ("div"); var festivalMapControlPanel = noul createControlPanel (controlPanelDiv, festivalMap);
Apoi setați controale
proprietatea hărții dvs. pentru a adăuga meniul în locația respectivă, în acest caz RIGHT_TOP
.
// Adăugați pe hartă panoul de control și butonul de resetare (creat anterior). festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .push (controlPanelDiv);
Până acum ar trebui să aveți ceva care arată ca un meniu personalizat afișat în partea dreaptă a hărții tale. Deci, tot ce trebuie să faceți este să vă aduceți meniul pentru a face ceva ...
În cursul următoarelor tutoriale, vom obține butonul Evenimente mai mici pentru a afișa fotografii de pe Flickr, iar butonul umbrelă pentru a afișa o suprapunere de hartă cu schițe. (Știu un cliché, dar în timpul lunilor de vară avem aici un pic de ploaie!)
Deci, pentru a obține ceva de funcționare în acest tutorial, am repetat pașii de mai sus pentru a adăuga, de asemenea, un buton Reset la DREAPTA JOS
zonă. Aceasta include codul de împachetare în jurul butonului Reset pentru a apela handelRequests
funcţie.
// Funcția care creează butonul "Reser hartă". funcția createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = '5px'; controlUI2.style.margin = '10px'; controlUI2.style.paddingTop = '2px'; controlUI2.style.paddingBottom = '2px'; controlUI2.style.paddingLeft = '2px'; controlUI2.style.paddingRight = '5px'; controlUI2.style.textAlign = 'centru'; controlUI2.style.width = '148px'; controlUI2.style.height = '31px'; controlUI2.innerHTML = '„; resetButtonDiv.appendChild (controlUI2);
handelRequests
funcția face câteva lucruri - aruncați o privire la comentariile din cod.
// Funcție care se numește atunci când sunt apăsate butoanele "evenimente mai mici", unbrella sau "reset harta". funcția handelRequests (butonul Imprimat) if (buttonPressed === "reset") // Reinițializează zoomul, poziția hărții și z-indiciile markerului în poziția lor orignală. De asemenea, închide toate infoboxurile deschise în prezent. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // Aceasta este o funcție pe care am creat-o care închide casetele de informații care sunt deschise. closeAllInfoboxes (); altfel dacă (buttonPressed === "small_events") alert ("Acest buton va face ceva util într-un tutorial mai târziu!"); altfel dacă (buttonPressed === "rainfall") alert ("Acest buton va face ceva util într-un tutorial mai târziu!");
Puteți obține o copie completă a fișierului html pentru această parte a tutorialului din partea de sus a acestei pagini sau puteți arunca o privire la exemplul live. Doar marcatorul de hartă din Glastonbury este activ în acest exemplu.
Asta e pentru acest tutorial! Sperăm că acum aveți ceva de lucru care seamănă vag cu imaginea din partea de sus a acestei pagini. Dacă ceva a dispărut, aruncați o privire prin fișierele descărcabile disponibile pe GitHub. Am inclus codul în fișiere separate pentru fiecare parte a acestui tutorial, astfel încât ar trebui să puteți lucra acolo unde totul a mers prost.
Următorul tutorial va examina modul în care puteți utiliza API-ul Google Maps pentru a vă aduce la viață propriile hărți (de exemplu, o hartă sau o hartă istorică), făcându-le să fie vizibile și interactive.
Fotografiile folosite în acest tutorial au fost publicate sub licența Creative Commons.