Share
In diesem Lernprogramm erstellen wir ein kleines Widget, mit dem Benutzer Turn-by-Turn-Anweisungen zu einem bestimmten Ort abrufen können. Wir verwenden das Google Maps-API über JavaScript, um diese erweiterte Funktionalität bereitzustellen.
Der einzige Nachteil bei der Verwendung von Google Maps ist, dass wir einen API-Schlüssel beantragen müssen. Dies ist jedoch ein ziemlich trivialer Vorgang, wenn Sie bereits über ein Google / GMail-Konto verfügen. Aufgrund der Anforderungen von Google müssen wir uns leider auf der von uns bereitgestellten Domain entwickeln, d. H. Wir können uns nicht auf einem lokalen Server entwickeln. Zum Glück für uns wird der Prozess schnell sein und wir werden nicht viel Zeit auf dem Live-Server verbringen. Stellen Sie außerdem sicher, dass Sie Ihren API-Schlüssel an einem sicheren Ort speichern, da ich keinen Weg finden konnte, sie nach dem Generieren abzurufen, obwohl ich denke, Sie könnten nur einen neu erstellen.
Bevor wir uns mit Code beschäftigen, lassen Sie mich den Grund für diese Idee diskutieren. Wie die meisten Entwickler verbringe ich viel Zeit im Web. Eine bestimmte Untermenge von Websites, die ich besuche, sind lokale Unternehmen, die sicherlich keine großen Ressourcen für das Webdesign zur Verfügung haben, aber hoffentlich werden die Leute, die diese Websites entwickeln, Artikel wie diese sehen und erkennen, wie einfach es ist, ein voll funktionsfähiges Produkt hinzuzufügen in eine beliebige Webseite einfügen. Fast jede Website, die ein kleines Unternehmen darstellt, hat eine Seite, die den Benutzern mitteilt, wie sie ihren physischen Standort ermitteln können. Häufig erhalten Sie eine Karte, auf der die Position des Standorts festgelegt ist. Dies hilft Benutzern, die die Region nicht kennen, nicht weiter. In diesem Lernprogramm ändern wir das. Die Benutzer können ihre Adresse eingeben und Wegbeschreibungen zu jeder gewünschten Adresse erhalten.
Nun, da die Seifenkiste aus dem Weg ist, kann man in den Code schauen. Das erste, was wir tun müssen, ist die Javascript-Bibliothek, die alle Google Maps-Methoden enthält. Google hat diesen Code wahrscheinlich erstellt, als Sie Ihren API-Schlüssel erstellt haben. Dies hat jedoch möglicherweise auf die API der Version 3 verwiesen, die sich noch im Betatest befindet. Hier ist der Link zur API-Version 2, und stellen Sie sicher, dass Sie Ihren API-Schlüssel eingeben. Wir werden auch eine Datei hinzufügen, application.js das wird unsere benutzerdefinierten Funktionen enthalten, ich habe meine in einem Verzeichnis auf der Stammebene gespeichert js. Der folgende Code steht im Kopfbereich Ihrer Seite.
Im Hauptteil unserer Seite benötigen wir einige begrenzte Markups. Ich werde die erforderlichen Bits kurz durchgehen und Sie können den Quellcode ansehen, um die in meiner Demo enthaltenen Flusen zu sehen. Das erste Element ist ein leeres div mit einer ID von map_canvas, Dies ist der Platzhalter, auf den die Google Maps-Aufrufe zeigen. Er generiert alle Kartenmarkierungen in diesem Element.
Als Nächstes habe ich ein div erstellt, das die Organisationsadresse und das Formular enthält, in das der Benutzer seine Adresse eingeben kann. Sie können diesen Code überblicken, aber er ist ziemlich einfach und nicht sehr schwer zu erkennen, dass er sich trifft. Schauen Sie sich mein CSS an, um zu sehen, wie es in meiner Demo gestaltet ist.
Unsere Adresse
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Deine Adresse
Beachten Sie, dass wir diese Seite an sich selbst übermitteln. Dies ist so, dass wir die Seite mit PHP verarbeiten können, wenn JS deaktiviert ist. Wenn sie JS aktiviert haben, möchten wir eine Funktion ausführen, overlayDirections () was wir später betrachten werden. Der Großteil dieses Codes bezieht sich auf das Auswahlfeld, mit dem der Benutzer seinen Status auswählen kann. Ich habe ihn aus Gründen der Drucklegung dieses Artikels komprimiert. Sie können jedoch den vollständigen Code aus dem Download herunterladen. Weitere interessante Hinweise sind wir gesetzt Größe und maximale Länge Beachten Sie, dass wir allen Formularelementen IDs und Namen zugewiesen haben.
Jetzt können wir uns mit dem JavaScript-Code befassen. Nahezu alle Anrufe, die wir tätigen, stammen aus dem Google Maps-API, auf das wir zuvor verwiesen haben. Google bietet auf seiner Website eine hervorragende Dokumentation und Beispielcode. Schauen Sie sich also diese Datei an. Ich werde versuchen, zu relevanten Seiten zu gelangen, wenn ich sie verwende.
Die erste Sache ist, wenn wir unsere HTML-Seite geöffnet haben, lässt sich die Initialisierungsfunktion durch Setzen bootstrapen onload Attribut. Hinweis: Dies könnte in jQuery mit der $ (Dokument) .ready () Funktion.
Jetzt ziehen wir in die js / appication.js Datei. Als erstes müssen wir einige Variablen setzen. Einige Code-Evangelisten werden mich wahrscheinlich für die Deklaration globaler Variablen suchen, aber ich glaube, in diesem Fall sollten wir in Ordnung sein. Ich gebe Ihnen den Code und erkläre dann, wie wir jeden verwenden werden.
var gdir, fromAddress, toAddress;
Die zuvor aufgerufene Funktion initialize () wird verwendet, um die Karte auf der Seite zu erstellen und eine benutzerdefinierte Markierung für unseren Standort zu setzen.
Accentsconagua
/ * ** * Bootstrap-Funktion zum Einrichten der Karte und Anwenden von * benutzerdefinierter Firmenmarkierung * / function initialize () if (GBrowserIsCompatible ()) // Einstellungen var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38,957101, -95,251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // Einstellungen beenden // Setup-Elemente map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("Richtungen")); // Fehlerhandler GEvent.addListener (gdir, "error", handleErrors); // Firmenmarke setzen var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // Kartenmittelpunkt setzen map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); Als Erstes müssen wir prüfen, ob der Browser mit Google Maps kompatibel ist. Dafür stellt Google die GBrowserIsCompatible () in ihrer API bereit. Im Wesentlichen gibt es true zurück, wenn der Browser kompatibel ist, und ermöglicht es uns, in den Rest unserer Funktion zu wechseln. Ich entschied mich dazu, einige der Werte in Variablen am oberen Rand der Funktion zu abstrahieren, damit diese leicht auf viele Anwendungen portiert werden können.
// Einstellungen var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38,957101, -95,251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // Einstellungen beenden
Das companyMarkerImage ist eine Zeichenfolge des Standorts eines kleinen Bildes, das wir an unserem Standort auf der Karte platzieren. Ich denke, es ist eine nette Geste, ein benutzerdefiniertes Symbol für Ihr Unternehmen zu haben, das die generische Google Map-Ansicht personalisiert. Nächster, firmaLatLng enthält ein GLatLng-Objekt, das einem Längen- und Breitengradpunkt in der Welt entspricht. Gehen Sie nicht aus und kaufen Sie ein GPS-Gerät, um diese Nummern zu erhalten, können Sie maps.google.com verwenden. Geben Sie im Suchfeld Ihre Adresse ein und klicken Sie auf, wenn Sie den Ort gefunden haben Verknüpfung Schaltfläche oben rechts auf der Karte. Blättern Sie durch das erste Textfeld im modalen Fenster und suchen Sie & sll =… .
Sie können diese Koordinaten kopieren und in die Parameter unseres GLatLng-Konstruktors einfügen. Dies ist der Punkt auf der Karte, an dem wir unser benutzerdefiniertes Bild platzieren. Die nächste Variable, companyMarkerSize, enthält ein GSize-Objekt, das die Breite und Höhe Ihres benutzerdefinierten Markierungsbildes darstellt. Als nächstes setzen wir toAddress Welches ist die Adresse des Geschäfts. Die letzte Variable, defaultZoomLevel, teilt der Karte einfach mit, was der Standardzoomwert zwischen 1 und 18 sein soll.
// Setup-Elemente map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("Richtungen")); Die nächste Codezeile erstellt ein GMap2-Objekt. Google beschreibt dies als "die zentrale Klasse in der API". Dadurch werden die Kartendaten geladen, und Sie können die Anzeige im Kartenbereich ändern. Es erfordert ein Argument eines DOM-Objekts, das auf das Element zeigt, das die Karte enthält, #map_canvas. Als nächstes setzen wir gdir um das GDirections-Objekt zu halten. Diese Schnittstelle verwenden wir, um Google Maps nach Anweisungen abzufragen. Der Konstruktor nimmt zwei Argumente an, ein Kartenobjekt und ein DOM-Objekt, in das die Turn-by-Turn-Richtungen eingefügt werden sollen. Ich möchte unten ein leeres Div erstellen #adressen namens #Richtungen.
// Fehlerhandler GEvent.addListener (gdir, "error", handleErrors);
Bei der Nutzung von Webservices besteht immer die Gefahr, dass ein Fehler zurückgegeben wird. Mit der GEvent-Klasse können wir dies so schmerzfrei wie möglich gestalten. In diesem Codebeispiel sagen wir, wenn ein Fehler beim Abrufen der Anweisungen zum Ausführen einer benutzerdefinierten Callback-Funktion auftritt, handleErrors in unserem Fall. Wir rufen direkt die Funktion addListener () auf, die einen Rückruf registriert. Es benötigt 3 Argumente für ein Quellobjekt, eine Zeichenfolge, die sich auf den Ereignistyp bezieht, für den der Callback ausgeführt werden soll, und einen Handler, der auf eine Funktion verweist, die ausgeführt werden soll. Die Funktion, handleErrors, ist etwas, was wir später betrachten werden.
// Firmenmarke setzen var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // Kartenmittelpunkt setzen map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
Die letzten paar Zeilen in initialisieren() Ich habe einen Jayhawk auf der Homepage der KU gefunden. createMarker ist eine Wrapper-Funktion, die ich geschrieben habe, um den Code zu abstrahieren, der zum Erstellen einer benutzerdefinierten Markierung erforderlich ist. Es gibt drei Argumente: einen Verweis auf ein GLatLng-Objekt, in dem das Bild platziert werden soll, eine Zeichenfolge, die den Pfad zu einem Bild darstellt, und einen Verweis auf ein GSize-Objekt, das die Größe des Bildes darstellt. Als Nächstes verwenden wir die setCenter () - Methode der GMap2-Klasse, die zwei Argumente einnimmt, ein GLatLng-Objekt der Koordinaten, auf das zentriert werden soll, und eine Ganzzahl für die Zoomstufe. Beachten Sie, dass wir die Variablen übergeben, die wir im Einstellungsblock am oberen Rand des Bereichs festgelegt haben initialisieren() Funktion. Die letzte Codezeile verwendet die addOverlay () -Methode. Auf diese Weise wird das benutzerdefinierte Bild der Karte hinzugefügt.
Das initialisieren() Funktion macht viel schweres Heben, kann es aber durchaus zeigen. Nachdem wir das geschrieben haben createMarker () Als nächstes können Sie die Anwendung laden und einige Fortschritte sehen. Aber erstmal das zusammenfassen initialisieren() Funktion.
Als Nächstes erstellen wir eine Wrapper-Funktion, die das Erstellen eines Markers mit einem benutzerdefinierten Bild erleichtert. Der Grund, warum ich mich dazu entscheide, das zu abstrahieren, ist, weil es ein komplizierter Prozess ist und unseren unübersichtlich macht initialisieren() Funktion noch mehr. Ein weiterer Vorteil ist, dass wir sehr schnell mehrere Marker hinzufügen können, ohne viel Code wiederholen zu müssen.
/ * ** * Wrapper-Funktion zum Erstellen / Zurückgeben eines Markierungsobjekts * mit benutzerdefiniertem Bild * / Funktion createMarker (latlng, imageURL, imageSize) var marker = new GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; neuen GMarker zurückgeben (latlng, icon: marker);
Deutlich kleiner als unsere erste Funktion, aber genauso wichtig. Zuerst deklarieren wir eine neue Variable, Marker, und speichern Sie ein GIcon-Objekt. Es können zwei Argumente copy verwendet werden, ein GIcon-Objekt, aus dem Eigenschaften kopiert werden, und image, das eine Zeichenfolge ist, die einen Pfad zu einem benutzerdefinierten Image darstellt. G_DEFAULT_ICON ist eine Konstante, die eine Standardmarkierung darstellt, und die imageURL stammt aus dem Einstellungsblock in initialisieren(). Wir müssen nur noch eine weitere Eigenschaft setzen, iconSize, die vom Typ GSize ist. Diese Größe entspricht der Größe unseres benutzerdefinierten Bildes und stammt auch aus dem Einstellungsblock. Die letzte Codezeile gibt ein GMarker-Objekt zurück, das zwei Argumente und ein Symbol enthält. Das erste latlng ist ein Verweis auf das GLatLng-Objekt, das wir im Einstellungsblock deklariert haben. Das nächste Argument ist für das soeben erstellte GIcon-Objekt. Das ist alles, was wir tun müssen, damit der Kartenteil unserer Anwendung funktioniert. Sie können jetzt die Seite laden und sehen, wie einfach es ist, eine schöne Karte auf unserer Website zu erhalten.
Dies ist bei weitem mein Lieblingsteil dieses Tutorials, mit dem Benutzer eine Adresse eingeben und eine Karte mit markierter Route und Abbiegehinweisen erhalten können. Durch die Verwendung dieser API können wir etwas komprimieren, das Tausende von Codezeilen und eine unglaubliche Menge an Verarbeitungsressourcen erfordert, um nur eine Handvoll Code zu erzeugen.
/ * ** * Sucht die Richtungen, überlagert die Route auf der Karte * und druckt nacheinander # #. * / function overlayDirections () fromAddress = document.getElementById ("street"). value + "" + document.getElementById ("city"). value + "" + document.getElementById ("state"). options [document. getElementById ("state"). selectedIndex] .value + "" + document.getElementById ("zip"). value; gdir.load ("von:" + fromAddress + "bis:" + toAddress); Die erste Zeile habe ich zur Klarheit in fünf Zeilen erweitert. Im Wesentlichen werden dadurch alle Werte aus dem Formular herausgeholt und zwischen jedem Teil ein Leerzeichen eingefügt. Ich dachte, das wäre besser, als den Benutzer zu bitten, die gesamte Adresse in ein einziges Textfeld einzugeben, da dies verwirrend werden kann.
Die zweite Zeile verwendet die gdir wir setzen ein initialisieren(). Wir rufen die load () -Methode auf und übergeben ein einzelnes String-Argument. Dies ist im Wesentlichen das, was maps.google.com über das Suchfeld übergeben würde. Das von: und zu: Mithilfe von Keywords können Sie feststellen, welche Adresse Google als Ausgangspunkt und welche als Endpunkt verwenden muss. Das ist alles, was wir für Richtungen tun müssen, ja, ich war auch geschockt! Wenn Sie Ihre Seite erneut besuchen, können Sie dies in Aktion sehen.
Als nächstes werden wir das erklären handleErrors () Funktion. Ich habe diesen Code aus dem Google-Beispielcode auf der API-Website übernommen. Ich werde nicht ins Detail gehen, weil es ziemlich unkompliziert ist.
function handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alert ("Für eine der angegebenen Adressen konnte kein entsprechender geografischer Ort gefunden werden. Dies kann daran liegen, dass die Adresse relativ neu ist oder Es kann falsch sein. \ nFehlercode: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_SERVER_ERROR) alert ("Eine Geocoding- oder Anweisungen-Anforderung konnte nicht erfolgreich verarbeitet werden, der genaue Grund für den Fehler ist jedoch nicht bekannt. \ n Fehlercode:" + gdir.getStatus ( ).Code); else if (gdir.getStatus (). code == G_GEO_MISSING_QUERY) alert ("Der Parameter HTTP q war entweder nicht vorhanden oder hatte keinen Wert. Bei Geocoder-Anforderungen bedeutet dies, dass eine leere Adresse als Eingabe angegeben wurde. Bei Anweisungen-Anfragen bedeutet dies dass in der Eingabe keine Abfrage angegeben wurde. \ n Fehlercode: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("Der angegebene Schlüssel ist entweder ungültig oder stimmt nicht mit der Domäne überein, für die er angegeben wurde. \ n Fehlercode:" + gdir.getStatus (). code) ; else if (gdir.getStatus (). code == G_GEO_BAD_REQUEST) alert ("Eine Richtungsanforderung konnte nicht erfolgreich analysiert werden. \ n Fehlercode:" + gdir.getStatus (). code); else alert ("Ein unbekannter Fehler ist aufgetreten."); Es gibt eine lange if… elseif… else-Anweisung, die auf viele Fehlertypen prüft und den Benutzer darauf hinweist, wenn ein Fehler auftritt. Sie können dies ändern, wenn Sie die Warnung weniger technisch machen möchten.
Als gute Webentwickler sollten wir sicherstellen, dass unsere Website für so viele Benutzer wie möglich funktioniert, auch für Benutzer mit deaktiviertem JavaScript. In dieser Situation habe ich mich dazu entschieden, die Personen mit deaktiviertem JS mit der durchgeführten Suche zu Google Maps umzuleiten, damit sie immer noch Wegbeschreibungen erhalten. Dies erfolgt mithilfe von PHP, um das Formular auszuwerten und zu Google Maps umzuleiten. Fügen Sie oben auf Ihrer HTML-Seite diesen Code ein:
…
Zuerst haben wir wieder einen Einstellungsblock, in dem nur eine Variable gesetzt werden muss, $ TO. Dies ist ähnlich wie bei JavaScript toAddress, Aber wir brauchen den gleichen String auch in PHP. Als Nächstes haben wir eine if-Anweisung, um nach POST-Daten zu suchen, was bedeutet, dass unser Formular übermittelt wurde. Jetzt greifen wir die Formularwerte auf und platzieren sie in einer Zeichenfolge mit Leerzeichen und speichern diese in einer Variablen, $ FROM. Dann speichern wir den Sprachwert in $ LOC, dazu später mehr. Das $ url Die Variable enthält die Zeichenfolge, die die Abfrage-URL für Google darstellt. Beachten Sie, dass wir unsere Werte so kodieren, dass sie sicher auf der Weiterleitung übertragen werden. Die letzte Codezeile verwendet PHP-Header, um den Nutzer an Google weiterzuleiten.
Als Unternehmen möchten Sie möglichst viele Menschen erreichen, und ein Teil dieses Prozesses unterstützt mehrere Sprachen. In Google Maps werden andere Sprachen unterstützt, für die wir keine zusätzlichen Kosten haben.
Öffnen Sie zunächst Ihre HTML-Seite und fügen Sie den folgenden Code zwischen Ihre Formulartags ein.
… …
Wenn Sie Sprachen entfernen möchten, löschen Sie einfach das Option-Tag. Sie können die Standardeinstellung auch ändern, indem Sie das ausgewählte Attribut verschieben.
Umziehen nach js / application.js, Wir müssen nur zwei Änderungen vornehmen. Beginnend im overlayDirections () Funktion, nachdem wir die Zeichenfolge erstellt haben von der Adresse Fügen Sie dies hinzu, um den ausgewählten Wert aus dem Sprachauswahlfeld zu übernehmen und in unserer Sprachvariablen zu speichern.
… Var language = document.getElementById ("language"). Options [document.getElementById ("language"). SelectedIndex] .value;… Fügen Sie als Nächstes ein Argument hinzu gdir.load () Funktion, erfordert dies ein Optionssatz. In unserem Fall müssen wir nur erklären Gebietsschema es kennt also die richtige Sprache und Einheiten für die Abbiegehinweise.
… Gdir.load ("von:" + fromAddress + "bis:" + toAddress, "locale": language);… Hinweis: Wir haben dies bereits in die PHP-Weiterleitung aufgenommen und wenn Sie dies deaktivieren möchten, einfach statisch setzen $ LOC.
… $ LOC = 'en'…
Das ist alles, was wir für diese erstaunliche Funktion benötigen, und ich hoffe, Sie haben unterwegs ein wenig über Google Maps erfahren. Als Entwickler fordere ich Sie heraus, weiterhin interessante Wege zu finden, um Karten in Ihre Anwendungen zu integrieren. Wenn ein Modell ortsabhängig ist, sollten Sie die Frage stellen, ob Ihr Projekt für die visuelle Darstellung auf einer Karte geeignet ist. Danke fürs Lesen; Wie immer bin ich hier, um in den Kommentaren oder auf Twitter zu helfen (@noahhendrix).
