Share
Nach einer so positiven Reaktion auf mein erstes Tutorial Eine Karte mit Google Map API für Flash implementieren, entschied ich mich, eine zweite zu schreiben. Seit diesem ersten Zeitpunkt wurde die Google Map API aktualisiert, sodass Entwickler (unter anderem) 3D-Ansichten zu Karten hinzufügen können. Dies ist eine großartige Funktion, und in diesem Tutorial erkläre ich, wie man es benutzt.
Außerdem forderten viele Leute eine Erklärung für das Hinzufügen von benutzerdefinierten Markern. das ist das zweite, was wir heute hier besprechen werden.
Ich werde nicht weiter auf unserer vorherigen Karte bauen, da wir die neue Google Map-Komponente herunterladen müssen. Es gibt keine Möglichkeit, die Komponente aus meinem vorherigen Tutorial zu verwenden, da sie die 3D-Funktionen nicht unterstützt. Also… gehen Sie zu http://code.google.com/intl/nl/apis/maps/documentation/flash/
Wir müssen die SDK-Komponente installieren, um sie in Flash verwenden zu können. Navigieren Sie dazu zu dem Speicherort, an dem Sie die Google Maps SDK-Komponente gespeichert haben, und suchen Sie die Nicht-Flex-Version der Schnittstellenbibliothek. In meinem Fall ist dies (lib / map_1_18.swc). Kopieren Sie nun die Datei "map_1_18.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_18.swc" ein. Flash ist jetzt auf eingestellt
Unterstützung der Google Maps-API für Flash.
Ok, wir haben die Komponente jetzt, aber bevor wir loslegen können, benötigen wir noch einen Google Map API-Schlüssel, damit unsere Karte online funktioniert. Ein Google Map API-Schlüssel ist kostenlos und Sie können ihn hier erhalten:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, die langweilige Arbeit ist erledigt, jetzt können wir mit dem Spaß beginnen! Lassen Sie uns in Flash eintauchen und eine neue ActionScript 3.0-Datei mit Standardstufengröße (550 x 400) erstellen..
Ich ziehe es vor, mit dem Speichern der Datei zu beginnen. Während ich arbeite, treffe ich wirklich gerne "Strg + S" die ganze Zeit, also mach weiter
"Strg + S" oder klicken Sie im Menü auf "Datei> Speichern". Speichern Sie es an dem gewünschten Ort und benennen Sie ihn nach Belieben. Ich werde es nennen
"google Karte".
Öffnen Sie das Komponentenbedienfeld "Strg + F7" oder klicken Sie im Menü auf Fenster> Komponenten. Ziehen Sie die GoogleMapsLibrary in Ihre Bibliothek.
Um die Übersicht zu behalten, benenne ich die erste Ebene gerne in "Aktionen" um..
Wenn die Aktionsebene ausgewählt ist, öffnen Sie das Aktionsfeld (drücken Sie "F9" oder klicken Sie auf "Fenster> Aktionen") und fügen Sie die folgenden Codezeilen hinzu:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.Map3D; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude;
Jetzt erstellen wir unsere erste Funktion. Zuerst wollen wir unsere Map-Variable deklarieren:
// Variablen var map: Map3D;
Jetzt können wir unsere Funktion hinzufügen, die wir aufrufen werden, um die Hauptkarte auf der Bühne hinzuzufügen:
// Funktion, die die Karte auf der Bühne hinzufügt Funktion add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map);
OK, wie Sie sehen, haben wir einen Eventlistener hinzugefügt, der ausgelöst wird, sobald unsere Karte geladen ist. Erstellen Sie also diese Funktion:
// Funktion, die ausgelöst wird, sobald die Karte erstellt wird Funktion onMapReady (Ereignis: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.4860573103489), 13); map.setAttitude (neue Einstellung (20,30,0));
Hier haben wir die Karte zentriert. Diese Funktion hat 3 Werte und definiert den Ort, an dem die Karte geöffnet wird. Das
Werte sind wie folgt: "map.setCenter (neues LatLng (Breite, Längengrad), Zoomen); "Dann definieren wir den Ansichtsmodus;
Da wir die neue 3D-Karte verwenden, werde ich die Perspektivansicht verwenden. Wenn Sie eine normale Kartenansicht mögen, können Sie diesen Wert in ändern
"View.VIEWMODE_2D".
Dann legen wir die Einstellung fest. Dadurch wird festgelegt, wie wir die Karte anzeigen. In diesem Fall fügen wir eine kleine perspektivische Ansicht hinzu und
Drehen Sie die Karte ein wenig, um einen schöneren Blickwinkel zu erhalten. Sie können mit diesen Werten ein wenig herumspielen und sehen, was Ihnen am besten gefällt.
OK, es ist Zeit für einen ersten Check! Was haben wir bisher? Nun, noch nichts! Wir müssen zuerst unsere Funktion aufrufen, um die
Karte! Fügen wir diese Codezeile direkt unter unseren Variablen hinzu:
// Variablen var map: Map3D; // Rufe die Funktion auf, um die Map zu erstellen add_map ();
Da gehen wir! Testen Sie jetzt einfach Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung> Film testen ...
Ja! Wir haben eine Karte mit dem Brüsseler Flughafen! Ist das nicht toll ?! Vielleicht nicht… Schauen wir uns an, was wir hier haben. Wir haben die Karte und können die Karte ziehen. Was wir als nächstes brauchen, sind Werkzeuge zum Navigieren auf der Karte und zum Vergrößern und Verkleinern der Karte. Beginnen wir zuerst mit diesen Navigationswerkzeugen!
Lassen Sie uns zunächst drei zusätzliche Klassen importieren. Fügen Sie diese Zeilen unter dem anderen Importcode in unserem Skript hinzu:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
Nein, gehen Sie zur onMapReady () - Funktion und fügen Sie diese 3 Codezeilen unter den anderen Zeilen hinzu:
map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Hier fügen wir die Kartentyp-Steuerelemente hinzu, sodass wir den Kartentyp jetzt ändern können. Dann fügen wir am rechten unteren Rand unserer Karte ein Steuerelement für die Kartenübersicht hinzu. Und wir fügen die Kartennavigationstools hinzu. Dies ist unser vollständiger Quellcode, wie er jetzt aussehen sollte:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.Map3D; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; // Variablen var map: Map3D; // Rufe die Funktion auf, um die Map zu erstellen add_map (); // Funktion, die die Karte auf der Bühne hinzufügt Funktion add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map); // Funktion, die ausgelöst wird, sobald die Map erstellt wird. map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (neue Einstellung (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Testen Sie Ihren Film erneut. Sie können sehen, dass Sie sich mit diesen funky aussehenden neuen Elementen jetzt ganz leicht auf der Karte bewegen können
Kontrollen!
Ich denke, es ist Zeit, zum Marker-Teil überzugehen. Eine Karte ohne Markierungen ist wie eine Bar ohne Bier, nicht wahr? Kein dummes Zeug diesmal! Lassen Sie uns gleich zu den benutzerdefinierten Markierungen wechseln!
Wir möchten unsere benutzerdefinierten Marker auf der Karte mit Informationen platzieren, die in einer externen XML-Datei gespeichert werden. Beginnen wir mit dem Erstellen einer benutzerdefinierten Markierung. Dann erstellen wir die XML-Datei und laden sie anschließend in Flash.
Ich bin kein großer Designer, also denke ich, dass Sie einen viel cooleren Marker erstellen können als ich! Deshalb verbringe ich nicht zu viel Zeit damit. Zeichnen Sie einfach einige Kreise, legen Sie sie übereinander, wählen Sie alles aus, drücken Sie F8, wählen Sie movieClip aus, nennen Sie es "marker_mc" und wählen Sie Export for Actionscript. Drücke "OK".
Wie ich bereits erwähnt habe, hoffe ich, dass Sie einen cooleren und besser aussehenden Marker als diesen erstellen! Zeichne einfach deinen eigenen Marker und
covert es, wie oben erklärt, zu einem Film.
Nachdem Sie den Movieclip erstellt haben, wird er in Ihrer Bibliothek angezeigt. Sie können es dann von der Bühne löschen, da wir es mit importieren
ActionScript (deshalb mussten Sie die Option "Für ActionScript exportieren" auswählen). In unserer Bibliothek haben wir jetzt 2 Elemente; das
GoogleMapsLibrary und unsere marker_mc.
OK, hier sind wir. Wir haben eine Karte und (in Ihrem Fall) einen sehr gut aussehenden Marker! Nun erstellen wir die XML-Datei. Öffnen Sie Ihren bevorzugten Code-Editor, erstellen Sie diese Datei und speichern Sie sie als locations.xml.
50.899197766773284 4.486040573103489 Brüssel 49.004024443647324 2.571113562006575 Paris 51.4699229971675 -0,45367874251784013 London
Wir müssen die XML-Daten in unseren Flash-Film aufnehmen. Dazu müssen wir eine neue Funktion erstellen, die unsere XML-Datei lädt. Hinzufügen
Dieses Stück Code am Ende des Skripts. In unserer onMapReady () - Funktion rufen wir diese neue load_xml () - Funktion auf. Sobald unsere Karte fertig ist, werden wir die XML-Datei laden.
Accentsconagua
// Funktion zum Laden der XML-Funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = neues XML (e.target.data); function load_xml () var xmlLoader: URLLoader = neuer URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (neue URLRequest ("locations.xml")); Da sich in unserer XML-Datei 3 Speicherorte befinden, müssen wir eine "For" -Schleife erstellen und alle Daten in einigen Arrays speichern. In unserem
loadXML () - Funktion fügen wir diesen Code hinzu, 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);
Wenn wir unseren Film jetzt testen, können wir sehen, wie der Film die XML-Daten ausgibt. Jetzt lass uns damit arbeiten.
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;
Sie können die "trace ()" - Zeile löschen, die wir zuvor verwendet haben, da wir wissen, dass die Dinge funktionieren.
Nun, da wir alle XML-Daten in Variablen gespeichert haben, können wir unsere Marker auf die Karte laden. Zuerst fügen wir unserem Code einige zusätzliche Klassen hinzu. Fügen Sie diesen Code unter den anderen Klassen hinzu:
importieren Sie com.google.maps.overlays. *; importieren Sie com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
Erstellen Sie eine neue Funktion namens createMarker (). Wir möchten diese Funktion kurz vor unserer loadXML () - Funktion hinzufügen.
// 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;
Wir können die Funktion createMarker () für jeden Marker aufrufen, den wir zur Karte hinzufügen müssen. In unserem For-Loop fügen wir folgende Codezeile hinzu:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Wenn Sie den Film jetzt testen, können Sie feststellen, dass sich auf unserer Karte an den in unserer XML-Datei angegebenen Orten Markierungen befinden! Das ist großartig, aber wir haben diesen tollen benutzerdefinierten Marker nicht umsonst erstellt. Wir entfernen diese Standardmarkierungen und fügen unsere benutzerdefinierten Marker hinzu.
Zuerst müssen wir unser benutzerdefiniertes Markierungsobjekt erstellen. Fügen Sie diesen Code in die Funktion createMarker () oberhalb des restlichen Codes ein:
// Benutzerdefiniertes Marker-Objekt erstellen var markerPin: marker_mc = new marker_mc (); // Wenn dein Marker zu groß ist, kannst du ihn hier verkleinern markerPin.width = 20; markerPin.height = 20;
Danach fahren wir mit dem nächsten Code fort, in dem wir den markerOptions eine Zeile hinzufügen müssen. Nach diesem Code suchen:
neue MarkerOptions (hasShadow: true, Tooltip: "" + tip)
und ändern Sie es in:
neue MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), Tooltip: "" + tip)
OK! Testen Sie Ihren Film und überprüfen Sie das Ergebnis!
OK, was kommt als nächstes? Die Infofenster! Wenn wir auf unsere Markierung klicken, müssen wir die Informationen abrufen, die wir unserer XML-Datei hinzugefügt haben. Bevor wir die Informationsfenster hinzufügen, möchte ich nur die hässliche gelbe Linie um unsere Karte entfernen, haben Sie das schon bemerkt? Wenn Sie sich auf die Karte konzentrieren, zeigt sie eine gelbe Linie. Ich persönlich mag das wirklich nicht, also entfernen wir es. Fügen Sie einfach diese Codezeile unter unserem Abschnitt "Variablen" hinzu:
// Keine Fokuslinie stage.stageFocusRect = false;
Ok das ist erledigt! Lassen Sie uns Info-Fenster hinzufügen. Fügen Sie unserer createMarker () - Funktion etwas mehr Code hinzu:
i.addEventListener (MapMouseEvent.CLICK, Funktion (Ereignis: MapMouseEvent): void map.openInfoWindow (event.latLng, neue InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));
So sieht unsere createMarker () - Funktion jetzt aus:
function createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker // Benutzerdefiniertes Markerobjekt erstellen var markerPin: marker_mc = new marker_mc (); // Wenn dein Marker zu groß ist, kannst du ihn hier verkleinern markerPin.width = 20; markerPin.height = 20; var i: Marker = neuer Marker (latlng, neue MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), Tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, Funktion (Ereignis: MapMouseEvent): void map.openInfoWindow (event.latLng, neue InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)); return i;
Testen Sie Ihren Film und Sie haben jetzt auch Infofenster.
Das war's! Glückwunsch, Sie haben gerade eine Google Map mit 3D-Navigation und benutzerdefinierten Markern erstellt! Sehr gute Arbeit! Lass uns ein .... haben
letzter Blick auf unseren Code:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.Map3D; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; importieren Sie com.google.maps.overlays. *; importieren Sie com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Variablen var map: Map3D; // Keine Fokuslinie stage.stageFocusRect = false; // Rufe die Funktion auf, um die Map zu erstellen add_map (); // Funktion, die die Karte auf der Bühne hinzufügt Funktion add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (neuer Punkt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (map); // Funktion, die ausgelöst wird, sobald die Map erstellt wird. map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (neue Einstellung (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ()); // lade die xml load_xml (); // Marker auf der Map-Funktion hinzufügen createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker // Benutzerdefiniertes Markerobjekt erstellen var markerPin: marker_mc = new marker_mc (); // Wenn dein Marker zu groß ist, kannst du ihn hier verkleinern markerPin.width = 20; markerPin.height = 20; var i: Marker = neuer Marker (latlng, neue MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), Tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, Funktion (Ereignis: MapMouseEvent): void map.openInfoWindow (event.latLng, neue InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)); return i; // Funktion zum Laden der XML-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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Sie können diese Karte 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!
