Share
Stellen Sie sich vor, Sie haben die wunderschöne Karte von einem Kunden angefordert. Hinzufügen aller Arten von interessanten Markern, Pop-Ups, benutzerdefinierten Overlays und Fotos. Dann erwähnt der Kunde, dass er seine eigenen Fotos hinzufügen möchte, ohne Sie zu belästigen oder selbst zu programmieren. Hier ist die Flickr-API sehr praktisch.
Mit der Flickr-API können Sie die Flickr-Website grundsätzlich als Datenbank oder Speicherbereich für Ihre Fotos verwenden. Mit der Flickr-API können Sie Ihre Fotos von Flickr abrufen und sie unter anderem auf Ihrer Google-Karte anzeigen. Jedes Mal, wenn Sie oder Ihr Kunde Ihrem Konto auf der Flickr-Website Fotos hinzufügen, wird Ihre Google-Karte automatisch aktualisiert.
Wenn Sie sich die Demo ansehen, werden die Fotos, die angezeigt werden, wenn Sie auf die Schaltfläche "Kleinere Ereignisse" klicken, von einem Flickr-Konto abgerufen, das ich für dieses Lernprogramm eingerichtet habe. Wenn Sie sich meine Portsmouth-Verlaufskarte ansehen, werden die Fotos, die angezeigt werden, wenn Sie auf die Schaltfläche "Alte Fotos" (Menü rechts) klicken, alle von Flickr gezeichnet.
Mit der Flickr-API können Sie tatsächlich viel mehr tun, als Fotos von Ihrem eigenen Konto abzurufen. Sie haben die Möglichkeit, komplexe Abfragen zu den Metadaten zu erstellen, indem Sie Fotos von allen Flickr-Benutzern zeichnen. Dies gibt Ihnen ein äußerst leistungsfähiges Werkzeug, das Sie für alle möglichen interessanten und kreativen Zwecke einsetzen können. Der Nachteil ist jedoch, dass die umfangreiche Funktionalität der API es etwas erschreckend machen kann, wenn Sie sie noch nicht verwendet haben, und es kann schwierig sein zu wissen, wo Sie anfangen sollen. Aus diesem Grund konzentriert sich dieses Tutorial auf das Beispiel, wie Sie Fotos von Ihrem eigenen Flickr-Konto zeichnen und einen vollständigen Überblick über den Vorgang geben. Wenn Sie den Dreh raus haben, sollten Sie in der Lage sein, den Rest der API gut zu nutzen.
Dieses Lernprogramm baut auf den vorherigen Lernprogrammen auf, in denen beschrieben wurde, wie Sie mit der Google Maps-API kreativ werden und benutzerdefinierte Überlagerungen erstellen können. Dazu wird erläutert, wie Sie die Flickr-API mit der Google Maps-API verknüpfen.
Eine API oder Application Programming Interface (Anwendungsprogrammierschnittstelle) ist eine fantastische Methode zum Definieren eines Satzes von Befehlen, die von einem Unternehmen (z. B. Facebook, Twitter, You Tube, Flickr) veröffentlicht wurden, mit dem jeder eine stark angepasste Version des Inhalts erstellen kann. Wenn Leute über "Mash-ups" sprechen, meinen sie, dass sie die API von zwei oder mehr Unternehmen zur Kombination von Inhalten verwendet haben. Es gibt buchstäblich Tausende dieser APIs; In der Programmierbaren Website finden Sie eine Liste.
Im ersten Lernprogramm wurde untersucht, wie Sie mit der Google Maps-API alle möglichen Aufgaben erledigen können. Dazu gehören das Anpassen der Farben, der Kartenmarkierungen, der Popup-Box-Stil, der Detailebene und der Zoomstufe. Die Flickr-API ist genauso umfangreich.
Um mit der Flickr-API zu beginnen, müssen Sie ein Flickr-Konto erstellen und Ihrem Konto ein paar Fotos hinzufügen, damit Sie mit etwas arbeiten können. Versuchen Sie, einige Bilder von verschiedenen Orten aus zu verwenden (dies wird später wichtig). Die in diesem Lernprogramm verwendeten Bilder sind in den Quelldateien oben auf dieser Seite verfügbar.
Hinweis: Wenn Sie diese Bilder verwenden, schreiben Sie bitte den ursprünglichen Erstellern, die unten auf dieser Seite aufgeführt sind, eine Gutschrift ein.
Sobald Sie etwas Inhalt haben, mit dem Sie spielen können, ist es Zeit, mit der API zu beginnen. Dies sind einige wichtige Websites.
Bevor Sie loslegen können, müssen Sie sich zunächst einen eigenen API-Schlüssel besorgen. Notieren Sie sich diese Details. Du wirst sie später brauchen!
Schauen Sie sich dieses einfache Beispiel an. Es verwendet die Flickr-API, um Fotos von dem Flickr-Konto abzurufen, das ich für dieses Lernprogramm erstellt habe. Anstatt isolierte Codeausschnitte hier aufzulisten, ist es nützlicher, wenn Sie sich den Code für die gesamte Website ansehen, um zu sehen, wie alles zusammenarbeitet. Gehen Sie zu dem einfachen Beispiel, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie aus Quelltext anzeigen. Oder laden Sie die Quelle oben auf dieser Seite herunter und ziehen Sie sie auseinander.
Die Kommentare im Quellcode bieten eine ausführliche Erklärung, aber es lohnt sich, einige wichtige Bereiche durchzugehen.
Am wichtigsten ist, wie Sie mit einer speziellen URL auf die Flickr-API zugreifen. Sie erstellen diese URL, um nach den Daten zu fragen, nach denen Sie suchen. Der erste Teil dieser URL lautet -
http://api.flickr.com/services/rest/
Sie fügen dann Dinge hinzu, um anzugeben, wonach Sie suchen. Das erste, was Sie hinzufügen, ist die Methode -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos
Sie fügen dann die Argumente und das Format hinzu, das Sie benötigen, zwischen denen jeweils ein & -Zeichen steht -
http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&format=json&jsoncallback=?
Accentsconagua
Benutzeridentifikation Argument ist das Konto, aus dem Sie die Fotos zeichnen möchten. Verwenden Sie idGettr, um das herauszufinden.API-Schlüssel ist der Code, den Sie im vorherigen Schritt erhalten haben. Sie können diese URL manuell erstellen, indem Sie die Dokumentation der von Ihnen gewählten Methode anzeigen, z. flickr.people.getPublicPhoto, aber das ist etwas fummelig.Glücklicherweise bietet Flickr einen Link zu einem praktischen Assistenten (genannt API Explorer) am Ende jeder 'Method'-Seite. Ein Wort der Warnung; Standardmäßig hat die vom Assistenten generierte URL am Ende "nojsoncallback = 1". Da wir die Ergebnisse in eine Funktion bringen müssen, sollte in unserem Fall das Ende "nojsoncallback =?" Sein. (Weitere Informationen finden Sie im JSON-Antwortformat.).
Um Ihre URL zu erstellen, die die Flickr-API aufruft, müssen Sie:-
API-Schlüssel Argument mit deinem eigenen Schlüssel.$ .getJSON ("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=YOUR_FLICKR_API_KEY_HERE&user_id=YOUR_FLICKR_ID_HERE&format=json&jsoncallback=?", displayImages1); Sobald Sie Ihre URL erstellt haben, die die Flickr-API aufruft, benötigen wir eine Möglichkeit, die Ergebnisse zu erfassen. Wir machen dies mit der $ .getJSON-Methode jQuery. Die $ .getJSON-Methode liest Daten im JSON-Format ein (z. B. unten) und ruft eine Funktion auf (in diesem Fall) displayImages1), die Daten auf irgendeine Weise verarbeitet (in diesem Fall werden die Bilder auf einer Webseite angezeigt).
Während wir uns mit JSON beschäftigen, ist es wichtig, darauf hinzuweisen, dass JSON nur eine Möglichkeit ist, Informationen zu formatieren oder zu strukturieren, damit ein Computer sie lesen kann. Wenn Sie sich die JSON-Ausgabe (oben) ansehen, können Sie sehen, wie der Code auf jedes Bit der Daten zugreift. Also zum Beispiel, Daten.Fotos.Foto (Schau in den displayImages1 Funktion im Quellcode des einfachen Beispiels) leitet das JavaScript in die Foto Array im JSON, in dem die meisten Informationen gespeichert sind. Dann zum Beispiel, var photoID = item.id; greift für jedes Foto auf das ID-Element zu.
Bevor Sie weitermachen, lohnt ein kurzer Blick auf ein anderes Beispiel. Lassen Sie uns den Hauptzweck des Internets (dh das Teilen von Katzenbildern) umarmen und Bilder finden, die mit dem Wort "Kätzchen" gekennzeichnet sind.
Um die Fähigkeiten zur Suche nach Kätzchen zu maximieren, möchten wir dieses Mal nach Fotos suchen, die von allen hochgeladen wurden. Der erste Schritt ist also das Erstellen der Flickr-API-Abfrage, die so aussieht -
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&tags=kitten&format=json&jsoncallback=?
Dieser API-Aufruf verwendet die Methode flickr.photos.search. Diese URL wird dann in die eingegeben $ .getJSON verfahren und auf ähnliche Weise wie das erste Beispiel verarbeitet. Sehen Sie sich das Live-Beispiel an, um das Ergebnis zu sehen. Der Quellcode ist über den Link oben auf dieser Seite verfügbar.
Wenn Sie sich beide Beispiele angesehen haben, nutzen Sie die API, um Ihre eigenen Bilder von Ihrem Flickr-Konto zu übernehmen und auf einer Webseite anzuzeigen.
Ihr erster Pinselstrich mit der Flickr-API sollte Sie mit den wichtigsten Prinzipien der Funktionsweise ausgestattet haben. Wahrscheinlich haben Sie auch festgestellt, wie groß das ist!
Dies ist keine schlechte Sache, da es Ihnen eine Reihe von Möglichkeiten bietet. Verwenden Sie die API-Dokumentation als eine Art Einkaufsliste. Nehmen Sie sich Zeit, um die Methoden (rechts auf der Startseite der API-Dokumentation) durchzusehen, um zu sehen, was angeboten wird.
Möglicherweise haben Sie auch die unterschiedlichen Anforderungsformate (z. B. wir verwenden "rest" - wie in dem URL in der URL, das die API aufruft - oben angegeben), Antwortformate (z. B. wir verwenden JSON) und Programmiersprachen, die Sie verwenden können, zur Kenntnis genommen mit der API (zB verwenden wir JavaScript). Dies ist wiederum eine Stärke der API, da Inhalte von Flickr in viele verschiedene Apps portiert werden können.
Die in diesem Lernprogramm verwendete Kombination wurde ausgewählt, weil sie eine gute Kombination ist, um sich mit der Flickr-API vertraut zu machen, und weil es die logische Kombination ist, wenn diese API mit der JavaScript-basierten Google Maps-API verknüpft wird. Es lohnt sich immer noch einen Blick auf die anderen Optionen zu werfen, die auf der linken Seite der Startseite der API-Dokumentation verfügbar sind.
Das Schöne an Flickr ist, dass Sie für jedes Foto alle Arten von Metadaten bearbeiten können.
Das bisschen, das uns interessiert, ist der geographische Ort jedes Fotos, und es ist leicht, dies für jedes Bild festzulegen:
Sie müssen diesen Vorgang für jedes Ihrer Fotos wiederholen.
Wenn Sie Ihre Fotos in Flickr mit Geotags versehen haben, können Sie sie auf einer Google-Karte anzeigen. Klicken Sie hier, um eine Live-Demo anzuzeigen, und klicken Sie dann mit der rechten Maustaste, um den Quellcode anzuzeigen.
Ähnlich wie im vorherigen Beispiel geben die Kommentare im Quellcode eine ausführliche Erklärung. Einige wichtige Punkte sollten jedoch hervorgehoben werden. Erstens verwenden wir zum Erstellen der URL, die die Flickr-API aufruft, erneut die flickr.photos.search. Dieses Mal haben wir die Argumente aufgenommen has_geo = 1 und Extras = Geo um sicherzustellen, dass die Breiten- und Längengrade für jedes Bild ebenfalls in den Ergebnissen enthalten sind. Um die Ergebnisse der URL anzuzeigen, die die Flickr-API aufruft, kopieren Sie sie (unten) in Ihren Browser und verwenden Sie dann JSON Formatter, um die Ausgabe deutlicher zu sehen.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1c9f777eb7446f34a7261dc1a54be4b2&user_id=99599718@N05&has_geo=1&extras=geo&format=json&jsoncallback==?
Es lohnt sich auch, darauf hinzuweisen, dass der JavaScript-Code die Bilder durchläuft und mithilfe der Google Maps-API Kartenmarkierungen erstellt, die die Breiten- und Längengrade der Flickr-API verwenden. Dann innerhalb der Karosserie Tags wird das Google Maps-API verwendet, um die Karte selbst zu erstellen.
Sie sollten in der Lage sein, etwas Ähnliches mit Ihren eigenen Bildern zu erstellen, die Sie in Flickr geladen haben. Die iTouchMap-Website ist nützlich, um herauszufinden, wie der Mittelpunkt Ihrer Karte aussehen soll.
Jetzt müssen Sie nur noch alles, was in diesem Tutorial behandelt wird, auf die UK Festival Map anwenden, die wir im ersten und zweiten Tutorial dieser Serie erstellt haben.
Das ist das, was wir anstreben. Wenn Sie auf die Schaltfläche "Kleinere Ereignisse" klicken, werden die Bilder von Flickr gezeichnet.
Der Vollständigkeit halber habe ich auch Bilder, die nicht von Flickr stammen, zu den Symbolen des "Hauptfestivals" hinzugefügt. Damit Sie die verschiedenen Optionen in Bezug auf Popup-Boxen sehen können, habe ich sowohl die "Info-Boxen" (für die "Hauptfestivals") als auch die Standard-"Infofenster" für die Fotos von Flickr verwendet.
Diese Karte wurde erstellt, indem der Code aus dem vorherigen Lernprogramm ein paar Änderungen vorgenommen und der Code aus dem Google Maps- und Flickr-Mashup (oben) hinzugefügt wurde. Wir erstellen zuerst eine Variable (smallEventsToggle) um zu bestätigen, ob die Markierungen für kleine Ereignisse derzeit angezeigt werden oder nicht. Und dann erstellen Sie eine neue Option in der HandelAnforderungen Funktion, um mit der Situation umzugehen, wenn die Schaltfläche "kleine Ereignisse" (smallEvents) wird angeklickt. Schließlich wird der Code aus dem vorherigen Schritt hinzugefügt und ein paar letzte Änderungen vorgenommen, z. B. das Ändern der Standard-Kartenmarkierung.
Wie üblich geben die Kommentare im herunterladbaren Quellcode eine ausführliche Erklärung, um Ihnen große Ausschnitte im Tutorial zu ersparen.
Das nächste Tutorial befasst sich mit der Optimierung, dem responsiven Design, dem Debugging und dem Testen.
Die Credits für die Fotos auf den Kartenmarkierungen selbst finden Sie am Ende des ersten Tutorials.
