Share
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 Lernprogramm erfahren Sie, wie Sie mithilfe der Google Map-API eine Karte in Flash erstellen können. Wir werden einige der Grundlagen behandeln, z. B. das Vergrößern der Karte und das Hinzufügen von Steuerelementen. Wir werden auch untersuchen, wie wir unserer Map Marker hinzufügen und wie wir Daten mithilfe einer XML-Datei laden können.
Bevor wir anfangen können, unsere Karte in Flash zu erstellen, 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"..
Wenn Sie auf den Link "Anmelden für einen Google Maps-API-Schlüssel" klicken, gelangen Sie zur nächsten Seite, auf der wir unseren persönlichen API-Schlüssel erstellen können. Scrollen Sie die Seite herunter, stimmen Sie den Bedingungen 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 Domäne, für die ein anderer API-Schlüssel verwendet wird) Sie möchten eine Karte platzieren). Danach klicken Sie auf "API-Schlüssel generieren"..
Nun sehen Sie Ihren persönlichen API-Schlüssel für die ausgewählte Domäne. Kopieren Sie den API-Schlüssel und fügen Sie ihn ein, oder speichern Sie ihn irgendwo, da wir ihn bald brauchen werden.
Ok, jetzt haben wir unseren API-Schlüssel, aber wir brauchen noch etwas, bevor wir damit beginnen können, unsere Karte in Flash zu erstellen. Wir müssen die Google Map SWC-Komponente herunterladen. Rufen Sie dazu http://code.google.com/intl/nl/apis/maps/documentation/flash/ auf und klicken Sie auf "Google Maps-API für Flash-SDK herunterladen". Ein Popup-Fenster wird angezeigt. Speichern Sie die Datei "sdk.zip" und laden Sie sie herunter.
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 das 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".
Wenn Sie Flash derzeit geöffnet haben, beenden Sie die Anwendung und suchen Sie nach diesem Ordner:
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 für die Unterstützung der Google Maps-API für Flash eingerichtet.
OK. Das ist alles erledigt und abgestaubt! Jetzt können wir endlich unsere Karte in Flash erstellen. Starten Sie Flash CS3 oder CS4 und erstellen Sie eine neue ActionScript 3.0-Datei mit einer Standardstufengröße (550 x 400)..
Nun speichern Sie einfach die Datei. drücken Sie "Strg + S" oder gehen Sie im Menü auf Datei> Speichern. Speichern Sie es an dem gewünschten Ort und benennen Sie ihn nach Belieben. Ich werde es "google_map" nennen.
Öffnen Sie das Komponentenbedienfeld "Strg + F7" oder klicken Sie im Menü auf Fenster> Komponenten und ziehen Sie die GoogleMapsLibrary auf die Bühne.
Erstellen Sie eine neue Ebene, doppelklicken Sie auf ihren Namen und benennen Sie sie in "Aktionen" um..
Öffnen Sie nun mit der ausgewählten Aktionsebene das Aktionsfeld, indem Sie auf "F9" klicken oder auf Fenster> Aktionen klicken. Fügen Sie diese Codezeilen hinzu:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType;
Nun fügen wir die Karte hinzu! Wenn wir den Film laden, erstellt dieser Code eine Karte und setzt 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 / fügen Sie ihn in die Variable ein.
// Erstellen der Karte var map: Map = new Map (); map.key = "Ihr API-Schlüssel hier"; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); this.addChild (map);
OK, testen Sie jetzt Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung> Film testen, und Sie werden sehen, dass Sie gerade eine Karte erstellt haben.
In diesem Stadium können wir die Karte nur herumziehen. Das ist nicht wirklich das, wonach wir suchen, also fügen wir der Karte einige Steuerelemente hinzu, mit denen wir zoomen und uns bewegen können. Um Steuerelemente zu unserer Karte hinzuzufügen, müssen wir unseren Code aktualisieren. Zuerst müssen wir einige zusätzliche Klassen anrufen:
import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
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 der Karte unsere Steuerelemente hinzu.
Funktion onMapReady (Ereignis: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Jetzt müssen wir nur die Funktion "onMapReady ()" aufrufen, wenn unsere Karte geladen wird. Dazu müssen wir unserem ersten Code eine zusätzliche Zeile hinzufügen.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Unser vollständiger Code sieht jetzt so aus:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; // Erstellen der Karte var map: Map = new Map (); map.key = "Ihr API-Schlüssel hier"; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map); Funktion onMapReady (Ereignis: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Testen Sie nun Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung> Film testen, und Sie sehen, dass unsere Karte nun über Steuerelemente verfügt. Wir können die Karte vergrößern und sogar in Satelliten-, Hybrid- und Geländeansicht ändern. Das ist sehr cool, aber wir wollen mehr?
Lassen Sie uns einen bestimmten Ort zoomen, sobald unsere Karte zum ersten Mal geladen wird. Angenommen, ich bin ein Surfer und möchte eine Karte der Surfspots in meiner Heimatstadt erstellen. Wir möchten nicht, dass die Leute manuell hineinzoomen und nach dem Gebiet suchen müssen, also beheben wir das in einer Sekunde. Das einzige, was wir hinzufügen müssen, ist eine kleine Codezeile für unsere "onMapReady ()" - Funktion.
map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Was wir hier wirklich tun, ist das Erstellen eines neuen LatLng-Punkts auf der Karte. Zuerst geben wir zwei Werte an: den "Breitengrad" und den "Längengrad" aus unserer Region. Dann setzen wir unseren Zoomwert; Ich entschied mich für die Verwendung von 9. Der Zoombereich reicht von 0 bis ungefähr 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:
Funktion onMapReady (Ereignis: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Wenn wir unseren Film testen, können Sie feststellen, dass sich viele Dinge geändert haben. Sobald die Karte geladen ist, zoomen wir in unsere Region und unser Kartentyp ist jetzt Hybrid. Um den Längen- und Breitengrad für Ihre Region zu bestimmen, können Sie Google Earth oder ein Online-Tool wie http://itouchmap.com/latlong.html verwenden.
Jetzt fügen wir unserer Karte eine einfache Markierung hinzu. Fügen Sie einfach 2 weitere Klassen hinzu:
importieren Sie com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker;
und aktualisieren Sie die Funktion "onMapReady ()" mit diesem Code:
var marker: Marker = neuer Marker (neues LatLng (28.74659, -13.93447)); map.addOverlay (Markierung);
Wieder erstellen wir einen LatLng-Punkt mit einigen spezifischen Breiten- / Längenwerten für unseren Standort. Dann rufen wir "addOverlay ()" auf, um unsere Markierung auf der Karte zu platzieren. Unser vollständiger Code sieht jetzt so aus:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; importieren Sie com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; // Erstellen der Karte var map: Map = new Map (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map); Funktion onMapReady (Ereignis: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); var marker: Marker = neuer Marker (neues LatLng (28.74659, -13.93447)); map.addOverlay (Markierung);
Geh und teste deinen Film. Sie sehen unseren Marker auf der Karte.
Lassen Sie uns jetzt alles auf die nächste Stufe bringen. Wir haben eine Karte mit Zoomsteuerelementen und einer Markierung. Was brauchen wir noch? Ich werde es dir sagen. Wir brauchen MORE MARKERS, TOOLTIPS, INFO WINDOWS und möchten 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:
28.74659 -13.93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 Die Bubbel
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 hinzugefügten Code löschen, um den Marker nur wenige Schritte zuvor zu erstellen. Dann fügen wir die Zeile hinzu, um die Funktion "xmlLoader ()" aufzurufen. Unsere "onMapReady ()" - Funktion sollte jetzt so aussehen:
Funktion onMapReady (Ereignis: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader ();
Als nächstes wollen wir die Funktion "xmlLoader ()" erstellen.
Funktion xmlLoader ()
Im nächsten Schritt werden wir es auffüllen.
Ok hier sind wir. Lassen Sie uns unsere XML-Daten laden. In der Funktion "xmlLoader ()" fügen wir diesen Code hinzu:
Accentsconagua
Funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = neues XML (e.target.data); // Ende der loadXML-Funktion var xmlLoader: URLLoader = neuer URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (neue URLRequest ("xml.xml")); Dadurch erhalten wir unsere XML-Daten, mit denen Sie arbeiten können.
Da sich in unserer XML-Datei 3 Speicherorte befinden, müssen wir eine "For" -Schleife erstellen und alle Daten in einigen Arrays speichern. In unserer Funktion "loadXML ()" fügen wir diesen Code ein, um die For-Schleife zu erstellen:
für (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
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:
Als Nächstes müssen wir einige Variablen erstellen, um die aus der XML-Datei geladenen Daten zu speichern. In unserer For-Schleife fügen wir folgende Variablen hinzu:
var latlng: LatLng = new LatLng (map_xml.location [i] .lat, map_xml.location [i] .lon); var tip = map_xml.location [i] .name_tip; var myTitle: String = map_xml.location [i] .title_tip; var myContent: String = map_xml.location [i] .content_tip;
Wenn Sie möchten, können Sie die zuvor verwendete "trace ()" - Zeile löschen. Unsere For-Schleife sieht jetzt so aus:
für (var i: Number = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; // end of for loop
OK! Für jeden unserer drei Standorte müssen wir einen Marker in die Karte einfügen. Da nun alle Daten in unseren Variablen gespeichert sind, müssen wir eine neue Funktion mit dem Namen "createMarker ()" erstellen. In unserer Funktion "loadXML ()" fügen wir diese neue Funktion hinzu:
// Marker auf der Map-Funktion hinzufügen createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker var i: Marker = neuer Marker (latlng, neue MarkerOptions (hasShadow: true, Tooltip: "" + Tipp)); return i; // Funktion createMarker beenden
Wir müssen diese Funktion "createMarker ()" immer 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:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
So sollte unsere Funktion "loadXML ()" jetzt aussehen:
Funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = neues XML (e.target.data); für (var i: Number = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); // end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker var i:Marker = new Marker( latlng, new MarkerOptions( hasShadow: true, tooltip: ""+tip ) ); return i; // end function createMarker // end of loadXML function
Testen Sie Ihren Film und Sie sehen die Markierungen auf der Karte! Beachten Sie, dass unsere 3 Punkte sehr nahe beieinander liegen. Daher möchten Sie vielleicht ein wenig zoomen, um sie deutlicher zu sehen.
Schließlich müssen wir noch einige Info-Fenster hinzufügen. Wenn wir auf die Markierungen klicken, erhalten wir Informationen über ihre Standorte. Dazu müssen wir noch zwei weitere Klassen hinzufügen:
importieren Sie com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
? etwas mehr Code zu unserer "createMarker ()" Funktion?
i.addEventListener (MapMouseEvent.CLICK, Funktion (Ereignis: MapMouseEvent): void map.openInfoWindow (event.latLng, neue InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));
Testen Sie jetzt Ihren Film, und Sie sehen, dass unsere Marker jetzt anklickbar sind und ein Informationsfenster mit Text aus der XML-Datei erstellen.
Das ist es! Schauen Sie sich unseren endgültigen Code an:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; importieren Sie com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; importieren Sie com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Erstellen der Karte var map: Map = new Map (); map.key = "Ihr API-Schlüssel hier"; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map); Funktion onMapReady (Ereignis: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader (); function xmlLoader () Funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = neues XML (e.target.data); für (var i: Number = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); // end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker var i:Marker = new Marker( latlng, new MarkerOptions( hasShadow: true, tooltip: ""+tip ) ); i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void map.openInfoWindow(event.latLng, new InfoWindowOptions( titleHTML: ""+myTitle, contentHTML: ""+myContent )); ); return i; // end function createMarker // end of loadXML function var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("xml.xml")); Testen Sie Ihren Film mit Strg + Enter, um das Ergebnis zu überprüfen. Sie haben Ihre eigene XML-basierte Flash-Karte! Sie können es auf Ihrer Website verwenden, die Standorte nach Belieben bearbeiten, es liegt an Ihnen. Machen Sie weiter und experimentieren Sie, wenn Sie coole Ergebnisse haben, teilen Sie diese unbedingt mit uns.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
