7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Implementieren einer Karte mithilfe der Google Map-API für Flash

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts+. Dieses Tutorial wurde erstmals im Mai 2009 veröffentlicht.

In diesem Tutorial erfahren Sie, wie Sie mithilfe der Google Map-API eine Karte in Flash erstellen können. Wir werden einige der Grundlagen behandeln, wie das Vergrößern der Karte und das Hinzufügen einiger Steuerelemente. Wir werden uns auch ansehen, wie wir unserer Karte Markierungen hinzufügen und wie wir Daten mithilfe einer XML-Datei laden können.


Schritt 1: Der Google Map API-Schlüssel

Bevor wir mit dem Erstellen unserer Karte in Flash beginnen können, müssen wir einige Dinge einrichten. Um die Google Map-API verwenden zu können, benötigen Sie einen persönlichen API-Schlüssel. Um dies zu erhalten, gehen Sie zu http://code.google.com/intl/nl/apis/maps/documentation/flash/ und klicken Sie auf den Link auf der rechten Seite der Seite "Für einen Google Maps-API-Schlüssel anmelden".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 2: Anmelden

Durch Klicken auf den Link "Für einen Google Maps-API-Schlüssel anmelden" gelangen Sie zur nächsten Seite, auf der wir unseren persönlichen API-Schlüssel generieren können. Scrollen Sie auf der Seite nach unten, stimmen Sie den Nutzungsbedingungen zu (Sie können diese auch lesen, wenn Sie wirklich interessiert sind) und fügen Sie die URL der Website hinzu, auf der Sie die Anwendung verwenden möchten (Sie benötigen für jede Domain einen anderen API-Schlüssel Sie möchten eine Karte platzieren). Klicken Sie danach auf "API-Schlüssel generieren".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 3: Speichern Sie es!

Jetzt sehen Sie Ihren persönlichen API-Schlüssel für die ausgewählte Domain. Kopieren Sie den API-Schlüssel und fügen Sie ihn ein oder speichern Sie ihn irgendwo, da wir ihn sehr bald benötigen.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 4: Die Google Map SWC-Komponente

Ok, jetzt haben wir unseren API-Schlüssel, aber wir brauchen noch eine Sache, bevor wir mit der Erstellung unserer Karte in Flash beginnen können. Wir müssen die Google Map SWC-Komponente herunterladen. Gehen Sie dazu zu http://code.google.com/intl/nl/apis/maps/documentation/flash/ und klicken Sie auf "Google Maps API für Flash SDK herunterladen". Ein Popup-Fenster wird angezeigt. Wählen Sie, ob Sie die Datei "sdk.zip" speichern und herunterladen möchten.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 5: Installieren Sie die SDK-Komponente

Jetzt müssen wir die SDK-Komponente installieren, um sie in Flash verwenden zu können. Navigieren Sie dazu zu dem Speicherort, an dem Sie die Google Maps-API für Flash SDK gespeichert haben, und suchen Sie die Nicht-Flex-Version der Schnittstellenbibliothek. In meinem Fall ist dies (lib/map_1_9.swc). Kopieren Sie nun die Datei "map_1_9.swc".

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 6: Ordner

Wenn Sie Flash gerade geöffnet haben, beenden Sie die Anwendung und suchen Sie nach diesem Ordner:

  • (Windows) C:\Program Files\Adobe\Adobe Flash CS3 (oder Ihre Flash-Version)\en (oder Ihre Sprache)\Configuration\Components
  • (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3 (oder Ihre Flash-Version)/Configuration/Components

Erstellen Sie in diesem Ordner einen neuen Ordner mit dem Namen "google" und fügen Sie die Datei "map_1_9.swc" ein. Flash ist jetzt so eingerichtet, dass es die Google Maps-API für Flash unterstützt.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 7: Neue ActionScript 3.0-Datei

OK. Das ist alles erledigt und abgestaubt! Jetzt können wir endlich anfangen, unsere Karte in Flash zu erstellen. Starten Sie Flash CS3 oder CS4 und erstellen Sie eine neue ActionScript 3.0-Datei mit der Standard-Bühnengröße (550 x 400).

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 8: Speichern Sie es!

Speichern Sie nun einfach die Datei. Drücken Sie "Strg + S" oder gehen Sie im Menü zu Datei > Speichern. Speichern Sie es an dem gewünschten Ort und benennen Sie es wie Sie möchten. Ich werde es "google_map" nennen.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 9: Die GoogleMapsLibrary

Öffnen Sie das Komponentenbedienfeld "Strg + F7" oder klicken Sie im Menü auf Fenster > Komponenten und ziehen Sie die GoogleMapsLibrary auf die Bühne.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 10: Die Aktionsebene

Erstellen Sie eine neue Ebene, doppelklicken Sie auf ihren Namen und benennen Sie sie in "actions" um.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 11: Importieren..

Öffnen Sie nun bei ausgewählter Aktionsebene das Aktionsfenster, indem Sie auf "F9" klicken oder auf Fenster > Aktionen klicken. Fügen Sie diese Codezeilen hinzu:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 12: Erstellen Sie die Karte

Fügen wir nun die Karte hinzu! Wenn wir den Film laden, erstellt dieser Code eine Karte und stellt sie auf die Bühne. Im Code sehen wir die Variable "map.key"; Hier müssen wir unseren persönlichen API-Schlüssel hinzufügen. Öffnen Sie die Datei, in der Sie den API-Schlüssel gespeichert haben, und kopieren Sie ihn in die Variable.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 13: Film testen

Ok, jetzt testen Sie Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung > Film testen. Sie werden sehen, dass Sie gerade eine Karte erstellt haben.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 14: Kontrollen

Zu diesem Zeitpunkt können wir die Karte nur verschieben. Das ist nicht wirklich das, wonach wir suchen. Fügen wir also der Karte einige Steuerelemente hinzu, mit denen wir zoomen und uns bewegen können. Um unserer Karte Steuerelemente hinzuzufügen, müssen wir unseren Code aktualisieren. Zuerst müssen wir ein paar zusätzliche Klassen aufrufen:

Danach müssen wir eine neue Funktion erstellen, die aufgerufen wird, sobald die Karte erstellt wurde. Wir nennen diese Funktion "onMapReady()". Innerhalb dieser Funktion fügen wir unsere Steuerelemente zur Karte hinzu.

Jetzt müssen wir nur noch die Funktion "onMapReady()" aufrufen, wenn unsere Karte geladen wird. Dazu müssen wir unserem ersten Code eine zusätzliche Zeile hinzufügen.

Unser vollständiger Code sieht jetzt so aus:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 15: Mehr..

Testen Sie nun Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung > Film testen. Sie sehen, dass unsere Karte jetzt Steuerelemente enthält. Wir können unsere Karte vergrößern und sogar in Satelliten-, Hybrid- und Geländeansicht ändern. Das ist sehr cool, aber wir wollen mehr.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 16: Breite und Länge

Lassen Sie uns einen bestimmten Ort vergrößern, sobald unsere Karte zum ersten Mal geladen wird. Angenommen, ich bin Surfer und möchte eine Karte der Surfspots in meiner Heimatstadt erstellen. Wir möchten nicht, dass die Leute manuell zoomen und nach dem Bereich suchen müssen, also werden wir das in einer Sekunde beheben. Das einzige, was wir hinzufügen müssen, ist eine kleine Codezeile zu unserer Funktion "onMapReady()".

Was wir hier tatsächlich tun, ist einen neuen LatLng-Punkt auf der Karte zu erstellen. Zuerst geben wir 2 Werte an: den "Breitengrad" und den "Längengrad" aus unserer Region. Dann stellen wir unseren Zoomwert ein; Ich habe mich für 9 entschieden. Der Zoom reicht von 0 bis etwa 16 (dies kann von Region zu Region variieren). Zuletzt legen wir den Kartentyp fest; Ich habe mich hier für den HYBRID_MAP_TYPE entschieden.

Unsere Funktion "onMapReady()" sieht jetzt so aus:

Wenn wir unseren Film testen, können Sie sehen, dass sich viele Dinge geändert haben. Sobald die Karte geladen ist, zoomen wir in unsere spezifische Region und unser Kartentyp ist jetzt Hybrid. Um den Breiten- und Längengrad für Ihre Region zu bestimmen, können Sie Google Earth oder ein Online-Werkzeug wie http://itouchmap.com/latlong.html verwenden.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 17: Fügen Sie einen Marker hinzu

Fügen wir nun unserer Karte einen einfachen Marker hinzu. Fügen Sie einfach 2 weitere Klassen hinzu:

und aktualisieren Sie die Funktion "onMapReady()" mit diesem Code:

Wieder erstellen wir einen LatLng-Punkt mit bestimmten Längen-/Breitengraden für unseren Standort. Dann rufen wir "addOverlay()" auf, um unseren Marker auf der Karte zu platzieren. Unser vollständiger Code sieht jetzt so aus:

Gehen und testen Sie Ihren Film. Sie sehen unsere Markierung auf der Karte.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 18: Noch mehr..

Lassen Sie uns jetzt alles auf die nächste Stufe bringen. Wir haben eine Karte mit Zoom-Steuerelementen und einer Markierung. Was brauchen wir noch? Nun, ich werde es dir sagen. Wir brauchen MEHR MARKER, TOOLTIPS, INFO WINDOWS und wir wollen alles aus einer XML-Datei laden. Also lasst uns anfangen. Zuerst erstellen wir unsere XML-Datei. Öffnen Sie Ihren bevorzugten XML-Editor und erstellen Sie diese Datei:


Schritt 19: onMapReady()

Sobald unsere Karte geladen ist, müssen wir die XML-Daten in unsere Flash-Datei ziehen. Erstellen Sie eine neue Funktion mit dem Namen "xmlLoader()" und wir rufen diese Funktion in unserer Funktion "onMapReady()" auf. Zuerst müssen wir den Code löschen, den wir hinzugefügt haben, um unseren Marker nur wenige Schritte zuvor zu erstellen. Dann fügen wir die Zeile hinzu, um die Funktion "xmlLoader()" aufzurufen. Unsere Funktion "onMapReady()" sollte nun folgendermaßen aussehen:

Als nächstes wollen wir die Funktion "xmlLoader()" erstellen.

Im nächsten Schritt werden wir es füllen.


Schritt 20: Laden Sie XML

Ok hier sind wir. Laden wir unsere XML-Daten. Innerhalb der Funktion "xmlLoader()" fügen wir diesen Code hinzu:

Dadurch erhalten wir unsere XML-Daten, mit denen wir arbeiten können.


Schritt 21: Durchlaufen Sie die Standorte

Da unsere XML-Datei drei Speicherorte enthält, müssen wir eine "For" -Schleife erstellen und alle Daten in einigen Arrays speichern. In unserer Funktion "loadXML()" fügen wir diesen Code hinzu, um die For-Schleife zu erstellen:

Um zu testen, ob die Dinge für uns funktionieren, verfolgen wir die Variable "title_tip". Testen Sie Ihren Film und Sie sollten die folgende Ausgabe erhalten:

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 22: Variablen

Als nächstes müssen wir einige Variablen erstellen, um unsere aus der XML-Datei geladenen Daten zu speichern. In unserer For-Schleife fügen wir folgende Variablen hinzu:

Wenn Sie möchten, können Sie die zuvor verwendete Zeile "trace()" löschen. Unsere For-Schleife sieht jetzt so aus:


Schritt 23: Zusätzliche Marker..

OK! Wir müssen der Karte für jeden unserer drei Standorte einen Marker hinzufügen. Nachdem wir alle Daten in unseren Variablen gespeichert haben, müssen wir eine neue Funktion mit dem Namen "createMarker()" erstellen. In unserer Funktion "loadXML()" fügen wir diese neue Funktion hinzu:

Wir müssen diese Funktion "createMarker()" noch aufrufen, um unsere Markierungen auf der Karte zu sehen. Dazu müssen wir am Ende unserer For-Schleife eine zusätzliche Codezeile hinzufügen:

So sollte unsere Funktion "loadXML()" jetzt aussehen:

Testen Sie Ihren Film und Sie sehen die Markierungen auf der Karte! Beachten Sie, dass unsere 3 Punkte sehr nahe beieinander liegen. Sie können also etwas zoomen, um sie klarer zu sehen.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Schritt 24: Info Windows

Schließlich müssen wir einige Info-Fenster hinzufügen. Wenn wir auf die Markierungen klicken, erhalten wir einige Informationen über ihre Positionen. Dazu müssen wir 2 weitere Klassen hinzufügen:

..ein bisschen mehr Code für unsere Funktion "createMarker()"..

Testen Sie nun Ihren Film und Sie werden sehen, dass unsere Markierungen jetzt anklickbar sind und ein Infofenster mit Text aus der XML-Datei erstellen.

google maps api for flashgoogle maps api for flashgoogle maps api for flash

Abschluss

Das ist es! Schauen Sie sich unseren endgültigen Code an:


Testen Sie Ihren Film mit Strg + Eingabetaste, um das Ergebnis zu überprüfen. Sie haben Ihre eigene XML-basierte Flash-Karte! Sie können es auf Ihrer Website verwenden, die Speicherorte nach Ihren Wünschen bearbeiten, es liegt an Ihnen. Experimentieren Sie, wenn Sie coole Ergebnisse haben, teilen Sie sie uns unbedingt mit.

Ich hoffe Ihr hat dieses Tutorial gefallen, danke fürs Lesen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.