Share
I den här handledningen kommer vi att gå igenom processen att skapa en liten widget som gör det möjligt för användare att hämta sväng-för-svänganvisningar till en viss plats. Vi använder Google Maps API, via JavaScript, för att ge denna ganska avancerade funktionalitet.
Den enda försiktigheten med att använda Google Maps är att vi måste ansöka om en API-nyckel, men det här är en ganska trivial process om du redan har ett Google / GMail-konto. Tyvärr på grund av Googles krav måste vi utvecklas på domänen som vi tillhandahåller Google, det vill säga vi kan inte utvecklas på en lokal server. Lyckligtvis för oss är processen snabb och vi spenderar inte mycket tid på live-servern. Också, var noga med att lagra API-nyckeln på ett säkert ställe eftersom jag inte kunde hitta ett sätt att hämta dem en gång genererat, men jag antar att du bara kan skapa en ny.
Innan vi dyker in i kod låt mig diskutera orsaken bakom denna idé. Som de flesta utvecklare spenderar jag mycket tid på webben. En viss delmängd av webbplatser jag besöker är lokala företag som säkert inte har stora resurser att ägna sig åt webbdesign, men förhoppningsvis kommer de personer som utvecklar dessa webbplatser att se artiklar som detta och inser hur lätt det är att inkludera en komplett karta till vilken webbsida som helst. Nästan alla webbplatser som representerar ett litet företag har en sida för att berätta för användarna hur de ska lokalisera sin fysiska plats. Ofta får du en karta med platsen på den, vilket inte hjälper användare som inte känner till området. I den här handledningen kommer vi att ändra det och låta användarna skriva in deras adress och få sväng-för-svänganvisningar till vilken adress vi vill ha.
Nu när soapboxen är ute av drift kan vi titta på kod. Det första vi behöver göra är att inkludera Javascript-biblioteket som innehåller alla Google Maps-metoder. Google genererade antagligen den här koden när du skapade API-nyckeln, men det kan ha pekat på version 3 API som fortfarande är i beta-testning. Här är länken till API-versionen 2, var noga med att infoga din API-nyckel. Vi kommer även att inkludera en fil, application.js som håller våra anpassade funktioner lagrade jag gruvan i en katalog på roddnivån som heter js. Följande kod går in i huvuddelen av din sida.
I kroppssektionen på vår sida behöver vi lite begränsat markup. Jag går kort över de nödvändiga bitarna, och du kan titta på källkoden för att se fluffen som jag inkluderade i min demo. Det första elementet är en tom div med ett ID på map_canvas, Det här är platshållaren som vi pekar på Google Maps-samtal till och det genererar all kartmarkering inom det här elementet.
Därefter skapade jag en div för att hålla organisationsadressen och formuläret för användaren att ange adressen. Du kan titta över den här koden men det är ganska enkelt och inte särskilt svårt att urskilja det möte. Var noga med att titta på min CSS för att se hur den är stylad i min demo.
Vår adress
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Din adress
Observera att vi skickar denna sida till sig själv så att vi kan bearbeta sidan med hjälp av PHP om användaren har JS disabled. Om de har JS aktiverat vill vi utföra en funktion, overlayDirections () som vi kommer att ta en titt på lite senare. Huvuddelen av den här koden går till väljrutan som låter användaren välja sin stat, jag har kondenserat det för att de ska skriva ut den här artikeln, men du kan ta tag i hela koden från nedladdningen. Andra intressanta anteckningar är att vi ställer in storlek och Maxlängd av postnummerfältet till 5. Det sista som ska noteras är att vi har tilldelat ids och namn till alla formelementen.
Okej nu kan vi flytta in i köttet i denna handledning, JavaScript-koden. Nästan alla samtal vi kommer att göra kommer från Google Maps API som vi refererade tidigare. Google tillhandahåller utmärkt dokumentation och exempelkod på deras hemsida så var noga med att kolla in det. Jag ska försöka länka till relevanta sidor när jag använder dem.
Det första är att samtidigt som vi har vår HTML-sida öppen kan startstart initiera funktionen genom att ställa in onload attribut. Notera: detta kan göras i jQuery med hjälp av $ (Dokument) .ready () fungera.
Nu ska vi flytta in till js / appication.js fil. Det allra första vi behöver göra är att ställa in några variabler. Vissa kodevangelister kommer sannolikt att jaga mig för att deklarera globala variabler, men jag tror i det här fallet att vi borde vara okej. Jag ska ge dig koden och förklara hur vi ska använda var och en.
varifrån, från Adress till Adress
Funktionen initialisera () som vi ringde tidigare kommer att användas för att skapa kartan på sidan och placera en anpassad markör för vår plats.
Accentsconagua
/ * ** * Bootstrap-funktionen för att konfigurera kartan och tillämpa * anpassad företagsmarkör * / funktion initiera () if (GBrowserIsCompatible ()) // settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = ny GLatLng (38,957101, -95,251469); var companyMarkerSize = ny GSize (55, 52); // bredd, höjd tillAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // Slut inställningar // Inställningselement map = Ny GMap2 (Document.getElementById ("map_canvas")); gdir = nya GD Directions (map, document.getElementById ("riktningar")); // felhanterare GEvent.addListener (gdir, "error", handleErrors); // set företagsmarkör var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // Ange karta center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Det första vi behöver göra är att kontrollera om webbläsaren är kompatibel med Google Maps, och för det här Google tillhandahåller GBrowserIsCompatible () i deras API. I grunden returnerar det sant om webbläsaren är kompatibel och tillåter oss att flytta in i resten av vår funktion. Jag bestämde mig för att sammanfatta några av värdena till variabler högst upp i funktionen så att det här enkelt skulle kunna portföras till många applikationer.
// inställningar var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = ny GLatLng (38,957101, -95,251469); var companyMarkerSize = ny GSize (55, 52); // bredd, höjd tillAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // slut inställningar
De companyMarkerImage är en sträng av platsen för en liten bild som vi kommer att placera på vår plats på kartan. Det här är något jag tycker är en fin touch att ha en anpassad ikon för att representera ditt företag som kommer att personifiera den generiska Google Map-vyn. Nästa, companyLatLng har ett GLatLng-objekt som motsvarar en latitud-, longitud-punkt i världen. Kör inte ut och köp en GPS-enhet för att få dessa nummer vi kan använda maps.google.com. I sökrutan skriver du din adress och när den hittar platsen klickar du på Länk knappen längst upp till höger på kartan. Bläddra igenom den första textrutan i modalfönstret och hitta & SLL = ... .
Du kan kopiera och klistra in dessa koordinater i parametrarna för vår GLATLng-konstruktör. Detta är punkten på kartan där vi ska placera vår anpassade bild. Nästa variabel, companyMarkerSize, har ett GSize-objekt som representerar bredden och höjden på din anpassade markörbild. Nästa satt vi att poängtera vilken är adressen till verksamheten. Den slutliga variabeln, defaultZoomLevel, berättar bara för kartan vad du vill att standard zoomnivån ska vara från 1 till 18.
// installationselement map = nytt GMap2 (document.getElementById ("map_canvas")); gdir = nya GD Directions (map, document.getElementById ("riktningar")); Nästa kodlinje skapar ett GMap2-objekt. Google beskriver detta som "den centrala klassen i API." Detta laddar kartdata och låter oss manipulera det som visas i kartområdet. Det tar ett argument ett DOM-objekt som pekar på elementet som innehåller kartan, #map_canvas. Nästa satt vi gdir för att hålla GDirections-objektet. Detta är gränssnittet vi använder för att fråga Google Maps för vägbeskrivning. Konstruktören tar två argument ett kartobjekt och ett DOM-objekt där vi vill lägga riktning för sväng-sväng. Jag väljer att skapa en tom div nedan #addresses kallad #directions.
// felhanterare GEvent.addListener (gdir, "error", handleErrors);
När vi använder webbtjänster löper vi alltid risken att få ett fel tillbaka. Vi kan göra detta så smärtfritt som möjligt med hjälp av GEvent-klassen. I denna bit av kod säger vi att om vi har ett fel att få anvisningarna att utföra en anpassad återuppringningsfunktion, handleErrors i vårat fall. Vi ringer direkt funktionen addListener () som registrerar en återuppringning. Det tar 3 argument ett källobjekt, en sträng som hänvisar till typen av händelse som vi vill utföra återkallelsen på, och en hanterare som pekar på en funktion som vi vill exekvera. Funktionen, handleErrors, är något vi kommer att titta på senare.
// set företagsmarkör var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // Ange karta center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
De sista linjerna i initialisera () används för att skapa vår anpassade markör, valde jag en Jayhawk på KU: s hemsida. createMarker är en omslagsfunktion som jag skrev för att abstrahera koden som krävs för att skapa en anpassad markör. Det tar tre argument: en hänvisning till ett GLatLng-objekt där vi vill placera bilden på en sträng som återger vägen till en bild och en referens till ett GSize-objekt som representerar bildens storlek. Därefter använder vi metoden setCenter () i GMap2-klassen som tar två argument ett GLATLng-objekt av koordinaterna att centrera på och ett heltal för zoomnivån. Observera att vi passerar i de variabler vi ställt in i inställningsblocket högst upp i initialisera () fungera. Den sista raden av kod använder metoden addOverlay (). Det här är det som faktiskt lägger till den anpassade bilden på kartan.
De initialisera () funktionen gör mycket tungt lyft, men det kan verkligen visa för det. Efter att vi har skrivit createMarker () funktion nästa du kommer att kunna ladda upp ansökan och se några framsteg. Men först får vi läsa om initialisera () fungera.
Nästa kommer vi att skapa en wrapper-funktion som tar all smärta av att skapa en markör med en anpassad bild. Anledningen till att jag väljer att abstrahera detta beror på att det är en inblandad process och skulle störa oss initialisera () funktion ännu mer. En annan extra fördel är att vi kan lägga till flera markörer mycket snabbt utan att upprepa mycket kod.
/ * ** * Wrapper-funktion för att skapa / returnera ett markörobjekt * med anpassad bild * / funktion createMarker (latlng, imageURL, imageSize) var markör = ny GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; returnera ny GMarker (latlng, icon: marker);
Betydligt mindre än vår första funktion, men lika viktigt. Först förklarar vi en ny variabel, markör, och lagra ett GIcon-objekt. Det kan ta två argument kopia som är ett GIcon objekt som det kommer att kopiera egenskaper från, och bild som är en sträng som representerar en sökväg till en anpassad bild. G_DEFAULT_ICON är en konstant som representerar en standardmarkör, och imageURL kommer från inställningsblocket initialisera (). Vi behöver bara ställa in en enda egenskap, ikonenSize som är av typen GSize, det här representerar storleken på vår anpassade bild och kommer också från inställningsblocket. Den sista raden av kod returnerar ett GMarker-objekt som tar två argument latlng och ikon. Den första, latlng är en referens till GLatLng-objektet som vi deklarerade i inställningsblocket. Nästa argument är för GIcon-objektet som vi just skapat. Det är allt vi behöver göra för kartdelen av vår ansökan till jobbet. Nu kan du ladda upp sidan och se hur lätt det är att få en bra karta på vår hemsida.
Det här är överlägset min favorit del om denna handledning, så att användarna kan skriva in en adress och ta emot en karta med rutten markerade och sväng för svänganvisningar. Genom användningen av detta API kan vi kondensera något som skulle kräva tusentals linjer kod och en otrolig mängd bearbetningsresurser till bara en handfull kod.
/ * ** * Söker upp riktningarna, överlämnar rutten på kartan, * och skriver sväng-vid-sväng till #directions. * / function overlayDirections () fromAddress = document.getElementById ("street"). värde + "" + document.getElementById ("city") .värde + "" + document.getElementById ("state"). getElementById ("state"). selectedIndex] .value + "" + document.getElementById ("zip"). värde; gdir.load ("from:" + fromAddress + "till:" + tillAddress); Den första raden jag faktiskt har utvidgat till fem linjer för tydlighet. I grunden griper detta alla värden från formuläret och sätter ett mellanslag mellan varje del. Jag trodde det var bättre än att be användaren att ange hela adressen i en enda textruta eftersom det kan bli förvirrande.
Den andra raden använder sig av gdir vi satt in initialisera (). Vi kallar metoden load () och skickar ett enda strängargument, vilket är i huvudsak vad vi skulle skicka maps.google.com via sökrutan. De från: och till: sökord hjälper till att berätta för Google vilken adress som ska vara utgångspunkten och vilken måste vara slutpunkten. Det är allt vi behöver göra för riktningar, ja jag var också chockad! Om du besöker din sida igen kan du se detta i åtgärd.
Nästa kommer vi att förklara handleErrors () fungera. Jag tog tag i detta från Google Sample-kod på deras API-webbplats. Jag kommer inte att gå in på några detaljer eftersom det är ganska enkelt.
funktionshandtagError () om (gdir.getStatus () .code == G_GEO_UNKNOWN_ADDRESS) alert ("Ingen motsvarande geografisk plats kunde hittas för en av de angivna adresserna. Det kan bero på att adressen är relativt ny, eller det kan vara felaktigt. \ nFelskod: "+ gdir.getStatus (). kod); Annars om (gdir.getStatus () .code == G_GEO_SERVER_ERROR) alert ("En geokodnings- eller riktningsförfrågan kunde inte behandlas framgångsrikt, men den exakta orsaken till felet är inte känt. \ n Felkod:" + gdir.getStatus ).koda); annars om (gdir.getStatus () .code == G_GEO_MISSING_QUERY) varning ("HTTP q-parametern saknades eller hade inget värde. För geocoderförfrågningar betyder det att en tom adress anges som inmatning. att ingen fråga angavs i inmatningen. \ n Felkod: "+ gdir.getStatus (). code); annars om (gdir.getStatus () .code == G_GEO_BAD_KEY) alert ("Den angivna nyckeln är antingen ogiltig eller matchar inte domänen som den gavs. \ n Felkod:" + gdir.getStatus (). kod) ; annars om (gdir.getStatus () .code == G_GEO_BAD_REQUEST) alert ("En anvisningsbegäran kunde inte analyseras framgångsrikt. \ n Felkod:" + gdir.getStatus (). code); annars varning ("Ett okänt fel inträffade."); Det har länge om ... elseif ... annat uttalande som kontrollerar många feltyper och varnar användaren om något inträffar. Du kan ändra detta om du vill göra varningen mindre teknisk.
Som bra webbutvecklare borde vi se till att vår webbplats fungerar för så många användare som möjligt, inklusive de som har JavaScript inaktiverat. I den här situationen valde jag att omdirigera dem med JS inaktiverad till Google Maps med sökningen utförd så att de fortfarande får vägbeskrivningar. Detta görs genom att använda PHP för att utvärdera formuläret och omdirigera till Google Maps. Lägg till den här koden högst upp på din HTML-sida:
...
Först har vi ett inställningsblock igen som endast har en variabel att ställa in, $ TO. Detta liknar vad vi gjorde i JavaScript för att poängtera, men vi behöver samma sträng i PHP också. Nästa har vi ett if-förklaring för att kontrollera POSTed-data vilket innebär att vår blankett skickades in. Nu tar vi formvärdena och lägger dem i en sträng med mellanslag och lagrar det i en variabel, $ FRÅN. Då lagrar vi språkvärdet till $ LOC, mer om detta senare. De $ url variabel kommer att hålla strängen som representerar sökadressen till Google. Observera att vi URL-kodar våra värden så att de reser säkert på omdirigeringen. Den sista raden av kod använder PHP-rubriker för att omdirigera användaren till Google.
Som företag du vill nå ut till så många som möjligt och en del av den processen stöder flera språk. I Google Maps stöder andra språk utan extra kostnad för oss.
Öppna först din HTML-sida och sätt in följande kod mellan dina formstaggar.
... ...
Självklart om du vill ta bort några språk, raderar du bara alternativtiketten för det, men du kan också ändra standard genom att flytta det valda attributet.
Flyttar till js / application.js, vi behöver bara göra två ändringar. Börjar i overlayDirections () funktionen efter att vi skapat strängen ADDRESS lägg till det här för att ta tag i det valda värdet från språkkryssrutan och spara det till vår språkvariabel.
... var language = document.getElementById ("language"). Alternativ [document.getElementById ("language"). SelectedIndex] .value; ... Lägg sedan till ett argument till gdir.load () funktion, detta tar en inställd inställning. I vårt fall behöver vi bara förklara locale så det vet rätt språk och enheter för sväng-för-sväng riktningar.
... gdir.load ("från:" + frånAdress + "till:" + tillAddress, "locale": språk); ... Notera: Vi har redan med det här i PHP-omdirigering och om du vill inaktivera det här bara statiskt sett $ LOC.
... $ LOC = 'sv' ...
Det är allt vi behöver för denna fantastiska funktion, och jag hoppas att du lärde dig lite om Google Maps under vägen. Jag utmanar dig som utvecklare för att fortsätta hitta intressanta sätt att integrera kartor i dina applikationer. När som helst en modell är plats medveten bör du fråga om ditt projekt har en användning för visuell representation på en karta. Tack för att du läser; som alltid är jag här för att hjälpa till i kommentarerna eller på Twitter (@noahhendrix).
