Share
In deze zelfstudie gaan we door het proces van het maken van een kleine widget waarmee gebruikers stapsgewijze aanwijzingen naar een opgegeven locatie kunnen ophalen. We zullen de Google Maps API via JavaScript gebruiken om deze vrij geavanceerde functionaliteit te bieden.
De enige waarschuwing bij het gebruik van Google Maps is dat we een API-sleutel moeten aanvragen, maar dit is een vrij triviaal proces als je al een Google / GMail-account hebt. Helaas moeten we vanwege de vereisten van Google zich ontwikkelen op het domein dat we Google bieden, dat wil zeggen dat we ons niet kunnen ontwikkelen op een lokale server. Gelukkig voor ons zal het proces snel zijn en zullen we niet veel tijd op de live server doorbrengen. Zorg er ook voor dat u uw API-sleutel op een veilige plaats bewaart, omdat ik geen manier kon vinden om ze op te halen nadat ze zijn gegenereerd, hoewel ik denk dat u er gewoon een kunt maken.
Voordat we in de code duiken, kan ik de reden achter dit idee bespreken. Zoals de meeste ontwikkelaars, breng ik veel tijd door op internet. Een specifieke subset van websites die ik bezoek, zijn lokale bedrijven die zeker niet over geweldige middelen beschikken om zich te wijden aan webdesign, maar hopelijk zullen de mensen die deze sites ontwikkelen artikelen als deze zien en beseffen hoe gemakkelijk het is om een volledige functionaliteit op te nemen kaart in een webpagina. Bijna elke website die een klein bedrijf vertegenwoordigt, heeft een pagina die is bedoeld om gebruikers te vertellen hoe ze hun fysieke locatie moeten vinden. Vaak krijg je een kaart met de locatie erop, wat gebruikers niet helpt die het gebied niet kennen. In deze tutorial gaan we dat veranderen en laten gebruikers hun adres invoeren en krijgen ze turn-by-turn aanwijzingen naar elk gewenst adres.
Nu de zeepkist uit de buurt is, kun je code inzien. Het eerste dat we moeten doen, is de Javascript-bibliotheek die alle Google Maps-methoden bevat. Google heeft deze code waarschijnlijk gegenereerd toen u uw API-sleutel maakte, maar dat kan hebben gewezen op de versie 3 API die nog in bètatest staat. Hier is de link naar de API-versie 2 zorg ervoor dat u uw API-sleutel invoegen. We gaan ook een bestand opnemen, application.js die onze aangepaste functies zal behouden, heb ik de mijne opgeslagen in een map op het rootniveau dat wordt genoemd js. De volgende code komt in het hoofdgedeelte van uw pagina.
In het bodygedeelte van onze pagina hebben we een beperkte opmaak nodig. Ik zal kort de vereiste stukjes doornemen, en je kunt de broncode bekijken om de pluisjes te zien die ik in mijn demo heb opgenomen. Het eerste element is een lege div met een ID van map_canvas, dit is de tijdelijke aanduiding waarnaar we de Google Maps-aanroepen verwijzen en het genereert alle kaartmarkeringen binnen dat element.
Vervolgens heb ik een div gemaakt om het organisatieadres en het formulier voor de gebruiker op te geven om hun adres in te voeren. Je kunt over deze code kijken, maar het is vrij eenvoudig en niet moeilijk om de vergadering te onderscheiden. Zorg ervoor dat je naar mijn CSS kijkt om te zien hoe het in mijn demo is gestileerd.
Ons adres
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Jouw adres
Merk op dat we deze pagina naar zichzelf verzenden. Dit is zodat we de pagina met PHP kunnen verwerken als de gebruiker JS heeft uitgeschakeld. Als ze JS hebben ingeschakeld, willen we een functie uitvoeren, overlayDirections () waar we later een kijkje op zullen nemen. Het grootste deel van deze code gaat naar het selectievak waarin de gebruiker zijn of haar staat kan kiezen, ik heb het gecondenseerd voor degenen die dit artikel hebben afgedrukt, maar u kunt de volledige code uit de download halen. Andere interessante opmerkingen is dat we de grootte en maximale lengte van het zipcodetekstveld naar 5. Het laatste ding om op te letten is dat we id's en namen hebben toegewezen aan alle formulierelementen.
Oké, nu kunnen we beginnen aan het vlees van deze tutorial, de JavaScript-code. Bijna alle oproepen die we gaan doen, zijn afkomstig van de Google Maps API waarnaar we eerder hebben verwezen. Google biedt uitstekende documentatie en voorbeeldcodes op hun website, dus zorg ervoor dat u deze bekijkt. Ik zal proberen te linken naar relevante pagina's terwijl ik ze gebruik.
Het eerste is dat terwijl we onze HTML-pagina open hebben, we de initialiseer-functie bootstrap door in te stellen onload attribuut. Notitie: dit zou kunnen worden gedaan in jQuery met behulp van de $ (Document) .ready () functie.
Nu gaan we naar de js / appication.js het dossier. Het allereerste dat we moeten doen, is een aantal variabelen instellen. Sommige code-evangelisten zullen me waarschijnlijk achtervolgen voor het verklaren van globale variabelen, maar ik geloof dat we in dit geval in orde moeten zijn. Ik zal je de code geven en dan uitleggen hoe we elke code zullen gebruiken.
var gdir, fromAddress, toAddress;
De initialize () -functie die we eerder noemden, zal worden gebruikt om de kaart op de pagina te maken en een aangepaste markering van onze locatie te plaatsen.
Accentsconagua
/ * ** * Bootstrap-functie naar instellingskaart en toepassen * aangepaste bedrijfsmarkering * / functie initialize () if (GBrowserIsCompatible ()) // instellingen var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = nieuwe GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // end settings // setup elements map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("richtingen")); // fout handler GEvent.addListener (gdir, "error", handleErrors); // set bedrijfsmarkering var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // set map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Het eerste wat we moeten doen is controleren of de browser compatibel is met Google Maps en hiervoor biedt Google de GBrowserIsCompatible () in hun API. In wezen retourneert het waar als de browser compatibel is en ons in staat stelt om naar de rest van onze functie te gaan. Ik besloot om enkele van de waarden te abstraheren naar variabelen aan de bovenkant van de functie, zodat dit gemakkelijk naar vele applicaties kon worden geporteerd.
// settings var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = nieuwe GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // eindinstellingen
De companyMarkerImage is een reeks van de locatie van een kleine afbeelding die we op onze locatie op de kaart plaatsen. Dit is iets waarvan ik denk dat het een goed idee is om een aangepast pictogram voor uw bedrijf te hebben waarmee de generieke Google Map-weergave kan worden gepersonaliseerd. volgende, companyLatLng houdt een GLatLng-object vast dat overeenkomt met een breedtegraad- en lengtegraadpunt in de wereld. Loop niet uit en koop een GPS-apparaat om deze nummers te krijgen, we kunnen maps.google.com gebruiken. Typ uw adres in het zoekvak en klik wanneer u de locatie vindt op Link knop in de rechterbovenhoek van de kaart. Blader door het eerste tekstvak in het modaalvenster en zoek & SLL = ... .
U kunt deze coördinaten kopiëren en plakken in de parameters van onze GLatLng-constructor. Dit is het punt op de kaart waar we onze aangepaste afbeelding zullen plaatsen. De volgende variabele, companyMarkerSize, bevat een GSize-object dat de breedte en hoogte van uw aangepaste markeringsafbeelding vertegenwoordigt. Vervolgens stellen we in naar adres dat is het adres van het bedrijf. De laatste variabele, defaultZoomLevel, vertelt de kaart gewoon wat u wilt dat het standaard zoomniveau varieert van 1 tot 18.
// setup elements map = nieuwe GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("richtingen")); De volgende regel code maakt een GMap2-object. Google beschrijft dit als "de centrale klasse in de API." Hiermee worden de kaartgegevens geladen en kunnen we manipuleren wat wordt weergegeven in het kaartgebied. Er is één argument nodig waarbij een DOM-object wijst naar het element dat de kaart bevat, #map_canvas. Vervolgens stellen we in gdir om het GDirections-object vast te houden. Dit is de interface die we gebruiken om Google Maps om aanwijzingen te vragen. De constructor neemt twee argumenten een kaartobject en een DOM-object waar we de turn-by-turn aanwijzingen willen plaatsen. Ik kies ervoor om hieronder een lege div te maken #addresses riep #routebeschrijving.
// fout handler GEvent.addListener (gdir, "error", handleErrors);
Bij het gebruik van webservices lopen we altijd het risico dat een fout wordt geretourneerd. We kunnen dit zo pijnvrij mogelijk maken met behulp van de klasse GEvent. In dit stukje code zeggen we dat als er een fout is opgetreden bij het verkrijgen van de aanwijzingen om een aangepaste callback-functie uit te voeren, handleErrors in ons geval. We roepen direct de addListener () -functie aan die een callback registreert. Er zijn drie argumenten nodig om een bronobject te maken, een tekenreeks die verwijst naar het type gebeurtenis waarvoor we de callback willen uitvoeren en een handler die verwijst naar een functie die we willen uitvoeren. De functie, handleErrors, is iets waar we later naar zullen kijken.
// set bedrijfsmarkering var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // set map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
De laatste paar regels erin initialiseren () worden gebruikt om onze eigen marker te maken, ik koos een Jayhawk op de homepage van KU. createMarker is een wrapper-functie die ik heb geschreven om de code te abstraheren die nodig is om een aangepaste marker te maken. Er zijn drie argumenten voor nodig: een verwijzing naar een GLatLng-object waarin we de afbeelding op de afbeelding willen plaatsen, een tekenreeks die het pad naar een afbeelding weergeeft en een verwijzing naar een GSize-object dat de grootte van de afbeelding vertegenwoordigt. Vervolgens gebruiken we de methode setCenter () van de klasse GMap2, waarbij twee argumenten een GLatLng-object zijn van de coördinaten waarop gecenterd moet worden en een geheel getal voor het zoomniveau. Merk op dat we de variabelen doorgeven die we hebben ingesteld in het instellingenblok bovenaan de initialiseren () functie. De laatste regel code gebruikt de methode addOverlay (). Dit is wat de aangepaste afbeelding daadwerkelijk aan de kaart toevoegt.
De initialiseren () functie doet veel zwaar tillen, maar het kan er zeker voor laten zien. Nadat we de createMarker () functie hierna kunt u de applicatie laden en enige vooruitgang zien. Maar eerst laten we het samenvatten initialiseren () functie.
Vervolgens maken we een wrapper-functie die alle pijn wegneemt bij het maken van een markering met een aangepaste afbeelding. De reden dat ik ervoor kies om dit te abstraheren, is omdat het een betrokken proces is en ons rommelig zou maken initialiseren () functioneer nog meer. Een ander bijkomend voordeel is dat we heel snel meerdere markeringen kunnen toevoegen zonder veel code te herhalen.
/ * ** * Wrapper-functie om een markerobject te maken / terug te zetten * met aangepaste afbeelding * / function createMarker (latlng, imageURL, imageSize) var marker = new GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; retourneer nieuwe GMarker (latlng, icon: marker);
Aanzienlijk kleiner dan onze eerste functie, maar net zo belangrijk. Eerst verklaren we een nieuwe variabele, markeerstift, en sla een GIcon-object op. Het kan twee argumenten kopiëren, een GIcon-object waarvan het eigenschappen zal kopiëren en een afbeelding die een pad vertegenwoordigt dat een pad naar een aangepast beeld voorstelt. G_DEFAULT_ICON is een constante die een standaardmarkering vertegenwoordigt en de imageURL komt uit het instellingenblok in initialiseren (). We hoeven alleen nog een eigenschap in te stellen, iconSize die van het type GSize is, dit staat voor de grootte van onze aangepaste afbeelding en komt ook uit het instellingenblok. De laatste regel code retourneert een GMarker-object dat twee argumenten duurt, en een pictogram. De eerste, Latlng is een verwijzing naar het GLatLng-object dat we in het instellingenblok hebben verklaard. Het volgende argument is voor het GIcon-object dat we zojuist hebben gemaakt. Dat is alles wat we moeten doen om het kaartgedeelte van onze applicatie te laten werken. U kunt nu de pagina laden en zien hoe gemakkelijk het is om een mooie kaart op onze website te krijgen.
Dit is verreweg het favoriete deel van deze tutorial, waardoor gebruikers een adres kunnen invoeren en een kaart kunnen terugkrijgen met de gemarkeerde route en stapsgewijze routebeschrijving. Door het gebruik van deze API kunnen we iets comprimeren dat duizenden coderegels en een ongelooflijke hoeveelheid verwerkingsbronnen nodig heeft voor slechts een handvol code.
/ * ** * Zoekt de richtingen op, geeft de route op de kaart weer, * en drukt beurtelings af op #directies. * / function overlayDirections () fromAddress = document.getElementById ("street"). value + "" + document.getElementById ("city"). value + "" + document.getElementById ("state"). opties [document. getElementById ("state"). selectedIndex] .waarde + "" + document.getElementById ("zip"). value; gdir.load ("from:" + fromAddress + "naar:" + toAddress); De eerste regel die ik heb uitgebreid naar vijf regels voor de duidelijkheid. In essentie grijpt dit alle waarden van de vorm en plaatst een ruimte tussen elk deel. Ik dacht dat dit beter was dan de gebruiker vragen om het hele adres in te voeren in een enkel tekstvak, want dat kan verwarrend zijn.
De tweede regel maakt gebruik van de gdir we zijn begonnen initialiseren (). We noemen de methode load () en geven een enkel tekenreeksargument door, wat in wezen is wat we via het zoekvak aan maps.google.com zouden doorgeven. De van: en naar: sleutelwoorden vertellen Google welk adres het startpunt moet zijn en wat het eindpunt moet zijn. Dat is alles wat we moeten doen voor een routebeschrijving, ja ik was ook geschokt! Als u uw pagina opnieuw bezoekt, kunt u dit in actie zien.
Vervolgens gaan we de handleErrors () functie. Ik heb dit van de voorbeeldcode van Google opgehaald op hun API-website. Ik zal niet in detail treden omdat het vrij eenvoudig is.
function handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alert ("Er kon geen overeenkomstige geografische locatie worden gevonden voor een van de opgegeven adressen. Dit kan komen doordat het adres relatief nieuw is, of het kan onjuist zijn. \ nFoutcode: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_SERVER_ERROR) alert ("Een geocodering of routeaanvraag kon niet succesvol worden verwerkt, maar de precieze reden voor de fout is niet bekend. \ n Foutcode:" + gdir.getStatus ( ).code); else if (gdir.getStatus (). code == G_GEO_MISSING_QUERY) alert ("De HTTP q-parameter ontbrak of had geen waarde. Voor geocoder-aanvragen betekent dit dat een leeg adres werd opgegeven als invoer. dat er geen query is opgegeven in de invoer. \ n Foutcode: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("De gegeven sleutel is ongeldig of komt niet overeen met het domein waarvoor deze is gegeven. \ n Foutcode:" + gdir.getStatus (). code) ; else if (gdir.getStatus (). code == G_GEO_BAD_REQUEST) alert ("Een routeaanvraag kon niet met succes worden geparseerd. \ n Foutcode:" + gdir.getStatus (). code); else alert ("Er is een onbekende fout opgetreden."); Het heeft een lange if ... else if ... else-instructie die op veel fouttypen controleert en de gebruiker waarschuwt als deze zich voordoet. U kunt dit wijzigen als u het alarm minder technisch wilt maken.
Als goede webontwikkelaars moeten we ervoor zorgen dat onze website werkt voor zoveel mogelijk gebruikers, inclusief gebruikers met JavaScript uitgeschakeld. In deze situatie heb ik ervoor gekozen om degenen met JS uit te schakelen naar Google Maps met de zoekopdracht uitgevoerd, zodat ze nog steeds een routebeschrijving krijgen. Dit gebeurt met behulp van PHP om het formulier te evalueren en door te sturen naar Google Maps. Voeg aan de bovenkant van uw HTML-pagina deze code toe:
...
Eerst hebben we weer een instellingenblok met maar één variabele om in te stellen, $ TO. Dit is vergelijkbaar met wat we in JavaScript hebben gedaan naar adres, maar we hebben dezelfde string ook nodig in PHP. Vervolgens hebben we een if-verklaring om te controleren op POST-gegevens, wat betekent dat ons formulier is ingediend. Nu pakken we de formulierwaarden en plaatsen ze in een string met spaties en slaan die op in een variabele, $ FROM. Vervolgens slaan we de taalwaarde op $ LOC, hier later meer over. De $ url variabele houdt de tekenreeks die de query-URL vertegenwoordigt naar Google. Merk op dat we onze waarden url-coderen zodat ze veilig op de omleiding reizen. De laatste regel code gebruikt PHP-headers om de gebruiker door te sturen naar Google.
Als bedrijf wilt u zoveel mogelijk mensen bereiken en een deel van dat proces ondersteunt meerdere talen. In Google Maps levert het ondersteunen van andere talen geen extra kosten voor ons op.
Open eerst uw HTML-pagina en voeg de volgende code tussen uw formulierlabels in.
... ...
Natuurlijk, als je talen wilt verwijderen, verwijder dan gewoon het optilabel ervoor, je kunt ook de standaard veranderen door het geselecteerde attribuut te verplaatsen.
Verhuizen naar js / application.js, we moeten slechts twee wijzigingen aanbrengen. Beginnend in de overlayDirections () functie nadat we de string hebben gemaakt FROMADDRESS voeg dit toe om de geselecteerde waarde uit het taalkeuzevak te halen en sla deze op in onze taalvariabele.
... var language = document.getElementById ("language"). Options [document.getElementById ("language"). SelectedIndex] .value; ... Voeg vervolgens een argument toe aan de gdir.load () functie, dit neemt een optieset. In ons geval hoeven we alleen maar te verklaren locale dus het kent de juiste taal en eenheden voor de turn-by-turn aanwijzingen.
... gdir.load ("from:" + fromAddress + "naar:" + toAddress, "locale": language); ... Notitie: We hebben dit al opgenomen in de PHP-omleiding en als je dit gewoon statisch wilt uitschakelen $ LOC.
... $ LOC = 'en' ...
Dat is alles wat we nodig hebben voor deze geweldige functie en ik hoop dat je onderweg een beetje hebt geleerd over Google Maps. Ik daag u uit als ontwikkelaars om interessante manieren te blijven vinden om kaarten te integreren in uw applicaties. Telkens wanneer een model locatiebewust is, zou u zich af moeten vragen of uw project gebruik kan maken van visuele representatie op een kaart. Bedankt voor het lezen; zoals altijd, ben ik hier om te helpen bij de opmerkingen of op Twitter (@noahhendrix).
