Share
Två gånger i månaden besöker vi några av våra läsares favoritinlägg från hela Activetuts + historia. Denna handledning publicerades först i maj 2009.
I den här handledningen ser vi hur vi kan skapa en karta i Flash med hjälp av Google Map API. Vi kommer att täcka några av grunderna som att zooma in på kartan och lägga till några kontroller. Vi tittar också på hur vi kan lägga till markörer på vår karta och hur vi kan ladda data med en XML-fil.
Innan vi kan börja skapa vår karta i Flash måste vi konfigurera några saker. För att använda Google Map API behöver du en personlig API-nyckel. För att få det här, gå till http://code.google.com/intl/nl/apis/maps/documentation/flash/ och klicka på länken till höger på sidan "Registrera dig för en API-nyckel för Google Maps".
Genom att klicka på länken "Anmäl dig till en Google Maps API-nyckel" kommer vi till nästa sida där vi kan generera vår personliga API-nyckel. Bläddra ner på sidan, överensstämma med villkoren (du kan också läsa dem om du är intresserad) och lägg till webbadressen till webbplatsen där du vill använda programmet (du behöver en annan API-nyckel för varje domän där du vill placera en karta). Därefter klickar du på "Generera API-nyckel".
Nu ser du din personliga API-nyckel för den valda domänen. Kopiera API-nyckeln och klistra in eller spara den någonstans så vi behöver det väldigt snart.
Okej, nu har vi vår API-nyckel men vi behöver fortfarande en sak innan vi kan börja skapa vår karta i Flash. Vi behöver ladda ner Google Map SWC-komponenten. För att göra det, gå till http://code.google.com/intl/nl/apis/maps/documentation/flash/ och klicka på "Hämta Google Maps API för Flash SDK". Ett popup-fönster visas, välj att spara filen "sdk.zip" och hämta den.
Nu måste vi installera SDK-komponenten för att kunna använda den i Flash. För att göra det, navigera till den plats där du sparade Google Maps API för Flash SDK och hitta den icke-Flex-versionen av gränssnittsbiblioteket. I mitt fall är detta (lib / map_1_9.swc). Kopiera nu "map_1_9.swc" -filen.
Därefter, om du har Flash för tillfället öppen, avslutar du programmet och söker efter den här mappen:
Inne i den mappen skapar du en ny mapp med namnet "google" och klistra in filen "map_1_9.swc" inuti den. Flash är nu inrättat för att stödja Google Maps API för Flash.
Ok. Det är allt gjort och dammat! Nu kan vi äntligen börja skapa vår karta i Flash. Starta Flash CS3 eller CS4 och skapa en ny ActionScript 3.0-fil, standardstegsstorlek (550 x 400).
Spara nu bara filen; slå "Ctrl + S" eller gå till Arkiv> Spara i menyn. Spara det till den plats du vill ha och namnge det du vill ha. Jag ska namnge det "google_map".
Öppna panelen Komponenter "Ctrl + F7" eller klicka på Fönster> Komponenter i menyn och dra GoogleMapsLibrary till scenen.
Skapa ett nytt lager, dubbelklicka på namnet och byt namn på det till "actions".
Nu med det aktiva lagrets skikt öppnas åtgärdspanelen genom att trycka på "F9" eller klicka på Fönster> Åtgärder. Lägg till dessa rader med kod:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.MapEvent; importera com.google.maps.MapType;
Låt oss nu lägga till kartan! När vi laddar filmen kommer den här koden att skapa en karta och ställa in den på scenen. Inuti koden ser vi variabeln "map.key"; här måste vi lägga till vår personliga API-nyckel. Öppna filen där du sparade API-knappen och Kopiera / Klistra in den i variabeln.
// Skapa karta var kartan: Karta = Ny karta (); map.key = "Din API-nyckel här"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); this.addChild (karta);
Ok, gå och testa din film "Ctrl + Enter" eller klicka på Control> Test Movie i menyn så ser du att du just har skapat en karta.
På detta stadium kan vi bara dra kartan runt. Det är inte riktigt vad vi letar efter, så låt oss lägga till några kontroller på kartan som gör att vi kan zooma och flytta om. För att lägga till kontroller på vår karta behöver vi uppdatera vår kod. Först måste vi ringa några extra klasser:
importera com.google.maps.controls.ZoomControl; importera com.google.maps.controls.PositionControl; importera com.google.maps.controls.MapTypeControl;
Efter det behöver vi skapa en ny funktion att ringa en gång kartan skapas. Vi namnger den funktionen "onMapReady ()". Inne i den här funktionen lägger vi till våra kontroller på kartan.
funktion onMapReady (händelse: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ());
Nu behöver vi bara ringa funktionen "onMapReady ()" när vår karta är laddad. För att göra det måste vi lägga till en extra rad till vår första kod.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Vår fullständiga kod ser nu så här ut:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.controls.ZoomControl; importera com.google.maps.controls.PositionControl; importera com.google.maps.controls.MapTypeControl; // Skapa karta var kartan: Karta = Ny karta (); map.key = "Din API-nyckel här"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta); funktion onMapReady (händelse: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ());
Testa nu din film "Ctrl + Enter" eller klicka på Control> Test Movie i menyn och du kommer se att vår karta nu har kontroller. Vi kan zooma in och ändra vår karta till satellit-, hybrid- och terrängvyn. Det är väldigt coolt men vi vill ha mer?
Låt oss zooma in på en viss plats när vår karta laddas för första gången. Säg att jag är surfare och jag vill skapa en karta över surfpunkterna i min hemstad. Vi vill inte att människor manuellt måste zooma in och söka efter området, så vi fixar det på en sekund. Det enda vi måste lägga till är en liten kodlinje till vår funktion "onMapReady ()".
map.setCenter (nya LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Vad vi faktiskt gör här är att skapa en ny LatLng-punkt på kartan. Först anger vi 2 värden: "latitud" och "longitud" från vår region. Sedan ställer vi in vårt zoomvärde; Jag valde att använda 9. Zoomen varierar från 0 till cirka 16 (detta kan variera från region till region). Slutligen ställer vi in karttypen; Jag valde här för HYBRID_MAP_TYPE.
Vår funktion "onMapReady ()" ser nu ut så här:
funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ());
Om vi testar vår film kan du se att många saker har förändrats. När kartan är laddad zoomar vi in i vår specifika region och vår kartortyp är nu Hybrid. För att bestämma latitud och longitud för din region kan du använda Google Earth eller ett onlineverktyg som http://itouchmap.com/latlong.html.
Låt oss nu lägga till en enkel markör på vår karta. Lägg bara till 2 fler klasser:
importera com.google.maps.overlays.MarkerOptions; importera com.google.maps.overlays.Marker;
och uppdatera funktionen "onMapReady ()" med den här koden:
var-markör: Marker = ny markör (ny LatLng (28.74659, -13.93447)); map.addOverlay (markör);
Återigen skapar vi en LatLng-punkt med vissa specifika latitud- / longitudvärden för vår plats. Då kallar vi "addOverlay ()" för att placera vår markör på kartan. Vår fullständiga kod ser nu så här ut:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.controls.ZoomControl; importera com.google.maps.controls.PositionControl; importera com.google.maps.controls.MapTypeControl; importera com.google.maps.overlays.MarkerOptions; importera com.google.maps.overlays.Marker; // Skapa karta var kartan: Karta = Ny karta (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta); funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ()); var-markör: Marker = ny markör (ny LatLng (28.74659, -13.93447)); map.addOverlay (markör);
Gå och testa din film. Du ser vår markör på kartan.
Låt oss nu ta allt till nästa nivå. Vi har en karta med zoomreglage och en markör. Vad behöver vi mer? Jo jag ska berätta. Vi behöver fler markörer, verktygstips, INFO WINDOWS och vi vill ladda allt från en XML-fil. Så låt oss börja. Först ska vi skapa vår XML-fil. Öppna din favorit XML-editor och skapa den här filen:
28,74659 -13,93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 The Bubbel
När vår karta är laddad måste vi dra XML-data till vår Flash-fil. Skapa en ny funktion som heter "xmlLoader ()" och vi ringer den funktionen i funktionen "onMapReady ()". Först måste vi ta bort koden som vi lagt till för att skapa vår markör bara några steg före. Sedan lägger vi till raden för att ringa funktionen "xmlLoader ()". Vår funktion "onMapReady ()" ska nu se ut så här:
funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader ();
Nästa vill vi skapa funktionen "xmlLoader ()".
funktion xmlLoader ()
I nästa steg fyller vi upp det.
Ok här är vi. Låt oss ladda våra XML-data. Inne i funktionen "xmlLoader ()" lägger vi till den här koden:
Accentsconagua
funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); // slutet av loadXML-funktionen var xmlLoader: URLLoader = ny URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (ny URLRequest ("xml.xml")); Detta får oss att få våra XML-data att fungera med.
Eftersom vi har 3 platser i vår XML-fil måste vi skapa en "För" -slinga och lagra all data i vissa Arrays. Inom vår "loadXML ()" -funktion lägger vi till den här koden för att skapa For-loop:
för (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
För att testa om saker fungerar för oss spår vi variabeln "title_tip". Testa din film och du ska få följande utdata:
Därefter måste vi skapa några variabler för att lagra vår data laddad från XML-filen. Inom vår For-loop lägger vi till dessa variabler:
var latlng: LatLng = ny LatLng (map_xml.location [i] .lat, map_xml.location [i] .lon); var tips = map_xml.location [i] .name_tip; var myTitle: String = map_xml.location [i] .title_tip; var myContent: String = map_xml.location [i] .content_tip;
Om du vill kan du ta bort den "spår ()" -linjen vi använde tidigare. Vår för loop ser nu ut så här:
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! Vi måste lägga till en markör på kartan för var och en av våra tre platser. Nu när vi har alla data som lagras i våra variabler måste vi skapa en ny funktion som heter "createMarker ()". Inne i vår "loadXML ()" -funktion lägger vi till den här nya funktionen:
// Lägg markörer på kartfunktionen createMarker (latlng: LatLng, nummer: Nummer, tips, myTitle, myContent): Marker var i: Marker = ny Markör (latlng, ny MarkerOptions (hasShadow: true, tooltip: tips ) ); returnera jag; // slutfunktionen createMarker
Vi behöver fortfarande kalla denna "createMarker ()" -funktion för att se våra markörer på kartan. För att göra det måste vi lägga till en extra kod kod i slutet av vår For-loop:
map.addOverlay (createMarker (latlng, jag, tips, myTitle, myContent));
Det här är vad vår "loadXML ()" -funktion ska se ut nu:
funktion loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny 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
Testa din film och du kommer se markörerna på kartan! Observera att våra 3 poäng ligger mycket nära varandra så att du kanske vill zooma in lite för att se dem tydligare.
Slutligen måste vi lägga till lite Info Windows. Om vi klickar på markörerna får vi då information om sina platser. För att göra så måste vi lägga till ytterligare 2 klasser:
importera com.google.maps.InfoWindowOptions; importera com.google.maps.MapMouseEvent;
? lite mer kod till vår "createMarker ()" -funktion?
i.addEventListener (MapMouseEvent.CLICK, funktion (händelse: MapMouseEvent): void map.openInfoWindow (event.latLng, nya InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent););
Testa nu din film och du ser att våra markörer nu är klickbara och att de skapar ett informationsfönster med text från XML-filen.
Det är allt! Ta en titt på vår sista kod:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.controls.ZoomControl; importera com.google.maps.controls.PositionControl; importera com.google.maps.controls.MapTypeControl; importera com.google.maps.overlays.MarkerOptions; importera com.google.maps.overlays.Marker; importera com.google.maps.InfoWindowOptions; importera com.google.maps.MapMouseEvent; // Skapa karta var kartan: Karta = Ny karta (); map.key = "Din API-nyckel här"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta); funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (nya PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader (); funktion xmlLoader () function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny 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")); Testa din film Ctrl + Enter för att kontrollera resultatet. Du har en egen xml-baserad Flash-karta! Du kan använda den på din webbplats, redigera platserna som du vill, det är upp till dig. Fortsätt och experimentera, om du har några coola resultat, var noga med att dela dem med oss.
Jag hoppas att du gillade den här handledningen, tack för att du läste!
