Share
În acest tutorial, vom trece prin procesul de creare a unui widget mic care permite utilizatorilor să recupereze indicațiile turn-by-turn către o locație specificată. Vom utiliza API-ul Google Maps, prin JavaScript, pentru a oferi această funcționalitate destul de avansată.
Singura avertizare cu ajutorul Google Maps este că trebuie să aplicăm pentru o cheie API, dar acesta este un proces destul de banal dacă aveți deja un cont Google / GMail. Din nefericire, datorită cerințelor Google, trebuie să ne dezvoltăm pe domeniul pe care îl oferim Google, adică nu ne putem dezvolta pe un server local. Din fericire pentru noi procesul va fi rapid și nu vom petrece prea mult timp pe serverul live. De asemenea, asigurați-vă că ați păstrat cheia API într-un loc sigur pentru că nu am putut găsi o modalitate de a le recupera o dată generată, deși cred că ați putea recrea doar una.
Înainte de a se scufunda în cod, permiteți-mi să discut motivul din spatele acestei idei. Ca majoritatea dezvoltatorilor, petrec mult timp pe web. Un anumit subset de site-uri pe care le vizitez sunt companii locale care, cu siguranță, nu dispun de resurse mari pentru a se dedica designului web, dar, sperăm, oamenii care dezvoltă aceste site-uri vor vedea articole de acest fel și vor realiza cât de ușor este să includă un full featured hartă în orice pagină web. Aproape orice site web reprezentând o afacere mică are o pagină dedicată să spună utilizatorilor cum să-și găsească locația fizică. De multe ori obțineți o hartă cu locația lor fixată, ceea ce nu ajută utilizatorii care nu cunosc zona. În acest tutorial vom schimba acest lucru și lăsăm utilizatorilor să introducă adresa lor și să obțină indicații turn-by-turn la orice adresă dorită.
Acum, că soapbox-ul este în afara drumului vă permite să căutați în cod. Primul lucru pe care trebuie să-l facem este includerea bibliotecii Javascript care conține toate metodele Google Maps. Google a generat probabil acest cod atunci când ați creat cheia dvs. API, dar acest lucru ar fi indicat API-ul versiunii 3, care este încă în testare beta. Iată legătura cu versiunea API 2: asigurați-vă că introduceți cheia API. De asemenea, vom include un fișier, application.js care va deține funcțiile personalizate, am stocat-o pe mine într-un director la nivelul rădăcină numit js. Următorul cod merge în secțiunea de cap a paginii dvs..
În secțiunea corp a paginii noastre avem nevoie de un marcaj limitat. Voi trece pe scurt biții necesari și vă puteți uita la codul sursă pentru a vedea puful pe care l-am inclus în demo-ul meu. Primul element este o div divizată cu un ID de map_canvas, acesta este un substituent pe care îl indicăm prin apelurile Google Maps și acesta va genera toate marcajele de hartă din acel element.
În continuare am creat un div pentru a ține adresa organizației și formularul pentru ca utilizatorul să introducă adresa. Puteți să vă uitați la acest cod, dar este destul de simplu și nu este foarte greu de discernut întâlnirea. Asigurați-vă că te uiți la CSS-ul meu pentru a vedea cum este stilul meu în demo-ul meu.
Adresa noastră
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Adresa ta
Observați că trimitem această pagină la sine, aceasta este astfel încât să putem procesa pagina utilizând PHP dacă utilizatorul are JS dezactivat. Dacă au JS activat, vrem să executăm o funcție, overlayDirections () pe care o vom arunca o privire mai târziu. Cea mai mare parte a acestui cod merge în caseta de selectare care permite utilizatorului să-și aleagă starea, am condensat-o de dragul celor care tipăresc acest articol, dar puteți lua codul complet din descărcare. Alte note interesante le punem mărimea și lungime maxima din câmpul de text cu cod poștal la 5. Ultimul lucru de luat în considerare este că am atribuit ID-uri și nume tuturor elementelor de formă.
Bine, acum putem trece în carnea acestui tutorial, codul JavaScript. Aproape toate apelurile pe care le vom face provin din API-ul Google Maps pe care l-am referit mai devreme. Google furnizează o documentație excelentă și un exemplu de cod pe site-ul lor, astfel încât asigurați-vă că o verificați. Voi încerca să mă conectez la paginile relevante pe măsură ce le folosesc.
Primul lucru este că în timp ce avem pagina noastră HTML deschisă, permiteți bootstrap funcția de inițializare prin setare onload atribut. Notă: acest lucru se poate face în jQuery folosind $ (Document) .ready () funcţie.
Acum ne vom îndrepta spre js / appication.js fişier. Primul lucru pe care trebuie să-l facem este stabilirea unor variabile. Unii evangheliști de cod probabil mă vor vâna pentru declararea variabilelor globale, dar cred că în acest caz ar trebui să fim bine. Îți dau codul și explici cum vom folosi fiecare.
var gdir, de laAddress laAddress;
Funcția initialize () pe care am apelat-o mai devreme va fi utilizată pentru a crea harta pe pagină și a plasa un marcaj personalizat al locației noastre.
Accentsconagua
/ * ** * Funcția Bootstrap pentru a configura harta și a aplica * markerul companiei personalizate * / funcția initialize () if (GBrowserIsCompatible ()) // settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = noul GLatLng (38.957101, -95.251469); var companyMarkerSize = nou GSize (55, 52); // lățime, înălțime laAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // setările de sfârșit // elemente de configurare map = nou GMap2 (document.getElementById ("map_canvas")); gdir = noi GDirections (map, document.getElementById ("directions")); // instrument de eroare GEvent.addListener (gdir, "error", handleErrors); // set marker companie var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // setați harta hărții centru.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Primul lucru pe care trebuie să-l facem este să verificăm dacă browserul este compatibil cu Google Maps și pentru aceasta Google oferă GBrowserIsCompatible () în API-ul lor. În esență, se întoarce adevărat dacă browserul este compatibil și ne permite să ne mutăm în restul funcției noastre. Am hotărât să abstracționez câteva valori la variabile în partea superioară a funcției, astfel încât acest lucru să poată fi ușor portat în multe aplicații.
// setări var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = noul GLatLng (38.957101, -95.251469); var companyMarkerSize = nou GSize (55, 52); // lățime, înălțime laAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // setările de sfârșit
companyMarkerImage este un șir de locație a unei imagini mici pe care o vom plasa în locația noastră pe hartă. Acesta este un lucru care cred că este o atingere plăcută pentru a avea o pictogramă personalizată care să reprezinte afacerea dvs., care va personaliza afișarea generică Google Map. Următor →, companyLatLng deține un obiect GLatLng corespunzător unui punct de latitudine, longitudine în lume. Nu terminați și cumpărați un dispozitiv GPS pentru a obține aceste numere, putem folosi maps.google.com. În caseta de căutare introduceți adresa și când găsiți locația faceți clic pe Legătură în partea dreaptă sus a hărții. Derulați prin prima casetă de text din fereastra modală și găsiți & SLL = ... .
Puteți copia și insera aceste coordonate în parametrii constructorului nostru GLatLng. Acesta este punctul de pe harta unde vom plasa imaginea personalizata. Următoarea variabilă, companyMarkerSize, deține un obiect GSize care reprezintă lățimea și înălțimea imaginii personalizate a marcatorului. Apoi am setat toAddress care este adresa firmei. Variabila finală, defaultZoomLevel, doar spune harta ceea ce doriți ca nivelul de zoom implicit să fie cuprins între 1 și 18.
// elemente de configurare map = nou GMap2 (document.getElementById ("map_canvas")); gdir = noi GDirections (map, document.getElementById ("directions")); Următoarea linie de cod creează un obiect GMap2. Google descrie acest lucru ca fiind "clasa centrală în API". Aceasta încarcă datele de pe hartă și ne permite să manipulăm ceea ce este afișat în zona hărții. Este nevoie de un argument pentru obiectul DOM care să indice elementul care conține harta, #map_canvas. Apoi am setat gdir pentru a ține obiectul GDirections. Aceasta este interfața utilizată pentru a interoga Hărți Google pentru indicații de orientare. Constructorul are două argumente: un obiect de hartă și un obiect DOM unde vrem să introducem direcțiile de la sfârșitul traseului. Eu aleg să creez o div divizată mai jos #addresses denumit #directii.
// instrument de eroare GEvent.addListener (gdir, "error", handleErrors);
Când folosim serviciile web, riscăm întotdeauna să primim o eroare returnată. Putem face acest lucru ca pe o durere cât mai liberă folosind clasa GEvent. În acest bit de cod, spunem că dacă avem o eroare de a obține instrucțiunile pentru a executa o funcție personalizată de apel invers, handleErrors în cazul nostru. Apelam direct funcția addListener () care înregistrează un apel invers. Este nevoie de 3 argumente pentru un obiect sursă, un șir referitor la tipul de eveniment pe care dorim să executăm apelul invers și un handler care indică o funcție pe care dorim să o executăm. Functia, handleErrors, este ceva la care ne vom uita mai târziu.
// set marker companie var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // setați harta hărții centru.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
Ultimele câteva linii din inițializa () sunt folosite pentru a crea marker personalizat, am ales un Jayhawk găsit pe pagina de pornire a KU. createMarker este o funcție de împachetare am scris pentru a rezuma codul necesar pentru a crea un marker personalizat. Este nevoie de trei argumente: o referință la un obiect GLatLng în care dorim să plasăm imaginea pe un șir reprezentând calea spre o imagine și o referință la un obiect GSize care reprezintă dimensiunea imaginii. Apoi vom folosi metoda setCenter () a clasei GMap2 care are două argumente în care un obiect GLatLng al coordonatelor să fie centrat și un întreg pentru nivelul de mărire. Observați că trecem în variabilele pe care le setăm în blocul de setări din partea de sus a paginii inițializa () funcţie. Linia finală de cod folosește metoda addOverlay (). De fapt, aceasta adaugă imaginea personalizată pe hartă.
inițializa () funcția face o mulțime de ridicare grele, dar cu siguranță poate arăta pentru ea. După ce scriem createMarker () apoi veți putea încărca aplicația și veți vedea unele progrese. Dar mai întâi permite să recapitulăm inițializa () funcţie.
Apoi vom crea o funcție de împachetare care face toată durerea din crearea unui marcator cu o imagine personalizată. Motivul pentru care am ales să abordez acest lucru este că este un proces implicat și ne-ar deranja inițializa () funcționează chiar mai mult. Un alt avantaj adăugat este faptul că putem adăuga mai mulți markeri foarte rapid fără a repeta o mulțime de cod.
/ * ** * Funcția Wrapper pentru a crea / returna un obiect marker * cu imaginea particularizată * / funcția createMarker (latlng, imageURL, imageSize) var marker = nou GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imagineSize; returnați noul GMarker (latlng, icon: marker);
Considerabil mai mică decât prima noastră funcție, dar la fel de importantă. Mai întâi declarăm o nouă variabilă, marcator, și să stocați un obiect GIcon. Poate fi nevoie de două copiere de argumente care reprezintă un obiect GIcon pe care îl vor copia proprietățile și o imagine care este un șir reprezentând o cale spre o imagine personalizată. G_DEFAULT_ICON este o constantă care reprezintă un marcator implicit, iar imageURL provine din blocul de setări din inițializa (). Trebuie doar să setăm o altă proprietate, iconSize care este de tip GSize, aceasta reprezintă dimensiunea imaginii personalizate și, de asemenea, vine din blocul de setări. Linia finală de cod returnează un obiect GMarker care are două argumente și o pictogramă. Prima, latlng este o referință la obiectul GLatLng pe care l-am declarat în blocul de setări. Următorul argument este pentru obiectul GIcon pe care tocmai l-am creat. Acesta este tot ce trebuie să facem pentru porțiunea de hartă a aplicației noastre de a lucra. Acum puteți încărca pagina și puteți vedea cât de ușor este să obțineți o hartă frumoasă pe site-ul nostru.
Aceasta este de departe partea mea favorită despre acest tutorial, permițând utilizatorilor să introducă o adresă și să primească o hartă cu direcțiile evidențiate și direcționate. Prin utilizarea acestui API putem condenseze ceva care ar necesita mii de linii de cod și o cantitate incredibilă de resurse de procesare la doar o mână de cod.
/ * ** * Căutând direcțiile, suprapuneri ruta pe hartă, * și printează turn-by-turn la #directions. * / function overlayDirections () dinAddress = document.getElementById ("street"). valoare + + "document.getElementById (" city "). getElementById ("state"). selectIndex] .value + "" + document.getElementById ("zip") valoare; gdir.load ("de la:" + de laAddress + "la:" + toAddress); Prima linie pe care am extins-o în cinci linii pentru claritate. În esență, aceasta captează toate valorile din formular și pune un spațiu între fiecare parte. Am crezut că este mai bine decât să cereți utilizatorului să introducă întreaga adresă într-o singură casetă de text, deoarece aceasta poate deveni confuză.
A doua linie utilizează gdir am intrat inițializa (). Apelăm metoda load () și transmitem un argument cu un singur șir, care este, în esență, ceea ce am trece prin maps.google.com prin caseta de căutare. din: și la: cuvintele cheie ajută să spună Google care adresa trebuie să fie punctul de plecare și care trebuie să fie punctul final. Asta e tot ce trebuie să facem pentru direcții, da, și eu am fost șocat! Dacă vizitați din nou pagina dvs., puteți vedea acest lucru în acțiune.
Apoi vom declara handleErrors () funcţie. Am luat acest lucru din codul Google Sample pe site-ul API-ului. Nu voi intra în detalii, pentru că este destul de simplu.
funcția handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alertă ("Nu s-a găsit nici o locație geografică corespunzătoare pentru una dintre adresele specificate. poate fi incorect. \ nCodul erorii: "+ gdir.getStatus ().); altul dacă (gdir.getStatus () code == G_GEO_SERVER_ERROR) alertă ("O solicitare geocodică sau de direcționare nu a putut fi procesată cu succes, totuși motivul exact al eșecului nu este cunoscut. \ n Codul de eroare:" + gdir.getStatus ).cod); altceva dacă (gdir.getStatus () code == G_GEO_MISSING_QUERY) alertă ("Parametrul q HTTP a fost fie lipsește, fie nu a avut nicio valoare, pentru cererile geocoder, aceasta înseamnă că o adresă goală a fost specificată ca intrare. că nu a fost specificată nici o interogare în intrare. \ n Codul de eroare: "+ gdir.getStatus (). altul dacă (gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("Cheia dată este fie nevalidă, fie nu se potrivește cu domeniul pentru care a fost dat codul de eroare" + gdir.getStatus () ; altul dacă (gdir.getStatus (). code == G_GEO_BAD_REQUEST) alertă ("O solicitare de direcționare nu a putut fi analizată cu succes. \ n Cod de eroare:" + gdir.getStatus (). alt alert ("A apărut o eroare necunoscută."); Are o instrucțiune lungă dacă ... elseif ... else care verifică mai multe tipuri de erori și avertizează utilizatorul dacă apare. Puteți modifica acest lucru dacă doriți să faceți alerta mai puțin tehnică.
Ca dezvoltatori de web bun, trebuie să ne asigurăm că site-ul nostru funcționează pentru cât mai mulți utilizatori posibil, inclusiv cei cu JavaScript dezactivat. În această situație, am ales să redirecționez persoanele cu JS cu handicap la Hărți Google cu ajutorul căutării efectuate, astfel încât să obțină în continuare indicații. Acest lucru se face folosind PHP pentru a evalua forma și a redirecționa către Google Maps. În partea de sus a paginii HTML introduceți acest cod:
...
Mai întâi avem din nou un bloc de setări, care are doar o variabilă de setat, $ TO. Acest lucru este similar cu ceea ce am făcut în JavaScript pentru toAddress, dar avem nevoie de același șir și în PHP. Apoi avem o declarație if pentru a verifica datele postate, ceea ce înseamnă că forma noastră a fost trimisă. Acum, luăm valorile formularului și le plasăm într-un șir cu spații și stocăm într-o variabilă, $ DIN. Apoi stocăm valoarea limbajului $ LOC, mai multe despre asta mai târziu. $ url variabila va păstra șirul care reprezintă adresa URL a interogării la Google. Rețineți că ne codificăm url valorile astfel încât acestea să călătorească în siguranță în redirecționare. Linia finală de cod utilizează anteturile PHP pentru a redirecționa utilizatorul la Google.
Ca o afacere pe care doriți să o contactați cât mai multor persoane și o parte din acest proces sprijină mai multe limbi. În Hărți Google, care acceptă alte limbi, nu vine la noi costuri suplimentare.
Mai întâi deschideți pagina HTML și introduceți următorul cod între etichetele de formular.
... ...
Desigur, dacă doriți să ștergeți orice limbă, trebuie doar să ștergeți eticheta opțiunii pentru aceasta, de asemenea, puteți modifica implicit prin mutarea atributului selectat.
Mutarea la js / application.js, trebuie să facem doar două schimbări. Începând cu overlayDirections () după ce vom crea șirul FROMADDRESS adăugați aceasta pentru a apuca valoarea selectată din caseta de selectare a limbii și a le salva în variabila noastră de limbă.
... var language = document.getElementById ("limbă") opțiuni [document.getElementById ("language"). Apoi, adăugați un argument la gdir.load () , aceasta necesită setarea opțiunilor. În cazul nostru, trebuie doar să declarem locale astfel încât să știe limba și unitățile adecvate pentru instrucțiunile de tip turn-by-turn.
... gdir.load ("de la:" + de laAddress + "la:" + toAddress, "locale": language); ... Notă: Am inclus deja acest lucru în redirecționarea PHP și dacă doriți să dezactivați această setare doar static $ LOC.
... $ LOC = 'en' ...
Asta este tot ce avem nevoie pentru această caracteristică uimitoare și sper că ați învățat puțin despre Google Maps de-a lungul drumului. Vă provoc ca pe dezvoltatori să continuați să găsiți modalități interesante de integrare a hărților în aplicațiile dvs. Oricând un model este localizat, trebuie să întrebați dacă proiectul dvs. are o utilizare pentru reprezentarea vizuală pe o hartă. Vă mulțumim pentru lectură; ca întotdeauna, eu sunt aici pentru a vă ajuta în comentariile sau pe Twitter (@noahhendrix).
