Share
Efter ett sådant positivt svar på min första handledning Implementera en karta med hjälp av Google Map API för Flash bestämde jag mig för att skriva en sekund. Sedan den första tutningen har Google Map API uppdaterats, så att utvecklare (bland annat) kan lägga till 3D-visning på kartor. Det här är en bra funktion och under denna handledning kommer jag att förklara hur man använder den.
Många människor begärde också en förklaring för att lägga till anpassade markörer; Det är det andra vi diskuterar här idag.
Jag kommer inte att bygga vidare på vår tidigare karta eftersom vi behöver ladda ner den nya Google Map-komponenten. Det går inte att använda komponenten från min tidigare handledning eftersom den inte stöder 3D-funktionerna. Så ... gå till http://code.google.com/intl/nl/apis/maps/documentation/flash/
Vi måste 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 SDK-komponenten för Google Maps och hitta den icke-Flex-versionen av gränssnittsbiblioteket. I mitt fall är detta (lib / map_1_18.swc). Kopiera nu "map_1_18.swc" -filen.
Därefter, om du har Flash för tillfället öppen, avslutar du programmet och söker efter den här mappen:
Inuti den mappen skapar du en ny mapp med namnet "google" och klistra in filen "map_1_18.swc" inuti den. Flash är nu inställt på
stödja Google Maps API för Flash.
Okej, vi har komponenten nu, men innan vi kan komma till jobbet behöver vi fortfarande en Google Map API-nyckel för att få vår karta att fungera online. En Google Map API-nyckel är gratis och du kan få en här:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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.
OK, det tråkiga arbetet är klart, nu kan vi börja med de roliga grejerna! Låt oss dyka in i Flash och skapa en ny ActionScript 3.0-fil, standardstegsstorlek (550 x 400).
Jag föredrar att börja med att spara filen. Medan jag jobbar gillar jag verkligen att träffa "Ctrl + S" hela tiden, så fortsätt hit
"Ctrl + S" eller klicka på "File> Save" i menyn. Spara det till den plats du vill ha och namnge det du vill ha. Jag kommer att namnge det
"Google karta".
Öppna panelen Komponenter "Ctrl + F7" eller klicka på Fönster> Komponenter i menyn. Dra GoogleMapsLibrary till ditt bibliotek.
För att hålla organisationen gillar jag att byta namn på det första lagret till "handlingar".
Med det markerade lagringsskiktet öppnas handlingspanelen (tryck "F9" eller klicka på "Fönster> Åtgärder") och lägg till dessa rader med kod:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.Map3D; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.View; importera com.google.maps.geom.Attitude;
Nu skapar vi vår första funktion. Först vill vi förklara vår kartvariabel:
// Variabler var karta: Map3D;
Nu kan vi lägga till vår funktion som vi kommer att ringa för att lägga till huvudkartan på scenen:
// Funktion som lägger till kartan på scenfunktionen add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta);
OK, som du kan se vi lade till en händelselista som kommer att elda när kartan är laddad, så låter vi också skapa den funktionen:
// Funktion som kommer att elda en gångs karta skapas funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (new Attitude (20,30,0));
Här har vi satt kartan för att centrera. Den här funktionen har 3 värden och kommer att definiera platsen där kartan öppnas. De
värden är så här "map.setCenter (new LatLng (latitud, longitud), zoom); ". Sedan definierar vi visningsläget;
När vi använder den nya 3D-kartan kommer jag att använda Perspektivvy. Om du gillar en vanlig kartvy kan du ändra det här värdet till
"View.VIEWMODE_2D".
Sedan ställer vi upp inställningen. Det här definierar hur vi visar kartan. I det här fallet lägger vi till en liten perspektivvy på den och
vrid kartan lite för att skapa en snyggare vinkel. Du kan leka med dessa värden lite och se vad du gillar bäst.
OK, det är dags för en första kontroll! Vad har vi hittills? Tja, ingenting ännu! Vi behöver först ringa vår funktion för att skapa
Karta! Låt oss lägga till denna rad kod precis under våra variabler:
// Variabler var karta: Map3D; // Ring funktionen för att skapa kartan add_map ();
Där går vi! Testa nu bara din film "Ctrl + Enter" eller klicka på Control> Test Movie i menyn ...
ja! Vi har en karta zoomad in på Brussels Airport! Är inte det bra ?! Kanske inte ... Låt oss ta en titt på vad vi har här. Vi har kartan och vi kan dra kartan runt. Så vad vi behöver nästa är verktyg för att navigera runt på kartan, zooma in och ut på kartan. Låt oss börja med dessa navigationsverktyg först!
Låt oss först och främst importera 3 extra klasser; lägg till dessa rader under den andra importkoden i vårt skript:
importera com.google.maps.controls.NavigationControl; importera com.google.maps.controls.MapTypeControl; importera com.google.maps.controls.OverviewMapControl;
Nej, gå till funktionen onMapReady () och lägg till dessa 3 linjer kod under de andra raderna:
map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nya NavigationControl ());
Här lägger vi till karttypskontroller, så nu kan vi ändra kartortypen. Sedan lägger vi till en kartöversiktskontroll längst ner på vår karta. Och vi lägger till kartnavigationsverktygen. Det här är vår fullständiga källkod som den borde se ut nu:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.Map3D; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.View; importera com.google.maps.geom.Attitude; importera com.google.maps.controls.NavigationControl; importera com.google.maps.controls.MapTypeControl; importera com.google.maps.controls.OverviewMapControl; // Variabler var karta: Map3D; // Ring funktionen för att skapa kartan add_map (); // Funktion som lägger till kartan på scenfunktionen add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta); // Funktion som kommer att elda en gångs karta skapas funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny inställning (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nya NavigationControl ());
Fortsätt och testa din film igen. Du kan se att du kan flytta runt på kartan väldigt enkelt nu med dessa funky nya
kontroller!
Jag tycker att det är dags att gå vidare till markörens del; en karta utan markörer är som en bar utan öl är det inte? Inga dumma saker den här gången! Låt oss flytta till Anpassade markörer genast!
Vi vill placera våra anpassade markörer på kartan med information som kommer att lagras i en extern XML-fil. Låt oss börja med att skapa en anpassad markör, då skapar vi XML-filen och därefter laddar vi den till Flash.
Jag är inte mycket av en designer så jag tror att du kommer att kunna skapa en mycket kallare markör än vad jag har! Det är därför jag inte spenderar för mycket tid på detta. Rita bara några cirklar, sätt dem ovanpå varandra, välj allt, klicka på F8, välj movieclip, namnge det "marker_mc" och välj Exportera för Actionscript. Hit "OK".
Som jag nämnde tidigare hoppas jag att du kommer att skapa en kallare och snyggare markör än detta! Bara rita din egen markör och
dölja det till en rörlås som förklaras ovan.
När du har skapat movieclip visas den i ditt bibliotek. Du kan sedan radera den från scenen som vi kommer att importera den med
ActionScript (det var därför du var tvungen att välja alternativet "Exportera till ActionScript"). I vårt bibliotek har vi nu 2 saker; de
GoogleMapsLibrary och vår markör_mc.
OK, här är vi. Vi har en karta och (i ditt fall) en mycket snygg markör! Låt oss nu skapa XML-filen. Öppna din favorit kodredigerare, skapa den här filen och spara den som locations.xml.
50,899197766773284 4,486040573103489 bryssel 49,004024443647324 2,571113562006575 paris 51,4699229971675 -,45367874251784013 london
Vi behöver få XML-data i vår flashfilm. För att göra så behöver vi skapa en ny funktion som laddar vår xml. Lägg till
den här koden längst ner i manuset. Inom vår funktion onMapReady () kallar vi den här nya load_xml () -funktionen. När vår karta är klar börjar vi ladda xml.
Accentsconagua
// Funktion som laddar xml-funktionen loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); funktion load_xml () var xmlLoader: URLLoader = ny URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (ny URLRequest ("locations.xml")); 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. Inuti vårt
loadXML () funktionen 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);
Om vi testar vår film nu kan vi se våra videoutgångar xml-data. Låt oss nu arbeta med det.
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;
Du kan ta bort den "spår ()" -linjen vi använde tidigare eftersom vi vet att sakerna fungerar.
Nu när vi har alla våra XML-data lagrade i variabler kan vi komma över för att ladda våra markörer på kartan. Först lägger vi till några extra klasser till vår kod. Lägg till den här koden under de andra klasserna:
importera com.google.maps.overlays. *; importera com.google.maps.InfoWindowOptions; importera com.google.maps.MapMouseEvent;
Skapa en ny funktion som heter createMarker (). Vi vill lägga till den här funktionen precis innan vår loadXML () -funktion.
// 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;
Vi kan kalla funktionen createMarker () för varje markör som vi behöver lägga till på kartan, så inom vår For Loop lägger vi till den här koden:
map.addOverlay (createMarker (latlng, jag, tips, myTitle, myContent));
Om du testar filmen nu kan du se att vi har markörer på vår karta på de platser vi angav i vår xml-fil! Det är bra, men vi skapade inte den stora anpassade markören för ingenting gjorde vi? Vi tar bort dessa standardmarkörer och lägger till våra anpassade markörer.
Först måste vi skapa vårt anpassade markörobjekt. Lägg till den här koden i funktionen createMarker (), över resten av koden:
// skapa anpassat markörobjekt var markörPin: markör_mc = ny markör_mc (); // Om din markör är för stor kan du skala ner den här markörenPin.width = 20; markörPin.höjd = 20;
Efteråt går vi till nästa kod, där vi måste lägga till en rad till markörOptioner. Sök efter denna kod:
nya MarkerOptions (hasShadow: true, tooltip: "" + tips)
och byt till:
nya MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), verktygstips: "" + tips)
Ok! Testa din film och kolla resultatet!
OK, vad är nästa? Info-fönstren! När vi klickar på vår markör behöver vi hämta den information vi lagt till i vår XML-fil. Innan vi lägger till informationsfönstren vill jag bara ta bort den fula gula linjen runt vår karta, har du märkt redan? När du fokuserar på kartan visar den en gul linje runt den. Jag tycker verkligen inte om det, så låt oss ta bort det. Lägg bara till den här koden under avsnittet om variabler:
// Ingen fokuslinje stage.stageFocusRect = false;
Okej det är klart! Låt oss lägga till Info-fönster. Lägg till 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););
Så här ser vår createMarker () -funktion ut:
funktion createMarker (latlng: LatLng, nummer: Number, tip, myTitle, myContent): Marker // skapa Anpassat markörobjekt var markerPin: marker_mc = new marker_mc (); // Om din markör är för stor kan du skala ner den här markörenPin.width = 20; markörPin.höjd = 20; var jag: Marker = ny Markör (latlng, ny MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), verktygstips: "" + tips)); i.addEventListener (MapMouseEvent.CLICK, funktion (händelse: MapMouseEvent): void map.openInfoWindow (event.latLng, nya InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);); returnera jag;
Testa din film och du kommer nu också ha informationsfönster.
Jo det är det! Grattis, du skapade bara en Google Map Med 3D-navigering och Anpassade markörer! Mycket bra jobb! Låt oss ha en
sista titt på vår kod:
importera com.google.maps.LatLng; importera com.google.mapsMap; importera com.google.maps.Map3D; importera com.google.maps.MapEvent; importera com.google.maps.MapType; importera com.google.maps.View; importera com.google.maps.geom.Attitude; importera com.google.maps.controls.NavigationControl; importera com.google.maps.controls.MapTypeControl; importera com.google.maps.controls.OverviewMapControl; importera com.google.maps.overlays. *; importera com.google.maps.InfoWindowOptions; importera com.google.maps.MapMouseEvent; // Variabler var karta: Map3D; // Ingen fokuslinje stage.stageFocusRect = false; // Ring funktionen för att skapa kartan add_map (); // Funktion som lägger till kartan på scenfunktionen add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (karta); // Funktion som kommer att elda en gångs karta skapas funktion onMapReady (händelse: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny inställning (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nya NavigationControl ()); // Ladda xml load_xml (); // Lägg till markörer på kartfunktionen createMarker (latlng: LatLng, nummer: Nummer, tips, myTitle, myContent): Marker // skapa Custom marker object var markerPin: marker_mc = new marker_mc (); // Om din markör är för stor kan du skala ner den här markörenPin.width = 20; markörPin.höjd = 20; var jag: Marker = ny Markör (latlng, ny MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), verktygstips: "" + tips)); i.addEventListener (MapMouseEvent.CLICK, funktion (händelse: MapMouseEvent): void map.openInfoWindow (event.latLng, nya InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);); returnera jag; // Funktion som laddar xml-funktionen 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Du kan använda denna karta 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!
