Using Google Maps 'Nye funksjoner for Flash
Del
Del
3
Del
Dette Cyber Mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Etter en slik positiv respons på min første tutorial Implementere et kart ved hjelp av Google Map API for Flash bestemte jeg meg for å skrive et sekund. Siden den første tut Google Map API er oppdatert, slik at utviklere å (blant annet) legge 3D-visning til kart. Dette er en flott funksjon og i løpet av denne opplæringen vil jeg forklare hvordan du bruker den
Også, masse folk bedt om en forklaring for å legge til egendefinerte markører.; det er andre ting vi vil diskutere her i dag
Trinn 1:. Last ned SDK Component
Jeg vil ikke bygge videre på vår forrige kartet fordi vi trenger å laste ned den nye Google Map Component. Det er ingen måte å bruke komponent fra min forrige tutorial som at man ikke støtter 3D-funksjoner. Så ... gå til http://code.google.com/intl/nl/apis/maps/documentation/flash/
Trinn 2: Installer SDK Component
Vi må installere SDK komponent for å bruke den i Flash. For å gjøre dette, navigerer du til det stedet der du lagret Google Maps SDK Component og finne den ikke-Flex versjon av grensesnittet biblioteket. I mitt tilfelle er dette (lib /map_1_18.swc). Nå kopierer "map_1_18.swc" file
Trinn 3:. Folders
Etterpå, hvis du har Flash åpen, avslutter programmet og søk etter denne mappen:
(Windows) C: \\ Program Files \\ Adobe \\ Adobe Flash CS3 (eller din Flash-versjon) \\ no (eller språket) \\ Configuration \\ Komponenter
(Mac OS X) Macintosh HD /Programmer /Adobe Flash CS3 (eller din Flash-versjon) /konfigurasjon /Components
Inni denne mappen oppretter en ny mappe som heter "google" og lim den "map_1_18.swc" fil inni den. Flash er nå satt opp for bedriften støtter Google Maps API for Flash
Trinn 4:. The Google Map API Key
Ok har vi komponenten nå, men før vi kan få til å fungere vi trenger fortsatt et Google Map API-nøkkel for å få kartet vårt arbeide på nettet. En Google Map API Key er gratis og du kan få en her.
Http://code.google.com/intl/nl/apis/maps/documentation/flash/
< h2> Trinn 5: Registrer deg
Ved å klikke på "Registrer deg for en Google Maps API Key" linken bringer oss til neste side hvor vi kan generere vår personlige API-nøkkel. Bla nedover siden, godtar vilkårene og betingelsene (du kan lese disse også hvis du virkelig er interessert) og legge inn nettadressen til nettstedet der du ønsker å bruke programmet (du vil trenge en annen API-nøkkel for hvert domene der du ønsker å plassere et kart). Etter det, klikker du på "Generer API Key"
Trinn 6:.! Spar Det
Nå vil du se dine personlige API-nøkkel for den valgte domenet. Kopier API-nøkkel og lim eller lagre det et sted som vi trenger det veldig snart
Trinn 7:. New Actionscript 3.0 File
OK, er det kjedelig arbeidet gjort, nå kan vi begynne med morsomme ting! La oss dykke inn i Flash og opprette en ny Actionscript 3.0-fil, standard scenen størrelse (550 x 400)
Trinn 8. Spar Det
Jeg foretrekker å starte med å lagre filen. Mens jeg jobber jeg virkelig liker å Hit "Ctrl + S" hele tiden, så gå videre hit
"Ctrl + S" eller klikk "Fil > Lagre" i menyen. Lagre den på det stedet du ønsker og kall den hva du vil. Jeg vil kalle det
"google_map"
Trinn 9:. Den GoogleMapsLibrary
Åpne Components panelet "Ctrl + F7" eller klikk Window > Komponenter i menyen. Dra GoogleMapsLibrary inn i biblioteket ditt
Trinn 10:. Handlingene Layer
For å holde organisert Jeg liker å endre navn på det første laget til å «handlinger»
Trinn 11:. Import
Med handlinger laget valgt åpne handlinger panelet (trykk "F9" eller klikk "Window > Handlinger") og legge disse linjene med kode:
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;
Trinn 12: Lag Kart
Nå skal vi lage vår første funksjonen. Først ønsker vi å erklære vår Kart variabel:
//Variabler Var kartet: Map3D;
Nå kan vi legge vår funksjon som vi vil kalle å legge hovedkartet på scenen:
//Funksjon som legger kartet på scenen funksjon add_map () {kart = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (ny Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); }
OK, som du kan se vi lagt til en eventlistener som vil brann når kartet vårt er lastet, så kan også lage den funksjonen:
//Funksjon som vil brann når kartet er opprettet funksjon onMapReady (event: MapEvent) : void {map.setCenter (ny LatLng (50,899197766773284, 4,486040573103489), 13); map.setAttitude (ny Attitude (20,30,0)); }
Her har vi satt kartet til sentrum. Denne funksjonen har 3 verdier og vil definere hvor kartet vil åpne. De
verdier er sånn "map.setCenter (ny LatLng ( breddegrad
, lengdegrad
), zoom
);". Da vi definerer visningsmodus,
som vi bruker den nye 3D-kartet jeg vil bruke Perspektiv visning. Hvis du liker en normal kartvisning kan du endre denne verdien for bedriften "View.VIEWMODE_2D".
Så vi satt Attitude. Dette vil definere hvordan vi vise kartet. I dette tilfellet vil vi legge til litt perspektiv utsikt til det og
snu kartet litt for å skape en bedre visning vinkel. Du kan leke seg med disse verdiene litt og se hva du liker best.
OK, er det tid for en første sjekk! Hva har vi så langt? Vel, ingenting ennå! Vi må først ringe vår funksjon for å skape kartet
! La oss legge denne linjen med kode i underkant av våre variabler:
//Variabler Var kartet: Map3D; //Kaller funksjonen for å lage kartet add_map ();
Det vi går! Nå bare teste filmen "Ctrl + Enter" eller klikk Control > Test Film i menyen ...
Trinn 13: Navigasjons Tools
Ja! Vi har et kart zoomet inn på Brussels Airport! Er ikke det flott ?! Kanskje ikke ... La oss ta en titt på hva vi har her. Vi har kartet og vi kan dra kartet rundt. Så det vi trenger neste er verktøy for å navigere rundt på kartet, zoome inn og ut på kartet. La oss starte med disse navigasjonsverktøy første
Først av alt la oss importere 3 ekstra klasser!; legge til disse linjene under andre import koden i skriptet:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
Ikke gå til onMapReady () funksjon og legge disse 3 linjer med kode under de andre linjene:
map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (ny NavigationControl ());
Her legger vi til karttypen kontroller, så nå kan vi endre karttype. Deretter legger vi et kart oversikt kontrollen til høyre nederst på kartet vårt. Og vi legger til kart navigasjonsverktøy. Dette er vår full kildekode som det skal se ut akkurat nå:
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; //Variabler Var kartet: Map3D; //Kaller funksjonen for å lage kartet add_map (); //Funksjon som legger kartet på scenen funksjon add_map () {kart = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (ny Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); } //Funksjon som vil brann når kartet er opprettet funksjon onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (50,899197766773284, 4,486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny Attitude (20,40,0)); map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (ny NavigationControl ()); }
Gå videre og teste filmen på nytt. Du kan se at du kan flytte rundt på kartet veldig lett nå med disse funky ser nye
kontroller
Trinn 14: A Bar Uten Beer
Jeg tror det er på tide å gå videre til den markører del; et kart uten markører er som en bar uten øl er det ikke? Ingen dum ting denne gangen! La oss gå til de tilpassede markører straks!
Vi ønsker å plassere våre tilpassede markører på kartet med informasjon som vil bli lagret i en ekstern XML-fil. La oss begynne med å lage en tilpasset markør, så får vi lage XML-filen, og etter at vi legger det i Flash
Trinn 15:. Lage Custom Marker
Jeg er ikke mye av en designer, så jeg tror du vil være i stand til å skape en mye kulere markør enn jeg har! Dvs hvorfor jeg ikke kommer til å bruke for mye tid på dette. Bare trekke noen sirkler, sette dem oppå hverandre, velg alt, traff F8, velg MovieClip, you name it "marker_mc" og velg Export For Actionscript. Hit "OK".
Som jeg nevnte tidligere, jeg håper du vil skape et kaldere og penere markør enn dette! Bare tegne din egen markør og Selge covert den til en moviclip som forklart ovenfor.
Når du har opprettet MovieClip det vil vises i biblioteket. Så kan du slette det fra scenen som vi vil importere den ved hjelp
Actionscript (det er derfor du måtte velge alternativet "Export For Action"). I vårt bibliotek vi nå har 2 elementer; den
GoogleMapsLibrary og vår marker_mc
Trinn 16:. XML-filen
OK, her er vi. Vi har et kart og (i ditt tilfelle) en meget god jakt marker! Nå la oss lage XML-filen. Åpne din favoritt kode editor, lage denne filen og lagre den som locations.xml
. ≪? Xml version = "1.0" encoding = "utf-8" > < map_xml > < plassering > < lat > 50,899197766773284 < /lat > < lon > 4,486040573103489 < /lon > < name_tip > Brussel < /name_tip > < title_tip > <! [CDATA [Brussels]] > < /title_tip > < content_tip > <! [CDATA [Brussels Airport].] > < /content_tip > < /plassering > < plassering > < lat > 49,004024443647324 < /lat > < lon > 2,571113562006575 < /lon > < name_tip > Paris < /name_tip > < title_tip > <! [CDATA [Paris]] > < /title_tip > < content_tip > <! [CDATA [Paris Airport].] > < /content_tip > < /plassering > < plassering > < lat > 51,4699229971675 < /lat > < lon > -0,45367874251784013 < /lon > < name_tip > London < /name_tip > < title_tip > <! [CDATA [London]] > < /title_tip > < content_tip > <! [CDATA [London Airport].] > < /content_tip > < /plassering > < /map_xml >
Trinn 17: Legge i XML
Vi trenger å få XML-data til vår flash-film. For å gjøre dette må vi lage en ny funksjon som vil trigge vår xml. Legg
denne del av koden til bunnen av skriptet. Inne vår onMapReady () -funksjonen vi kaller denne nye load_xml () -funksjonen. Når kartet vårt er klar vil vi begynne å laste xml
//Funksjon som vil laste xml-funksjonen LoadXML (e: Hendelses):. Void {XML.ignoreWhitespace = true; Var map_xml: XML = new XML (e.target.data); } Funksjon load_xml () {var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, LoadXML); xmlLoader.load (ny URLRequest ("locations.xml")); }
Trinn 18: Loop Gjennom Steder
Som vi har 3 steder i vår XML-filen må vi lage en "For" loop og lagre alle dataene i noen Arrays. Inne vår
LoadXML () -funksjonen vi legge denne kodebit å opprette For bue:
for (var i: Antall = 0; i < map_xml.location.length (); i ++) {trace (map_xml .location [i] .title_tip); }
Hvis vi teste vår film nå kan vi se vår film utganger XML-data. Nå la oss jobbe med det
Trinn 19:. Opprett Variabler
Neste vi må lage noen variabler til å lagre våre data er lastet inn fra XML-filen. Inne vår For løkke legger vi disse variablene:
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;
Du kan slette "trace ()" linjen vi brukte før vi vet ting fungerer
Trinn 20: Legge markering på. Kart
Nå som vi har alle våre xml data lagret i variabler vi kan komme over til å laste våre markører på kartet. Først vi legge til noen ekstra klasser til vår kode. Legg denne delen av koden under andre klasser:
import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
Opprett en ny funksjon kalt createMarker (). Vi ønsker å legge til denne funksjonen like før vår LoadXML () -funksjonen
//Legg markører på kartet funksjon createMarker. (Latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: true, tooltip: "" + tips})); tilbake i; }
Vi kan kalle det createMarker () -funksjonen for hver markør vi må legge til kartet, så inne i vår For Loop vi legge denne linjen med kode:
map.addOverlay (createMarker (latlng, i, tips, myTitle, myContent));
Hvis du tester filmen nå kan du se at vi har markører på kartet vårt på de steder vi angitt i vår xml fil! Det er flott, men vi skapte ikke så stor egendefinerte markør for ingenting gjorde vi? Vi vil fjerne disse standardmarkører og legge våre tilpassede markører
Trinn 21:. Legg Custom Marker
Først må vi lage vår custom markør objekt. Legg denne koden inn i createMarker () -funksjonen, over resten av koden:
//lage Custom markør objekt Var markerPin: marker_mc = new marker_mc (); //Hvis markøren er for stor kan du skalere det ned her markerPin.width = 20; markerPin.height = 20;
Etterpå skal vi gå til neste stykke kode der vi må legge til en linje til markerOptions. Let etter denne del av koden:
nye MarkerOptions ({hasShadow: true, tooltip: "" + tips})
og endre det til:
nye MarkerOptions ({hasShadow: true, ikon: this.addChild (markerPin), tooltip: "" + tips})
Ok! Test din film og sjekke resultatet
Trinn 22: Moving On
OK, hva blir det neste? Info vinduer! Når vi klikker markør vår vi trenger for å få den informasjonen vi lagt inn i vår XML file.Before vi legge informasjonsvinduene jeg ønsker bare å fjerne det stygge gule linjen rundt kartet vårt, har du lagt merke til allerede? Når du fokuserer på kartet det viser en gul linje rundt det. Jeg personlig liker virkelig ikke det, så la oss ta det ut. Bare legge denne linjen med kode under vår-variabler seksjon:
//Ingen fokus linje stage.stageFocusRect = false;
Ok dvs gjort! La oss legge Info vinduer. Tilsett litt mer kode til vår createMarker () -funksjonen:
i.addEventListener (MapMouseEvent.CLICK, funksjon (hendelse: MapMouseEvent): void {map.openInfoWindow (event.latLng, nye InfoWindowOptions ({titleHTML: "" + myTitle , contentHTML: "" + myContent}));});
Dette er hva vår createMarker () -funksjonen ser nå slik ut:
funksjon createMarker (latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {//lage Custom markør objekt Var markerPin: marker_mc = new marker_mc (); //Hvis markøren er for stor kan du skalere det ned her markerPin.width = 20; markerPin.height = 20; Var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: true, ikon: this.addChild (markerPin), tooltip: "" + tips})); i.addEventListener (MapMouseEvent.CLICK, funksjon (hendelse: MapMouseEvent): void {map.openInfoWindow (event.latLng, nye InfoWindowOptions ({titleHTML: "" + myTitle, contentHTML: "" + myContent}));}); tilbake i; }
Test filmen, og du vil nå ha informasjonsvinduer for
Trinn 23:. Komplett Kode
Vel dvs det! Gratulerer, du nettopp opprettet en Google Map Med 3D-navigasjon og Custom markører! Veldig god jobb! La oss ta en
siste titt på vår kode:
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, import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions, importere com.google.maps.MapMouseEvent; //Variablesvar kartet: Map3D; //Ingen fokus linestage.stageFocusRect = false; //Ring funksjonen til å opprette mapadd_map (); //Funksjon som legger kartet på stagefunction add_map () {kart = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (ny Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart);} //Funksjon som vil brann når kartet er createdfunction onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (50,899197766773284, 4,486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny Attitude (20,40,0)); map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (ny NavigationControl ()); //Last inn xml load_xml ();} //Legg markører på Mapfunction createMarker (latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {//lage Custom markør objekt Var markerPin: marker_mc = new marker_mc ( ); //Hvis markøren er for stor kan du skalere det ned her markerPin.width = 20; markerPin.height = 20; Var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: true, ikon: this.addChild (markerPin), tooltip: "" + tips})); i.addEventListener (MapMouseEvent.CLICK, funksjon (hendelse: MapMouseEvent): void {map.openInfoWindow (event.latLng, nye InfoWindowOptions ({titleHTML: "" + myTitle, contentHTML: "" + myContent}));}); tilbake jeg;} //Funksjon som vil laste xmlfunction LoadXML (e: Hendelses): void {XML.ignoreWhitespace = true; Var map_xml: XML = new XML (e.target.data); for (var i: Antall = 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, tips, myTitle, myContent)); }} funksjon load_xml () {var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, LoadXML); xmlLoader.load (ny URLRequest ("locations.xml"));}
Konklusjon
Du kan bruke dette kartet på nettstedet ditt, redigere steder som du vil, det er opp til deg. Gå videre og eksperiment, hvis du har noen kule resultater sørg for å dele dem med oss.
Jeg håper du likte denne opplæringen, takk for lesing!