Share
I denne veiledningen vil vi gå gjennom prosessen med å lage en liten widget som gjør det mulig for brukere å hente sving-til-sving retninger til et bestemt sted. Vi bruker Google Maps API, via JavaScript, for å gi denne ganske avanserte funksjonaliteten.
Den eneste advarselen ved bruk av Google Maps er at vi må søke om en API-nøkkel, men dette er en ganske triviell prosess hvis du allerede har en Google / GMail-konto. Dessverre på grunn av kravene til Google må vi utvikle seg på domenet som vi tilbyr Google, det vil si at vi ikke kan utvikle seg på en lokal server. Heldigvis for oss vil prosessen bli rask, og vi vil ikke bruke mye tid på live-serveren. Vær også sikker på å lagre API-nøkkelen på et trygt sted fordi jeg ikke kunne finne en måte å hente dem en gang generert, selv om jeg antar at du bare kunne gjenskape en.
Før vi dykker inn i koden, la meg diskutere årsaken bak denne ideen. Som de fleste utviklere bruker jeg mye tid på nettet. En bestemt delmengde av nettsteder jeg besøker er lokale bedrifter som sikkert ikke har gode ressurser til å bruke til webdesign, men forhåpentligvis vil de som utvikler disse nettstedene se artikler som dette og innse hvor lett det er å inkludere en fullverdig Kart inn på hvilken som helst nettside. Nesten alle nettsteder som representerer en liten bedrift, har en side dedikert til å fortelle brukere hvordan de skal lokalisere sin fysiske plassering. Ofte får du et kart med plassering som er festet på den, noe som ikke hjelper brukere som ikke kjenner området. I denne opplæringen skal vi endre det og la brukerne skrive inn adressen deres og få veibeskrivelser til enhver adresse vi vil ha.
Nå som såpekassen er ute av veien, kan vi se på koden. Det første vi må gjøre er å inkludere Javascript-biblioteket som inneholder alle Google Maps-metodene. Google genererte trolig denne koden når du opprettet API-nøkkelen, men det kan ha pekt på API 3 for versjon 3 som fortsatt er i beta-testing. Her er koblingen til API-versjonen 2, må du sette inn API-nøkkelen. Vi skal også inkludere en fil, application.js som vil holde våre egendefinerte funksjoner, lagret jeg min i en katalog på rotenivå som heter js. Følgende kode går i hovedenheten på siden din.
I kroppsseksjonen på siden vår trenger vi litt begrenset oppslag. Jeg vil kort gå over de nødvendige brikkene, og du kan se på kildekoden for å se fluffen jeg inkluderte i min demo. Det første elementet er en tom div med en ID av map_canvas, Dette er plassholderen som vi peker Google Maps-anropene til, og det vil generere alt kartoppslaget innenfor det aktuelle elementet.
Deretter opprettet jeg en div for å holde organisasjonsadressen og skjemaet for brukeren til å skrive inn adressen sin. Du kan se over denne koden, men det er ganske enkelt og ikke veldig vanskelig å skille det er møte. Pass på å se på CSS for å se hvordan den er stylet i min demo.
Vår adresse
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Adressen din
Legg merke til at vi sender inn denne siden til seg selv, slik at vi kan behandle siden ved hjelp av PHP hvis brukeren har JS deaktivert. Hvis de har JS aktivert, vil vi utføre en funksjon, overlayDirections () som vi vil ta en titt på litt senere. Hoveddelen av denne koden går til velg boksen som lar brukeren velge sin tilstand, jeg har kondensert det for å skrive ut denne artikkelen, men du kan hente full koden fra nedlastingen. Andre interessante notater er at vi setter størrelse og maks lengde av postnummeret til postnummeret til 5. Den endelige tingen å merke seg er at vi har tildelt ids og navn til alle formelementene.
Ok, nå kan vi flytte inn i kjøttet i denne opplæringen, JavaScript-koden. Nesten alle samtalene vi skal gjøre kommer fra Google Maps API som vi refererte tidligere. Google gir utmerket dokumentasjon og eksempelkode på deres nettside, så vær sikker på å sjekke det ut. Jeg vil prøve å koble til relevante sider når jeg bruker dem.
Det første er når vi har vår HTML-side åpen, lar bootstrap initialisere funksjonen ved å sette inn på Last Egenskap. Merk: dette kan gjøres i jQuery ved hjelp av $ (Document) .ready () funksjon.
Nå skal vi flytte inn i JS / appication.js fil. Det aller første vi må gjøre er å sette noen variabler. Noen kodevangelier vil sannsynligvis jakte meg ned for å erklære globale variabler, men jeg tror i dette tilfellet at vi burde være i orden. Jeg vil gi deg koden og deretter forklare hvordan vi skal bruke hver enkelt.
Var fra, fra Adress til Adress;
Funksjonen initialiser () som vi ringte tidligere, vil bli brukt til å opprette Kart på siden og legge til en egendefinert markør for vår plassering.
Accentsconagua
/ * ** * Bootstrap-funksjonen for å konfigurere kart og søke * tilpasset firmamarkør * / funksjon initialisere () hvis (GBrowserIsCompatible ()) // settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = ny GLatLng (38,957101, -95,251469); var companyMarkerSize = ny GSize (55, 52); // bredde, høyde tilAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // ende innstillinger // oppsettelementer map = ny GMap2 (document.getElementById ("map_canvas")); gdir = nye GDirections (map, document.getElementById ("retninger")); // feilbehandler GEvent.addListener (gdir, "error", handleErrors); // sett selskapsmarkør var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // sett kartsenter map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Det første vi må gjøre er å sjekke om nettleseren er kompatibel med Google Maps, og for dette gir Google GBrowserIsCompatible () i deres API. I utgangspunktet returnerer det sant hvis nettleseren er kompatibel og lar oss flytte inn i resten av vår funksjon. Jeg bestemte meg for å oppsummere noen av verdiene til variabler øverst på funksjonen, slik at dette lett kunne overføres til mange applikasjoner.
// innstillinger var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = ny GLatLng (38,957101, -95,251469); var companyMarkerSize = ny GSize (55, 52); // bredde, høyde tilAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // End-innstillinger
De companyMarkerImage er en streng av plasseringen av et lite bilde vi vil plassere på vår plassering på kartet. Dette er noe jeg tror er en fin touch for å ha et egendefinert ikon for å representere virksomheten din som vil tilpasse den generelle Google Map-visningen. neste, companyLatLng har et GLATLng-objekt som tilsvarer et breddegrad, lengdegradspunkt i verden. Ikke kjør ut og kjøp en GPS-enhet for å få disse tallene, vi kan bruke maps.google.com. I søkeboksen skriver du inn adressen din og når den finner plasseringen, klikker du på link knappen øverst til høyre på kartet. Bla gjennom den første tekstboksen i modalvinduet og finn & SLL = ... .
Du kan kopiere og lime inn disse koordinatene i parametrene til vår GLATLng-konstruktør. Dette er punktet på kartet der vi skal plassere vårt tilpassede bilde. Den neste variabelen, companyMarkerSize, har et GSize-objekt som representerer bredden og høyden på ditt egendefinerte markørbilde. Neste satt vi til adresse som er adressen til virksomheten. Den endelige variabelen, defaultZoomLevel, forteller bare kartet hva du vil at standard zoomnivået skal variere fra 1 til 18.
// oppsettelementer map = ny GMap2 (document.getElementById ("map_canvas")); gdir = nye GDirections (map, document.getElementById ("retninger")); Den neste linjeskoden oppretter et GMap2-objekt. Google beskriver dette som "den sentrale klassen i API-en." Dette laster kartdataene og lar oss manipulere det som vises i kartområdet. Det tar ett argument et DOM-objekt som peker på elementet som inneholder kartet, #map_canvas. Neste satt vi gdir å holde GDirections-objektet. Dette er grensesnittet vi bruker til å spørre Google Maps for veibeskrivelse. Konstruktøren tar to argumenter et kartobjekt og et DOM-objekt der vi ønsker å sette veibeskrivelsen. Jeg velger å opprette en tom div nedenfor #adresser kalt #directions.
// feilbehandler GEvent.addListener (gdir, "error", handleErrors);
Når du bruker webtjenester, risikerer du alltid å få en feil returnert. Vi kan gjøre dette så smertefritt som mulig ved hjelp av GEvent-klassen. I denne delen av koden sier vi at hvis vi har en feil, får vi instruksjonene til å utføre en tilpasset tilbakeringingsfunksjon, handleErrors i vårt tilfelle. Vi ringer direkte funksjonen addListener () som registrerer tilbakeringing. Det tar 3 argumenter et kildeobjekt, en streng som refererer til hvilken type arrangement vi vil utføre tilbakeringingen på, og en handler som peker på en funksjon vi vil ha henrettet. Funksjonen, handleErrors, er noe vi vil se på senere.
// sett selskapsmarkør var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // sett kartsenter map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
De siste linjene i initialize () brukes til å lage vår egendefinerte markør, valgte jeg en Jayhawk funnet på KUs hjemmeside. createMarker er en wrapper-funksjon jeg skrev for å abstrahere koden som kreves for å lage en egendefinert markør. Det tar tre argumenter: en referanse til et GLATLng-objekt der vi vil plassere bildet på, en streng som omformer banen til et bilde og en referanse til et GSize-objekt som representerer størrelsen på bildet. Deretter bruker vi setCenter () -metoden til GMap2-klassen, som tar to argumenter, et GLATLng-objekt av koordinatene som skal senteres på, og et heltall for zoomnivået. Legg merke til at vi passerer i variablene vi angir i innstillingene blokkert øverst på siden initialize () funksjon. Den endelige linjen med kode bruker metoden addOverlay (). Dette er det som faktisk legger til det egendefinerte bildet til kartet.
De initialize () funksjonen gjør mye tung løft, men det kan sikkert vise for det. Etter at vi har skrevet createMarker () Funksjonen neste vil du kunne laste opp programmet og se noen fremskritt. Men først la vi gjenskape initialize () funksjon.
Deretter skal vi lage en wrapper-funksjon som tar all smerte ved å lage en markør med et tilpasset bilde. Grunnen til at jeg velger å abstrahere dette er fordi det er en involvert prosess og ville rote opp våre initialize () fungere enda mer. En annen fordel er at vi kan legge til flere markører veldig raskt uten å gjenta mye kode.
/ * ** * Wrapper-funksjon for å lage / returnere et markørobjekt * med tilpasset bilde * / funksjon createMarker (latlng, imageURL, imageSize) var markør = ny GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; returner ny GMarker (latlng, ikon: markør);
Betraktelig mindre enn vår første funksjon, men like viktig. Først erklærer vi en ny variabel, markør, og lagre et GIcon-objekt. Det kan ta to argumenter kopiere som er et GIcon objekt som det vil kopiere egenskaper fra, og bilde som er en streng som representerer en bane til et tilpasset bilde. G_DEFAULT_ICON er en konstant som representerer en standardmarkør, og imageURL kommer fra innstillingene blokkert inn initialize (). Vi må bare sette en ekstra eiendom, iconSize som er av typen GSize, dette representerer størrelsen på vårt egendefinerte bilde, og kommer også fra innstillingsblokken. Den endelige linjen med kode returnerer et GMarker-objekt som tar to argumenter latlng og ikon. Den første, latlng er en referanse til GLatLng-objektet vi erklærte i innstillingsblokken. Det neste argumentet er for GIcon-objektet vi nettopp har opprettet. Det er alt vi trenger å gjøre for kartdelen av søknaden vår til arbeid. Du kan nå laste opp siden og se hvor enkelt det er å få et godt kart på vår nettside.
Dette er langt min favoritt del om denne opplæringen, slik at brukerne kan skrive inn en adresse og motta et kart med ruten uthevet og sving-for-sving retninger. Gjennom bruk av denne API-en kan vi kondensere noe som vil kreve tusenvis av kodelinjer og en utrolig mengde behandlingsressurser til bare en håndfull kode.
/ * ** * Ser opp instruksjonene, overlegger ruten på kartet, * og skriver ut sving-til-sving til #directions. * / funksjon overlayDirections () fromAddress = document.getElementById ("street"). verdi + "" + document.getElementById ("city"). verdi + "" + document.getElementById ("state"). getElementById ("state"). selectedIndex] .value + "" + document.getElementById ("zip"). verdi; gdir.load ("fra:" + fraAdress + "til:" + tilAddress); Den første linjen jeg faktisk har utvidet til fem linjer for klarhet. I utgangspunktet griper alle verdiene fra skjemaet og plasserer mellomrom mellom hver del. Jeg trodde det var bedre enn å be brukeren om å legge inn hele adressen i en enkelt tekstboks fordi det kan bli forvirrende.
Den andre linjen gjør bruk av gdir vi satt inn initialize (). Vi kaller load () -metoden og sender et enkeltstrengargument, som egentlig er hva vi ville passere maps.google.com via søkefeltet. De fra: og til: søkeord hjelper deg med å fortelle Google hvilken adresse som skal være utgangspunktet og som må være sluttpunktet. Det er alt vi trenger å gjøre for veibeskrivelse, ja, jeg var også sjokkert! Hvis du besøker siden din igjen, kan du se dette i aksjon.
Neste kommer vi til å erklære handleErrors () funksjon. Jeg tok dette fra Google Sample-kode på deres API-nettsted. Jeg vil ikke gå inn i noen detaljer fordi det er ganske grei.
FunksjonshåndteringError () hvis (gdir.getStatus () .kode == G_GEO_UNKNOWN_ADDRESS) varsling ("Ingen tilsvarende geografisk plassering ble funnet for en av de angitte adressene. Dette kan skyldes at adressen er relativt ny, eller det kan være feil. \ nErrorkode: "+ gdir.getStatus () .kode); ellers hvis (gdir.getStatus () .kode == G_GEO_SERVER_ERROR) varsling ("En geokoding eller retningsforespørsel kunne ikke behandles, men den eksakte grunnen til feilen er ikke kjent. \ n Feilkode:" + gdir.getStatus ).kode); ellers hvis (gdir.getStatus () .code == G_GEO_MISSING_QUERY) varsling ("HTTP q-parameteren manglet enten eller hadde ingen verdi. For geokoderforespørsler betyr dette at en tom adresse ble spesifisert som input. at ingen forespørsel ble spesifisert i inngangen. \ n Feilkode: "+ gdir.getStatus () .kode); ellers hvis (gdir.getStatus () .code == G_GEO_BAD_KEY) varsling ("Den oppgitte nøkkelen er enten ugyldig eller samsvarer ikke med domenet som den ble gitt. \ n Feilkode:" + gdir.getStatus () .kode) ; ellers hvis (gdir.getStatus () .kode == G_GEO_BAD_REQUEST) varsling ("En forespørselsforespørsel kunne ikke analyseres vellykket. \ n Feilkode:" + gdir.getStatus () .kode); ellers varsling ("En ukjent feil oppsto."); Det har lenge hvis ... elseif ... annet erklæring som sjekker for mange feiltyper og varsler brukeren om noen oppstår. Du kan endre dette hvis du vil gjøre varselet mindre teknisk.
Som gode webutviklere bør vi sørge for at nettstedet vårt fungerer for så mange brukere som mulig, inkludert de med JavaScript deaktivert. I denne situasjonen valgte jeg å omdirigere de med JS deaktivert til Google Maps med søket utført, slik at de fortsatt får veibeskrivelse. Dette gjøres ved hjelp av PHP for å evaluere skjemaet og omdirigere til Google Maps. Øverst på HTML-siden din setter du inn denne koden:
...
Først har vi en innstillingsblokk igjen som bare har en variabel som skal settes, $ TO. Dette ligner på det vi gjorde i JavaScript for til adresse, men vi trenger også samme streng i PHP. Deretter har vi en if-setning for å sjekke om POSTed-data, noe som betyr at skjemaet ble sendt inn. Nå tar vi formverdiene og legger dem i en streng med mellomrom og lagrer det i en variabel, $ FRA. Da lagrer vi språkverdien til $ LOC, mer om dette senere. De $ url variabel vil holde strengen som representerer spørringsadressen til Google. Legg merke til at vi URL-koder våre verdier, slik at de trygt reiser på viderekoblingen. Den endelige linjen med kode bruker PHP-overskrifter for å omdirigere brukeren til Google.
Som en bedrift du vil nå ut til så mange som mulig, og en del av prosessen støtter flere språk. I Google Maps støtter andre språk uten ekstra kostnad for oss.
Først åpne HTML-siden din og sett inn følgende kode mellom skjemaetikettene dine.
... ...
Selvfølgelig, hvis du vil fjerne noen språk, sletter du bare alternativetiketten for det, du kan også endre standard ved å flytte det valgte attributtet.
Flytter til JS / application.js, vi må bare gjøre to endringer. Starter i overlayDirections () funksjonen etter at vi har opprettet strengen FROMADDRESS legg til dette for å hente den valgte verdien fra språkvalg-boksen og lagre den i vår språkvariabel.
... var språk = document.getElementById ("language"). Alternativer [document.getElementById ("language"). SelectedIndex] .value; ... Deretter legger du til et argument til gdir.load () funksjon, dette tar et valgsett. I vårt tilfelle trenger vi bare å erklære locale så det kjenner det riktige språket og enhetene for sving-til-sving retningene.
... gdir.load ("fra:" + fraAdress + "til:" + tilAddress, "locale": språk); ... Merk: Vi har allerede inkludert dette i PHP-omdirigering og hvis du vil deaktivere dette bare statisk sett $ LOC.
... $ LOC = 'no' ...
Det er alt vi trenger for denne fantastiske funksjonen, og jeg håper du har lært litt om Google Maps underveis. Jeg utfordrer deg som utviklere for å fortsette å finne interessante måter å integrere kart på i dine applikasjoner. Når en modell er posisjonert, bør du spørre om prosjektet ditt har bruk for visuell representasjon på et kart. Takk for at du leste; som alltid er jeg her for å hjelpe i kommentarene eller på Twitter (@noahhendrix).
