Implement et kart ved hjelp av Google Map API for Flash
Del
Del
5
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert i mai 2009.
I denne opplæringen vil vi se hvordan vi kan lage et kart i Flash bruker Google Map API. Vi vil dekke noen av de grunnleggende som å zoome inn på kartet og legge noen kontroller. Vi vil også se på hvordan vi kan legge til markører i våre kart og hvordan vi kan laste inn data ved hjelp av en XML-fil
Trinn 1:. The Google Map API Key
Før vi kan begynne å lage våre kart i Flash vi trenger å sette opp et par ting. For å bruke Google Map API trenger du en personlig API-nøkkel. For å få dette gå til http://code.google.com/intl/nl/apis/maps/documentation/flash/og klikk på linken til høyre på siden "Registrer deg for en Google Maps API Key".
Trinn 2: Påmelding
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 3:.! 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 4:. Google Kart SWC Component
Ok, nå har vi vår API Key men vi trenger fortsatt en ting før vi kan begynne å lage våre kart i Flash. Vi trenger å laste ned Google Map SWC komponent. For å gjøre dette, gå til http://code.google.com/intl/nl/apis/maps/documentation/flash/og klikk "Last ned Google Maps API for Flash SDK". En popup-vinduet vises, velger å lagre "sdk.zip" filen og laste den ned
Trinn 5:. Installer SDK Component
Nå må vi installere SDK komponent å bruke den i Flash. For å gjøre dette, navigerer du til det stedet der du lagret Google Maps API for Flash SDK og finne den ikke-Flex versjon av grensesnittet biblioteket. I mitt tilfelle er dette (lib /map_1_9.swc). . Nå kopiere "map_1_9.swc" file
Trinn 6: Mapper
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 /Applications /Adobe Flash CS3 (eller din Flash-versjon) /konfigurasjon /Components
Inni denne mappen oppretter en ny mappe som heter "google" og lim den "map_1_9.swc" fil inni den. Flash er nå satt opp for å støtte Google Maps API for Flash
Trinn 7:. New Actionscript 3.0 File
Ok. Det er alt gjort og støvet! Nå kan vi endelig begynne å lage våre kart i Flash. Begynn Flash CS3 eller CS4 og opprette en ny Actionscript 3.0-fil, standard scenen størrelse (550 x 400)
Trinn 8:.! Spar Det
Nå bare lagre filen; trykke "Ctrl + S" eller gå til 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 og dra GoogleMapsLibrary på scenen
Trinn 10:. Handlingene Layer
Lag et nytt lag, dobbeltklikker du på navnet og endre navnet til "handlinger "
Trinn 11:. Import ..
Nå med handlinger laget valgt åpne handlinger panelet ved å trykke" F9 "eller klikke Vindu > Handlinger. Legg disse linjene med kode:
import com.google.maps.LatLng, import com.google.maps.Map, import com.google.maps.MapEvent, import com.google.maps.MapType;
Trinn 12: Lag Kart
Nå la oss legge til kartet! Når vi laster filmen dette stykke koden vil lage et kart og sette den på scenen. Inne i koden vi se variabelen "map.key"; her må vi legge vår personlige API-nøkkel. Åpne filen der du lagret API-nøkkel og kopiere /lime det inn i variabelen
//Opprett The Mapvar kartet. Kart = new Map (); map.key = "Din API-nøkkel her"; map.setSize ( ny Point (stage.stageWidth, stage.stageHeight)); this.addChild (kart);
Trinn 13: Test Movie
Ok, nå gå og teste filmen "Ctrl + Enter" eller klikk Control > Test Movie i menyen og du vil se at du nettopp har opprettet et kart
Trinn 14:. Controls
På dette stadiet kan vi bare dra kartet rundt. Det er egentlig ikke hva vi leter etter, så la oss legge til noen kontroller til kartet som vil tillate oss å zoome og flytte om. For å legge til kontroller for å våre kart vi må oppdatere vår kode. Først må vi ringe noen ekstra klasser:
import com.google.maps.controls.ZoomControl, import com.google.maps.controls.PositionControl, import com.google.maps.controls.MapTypeControl;
Etter som vi trenger for å lage en ny funksjon for å ringe når kartet er opprettet. Vi nevne at funksjonen "onMapReady ()". Inne i denne funksjonen vi legger våre kontroller til kartet
funksjon onMapReady (event: MapEvent):. Void {map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ());}
Nå trenger vi bare å ringe "onMapReady ()" -funksjonen når kartet vårt er lastet. . For å gjøre det må vi legge til en ekstra linje til vår første del av koden
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Våre full koden ser nå slik ut:
import com.google. maps.LatLng; import com.google.maps.Map, importere 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; //Opprett The Mapvar kartet: Kart = new Map (); map.key = "Din API Key Here", map.setSize (ny Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void {map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ());}
Trinn 15: Mer ..
Nå teste filmen "Ctrl + Enter" eller klikk Control > Test Movie i menyen og du vil se kartet vårt nå har kontroller. Vi er i stand til å zoome inn og selv endre vårt kart for å Satellitt, Hybrid og terrengvisningen. Det er veldig kult, men vi ønsker mer ..
Trinn 16: lengde- og breddegrad
La oss zoome inn et bestemt sted når våre kart laster for første gang. Si jeg er en surfer, og jeg ønsker å lage et kart over surfe flekker i min hjemby. Vi ønsker ikke folk å manuelt måtte zoome inn og søke for området, så vi skal fikse det i et sekund. Det eneste vi må legge til er en liten kodelinje til vår "onMapReady ()" -funksjonen
map.setCenter (ny LatLng (28,74659, -13,93447), 9, MapType.HYBRID_MAP_TYPE);.
Hva vi faktisk gjør her er å lage en ny LatLng punkt på kartet. Først vi spesifisere 2 verdier: den "breddegrad" og "lengdegrad" fra vår region. Deretter setter vi vår zoom verdi; Jeg har valgt å bruke 9. zoomområdene fra 0 til ca 16 (dette kan variere fra region til region). Til slutt setter vi kartet type; Jeg har valgt her for HYBRID_MAP_TYPE
Vår "onMapReady ()" -funksjonen ser nå slik ut:.
Funksjon onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (28,74659, -13,93447) , 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ());}
Hvis vi teste vår film du kan se at mange ting har endret seg. Når kartet er lastet vi zoome inn vår bestemt region og vår karttype er nå Hybrid. For å bestemme lengde- og breddegrad for din region kan du bruke Google Earth eller et nettbasert verktøy som http://itouchmap.com/latlong.html
Trinn 17:. Legg en markør
< p> La oss nå legge en enkel markør til kartet vårt. Bare legg 2 flere klasser:
import com.google.maps.overlays.MarkerOptions, import com.google.maps.overlays.Marker;
og oppdatere "onMapReady ()" funksjon med denne delen av koden:
Var markør: Marker = new Marker (ny LatLng (28,74659, -13,93447)); map.addOverlay (markør);
Igjen skaper vi en LatLng punkt med noen spesifikke breddegrad /lengdegrader for vårt sted. Så vi kaller "addOverlay ()" for å sette markør vår på kartet. Våre full koden ser nå slik ut:
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, import com.google.maps.overlays.MarkerOptions, import com.google.maps.overlays. Marker; //Opprett The Mapvar kartet: Kart = new Map (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw";map.setSize(new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (28,74659, - 13,93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ()); Var markør: Marker = new Marker (ny LatLng (28,74659, -13,93447)); map.addOverlay (markør);}
Gå og teste filmen. Du vil se markør vår på kartet
Trinn 18:. Still More ..
La oss nå ta alt til neste nivå. Vi har et kart med zoom-kontroller og en markør. Hva mer trenger vi? Vel skal jeg fortelle deg. Vi trenger flere markører, verktøytips, INFO WINDOWS og vi ønsker å laste alt fra en XML-fil. Så la oss komme i gang. Først vil vi lage vår XML-fil. Åpne din favoritt XML editor og lage denne filen:?
≪ xml version = "1.0" encoding = "utf-8" >? < map_xml > < plassering > < lat > 28,74659 < /lat > < lon > -13,93447 < /lon > < name_tip > Majanicho < /name_tip > < title_tip > <! [CDATA [Majanicho]] > < /title_tip > < content_tip > <! [CDATA [Majanicho er en veldig god surf spot for longboarding det gir svært lange ritt].] > < /content_tip > < /plassering > < plassering > < lat > 28.738764 < /lat > < lon > -13,955126 < /lon > < name_tip > Derecha de los Alemanes < /name_tip > < title_tip > <! [CDATA [La Derecha de los Alemanes]] > < /title_tip > < content_tip > <! [CDATA [La Derecha de los Alemanes er en annen veldig god plass for longboarders men shortboarders vil ha noen episke dager her ute til].] > < /content_tip > < /plassering > < plassering > < lat > 28.741022 < /lat > < lon > -13,951821 < /lon > < name_tip > The Bubbel < /name_tip > < title_tip > <! [CDATA [The Bubbel aka La Derecha]] > < /title_tip > < content_tip > <! [CDATA [The Bubbel er en av de mest famouse bølger i Fuerteventura dens en veldig hul rev pause, og det har noen episke fat på tilbud].] > < /content_tip > < /plassering > < /map_xml >
Trinn 19: onMapReady ()
Når kartet vårt er lastet vi trenger å trekke XML-data inn i vårt Flash-fil. Opprett en ny funksjon som heter "xmlLoader ()", og vi vil kalle den funksjonen på "onMapReady ()" -funksjon. Først må vi slette koden vi lagt for å skape markør vår bare noen få skritt før. Deretter vil vi legge linjen til kaller "xmlLoader ()" -funksjon. Vår "onMapReady ()" funksjonen skal nå se slik ut:
funksjonen onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (28,74659, -13,93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ()); xmlLoader ();..}
Det neste vi ønsker å skape "xmlLoader ()" -funksjonen
funksjon xmlLoader () {}
I neste trinn vil vi fylle den opp
Trinn 20: Load XML
Ok her er vi. La oss legge våre XML-data. Inne i "xmlLoader ()" funksjonen vi legge til denne koden:
funksjon LoadXML (e: Hendelses): void {XML.ignoreWhitespace = true; Var map_xml: XML = new XML (e.target.data); } //End of LoadXML funksjon Var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, LoadXML); xmlLoader.load (ny URLRequest ("xml.xml"));
Dette vil få oss våre XML-data til å arbeide med
Trinn 21:. 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. stedet [i] .title_tip); } //Slutt for loop
For å teste om ting fungerer for oss vil vi spore "title_tip" variable. Test filmen, og du bør få følgende resultat:
Trinn 22: 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;
Hvis du vil kan du slette "trace ()" linjen vi brukte før. Vår For sløyfe nå ser slik ut:
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; } //Slutt for sløyfe
Trinn 23: Andre Markers ..
Ok! Vi må legge til en markør på kartet for hver av våre tre steder. Nå som vi har alle data som er lagret i våre variabler må vi lage en ny funksjon som heter "createMarker ()". Inne vår "LoadXML ()" funksjonen vi legger denne nye funksjonen:
//Legg markører på Mapfunction createMarker (latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: true, tooltip: "" + tips})); tilbake jeg;} //end funksjon createMarker
Vi trenger fortsatt å kalle dette "createMarker ()" funksjon for å se våre markører på kartet. For å gjøre det må vi legge til en ekstra linje med kode på slutten av vår For sløyfe:
map.addOverlay (createMarker (latlng, i, tips, myTitle, myContent));
Dette er hva vår "LoadXML () "-funksjonen skal se slik ut nå:
funksjon 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)); } //Slutt for loop //Legg markører på kartet funksjon createMarker (latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: sant, tooltip: "" + tips})); tilbake i; } //End funksjon createMarker} //slutt LoadXML funksjon
Test filmen, og du vil se markørene på kartet! Vær oppmerksom på at våre 3 poeng er svært nær hverandre, så det kan være lurt å zoome inn litt for å se dem mer tydelig
Trinn 24:. Info Windows
Til slutt må vi legge til litt info Windows. Hvis vi klikker på markørene vi vil da få informasjon om sine plasseringer. For å gjøre dette må vi legge 2 flere klasser:
import com.google.maps.InfoWindowOptions, importere com.google.maps.MapMouseEvent;
.. litt mer kode til vår "createMarker ()" -funksjon. .
i.addEventListener (MapMouseEvent.CLICK, funksjon (hendelse: MapMouseEvent): void {map.openInfoWindow (event.latLng, nye InfoWindowOptions ({titleHTML: "" + myTitle, contentHTML: "" + myContent})); });.
Nå teste filmen, og du vil se at våre markører er nå klikkbare, og at de skaper et informasjonsvindu med tekst fra XML-filen
Konklusjon
Thats it! Ta en titt på vår endelige koden:
importere 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, import com.google.maps.overlays.MarkerOptions, import com.google.maps.overlays. Marker, import com.google.maps.InfoWindowOptions, importere com.google.maps.MapMouseEvent; //Opprett The Mapvar kartet: Kart = new Map (); map.key = "Din API Key Here", map.setSize (nytt Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void {map.setCenter (ny LatLng (28,74659, - 13,93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny Zoomcontrol ()); map.addControl (ny PositionControl ()); map.addControl (ny MapTypeControl ()); xmlLoader ();} funksjon xmlLoader () {funksjon 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)); } //Slutt for loop //Legg markører på kartet funksjon createMarker (latlng: LatLng, antall: Antall, tips, myTitle, myContent): Marker {var i: Marker = new Marker (latlng, nye MarkerOptions ({hasShadow: sant, tooltip: "" + tips})); i.addEventListener (MapMouseEvent.CLICK, funksjon (hendelse: MapMouseEvent): void {map.openInfoWindow (event.latLng, nye InfoWindowOptions ({titleHTML: "" + myTitle, contentHTML: "" + myContent}));}); tilbake i; } //End funksjon createMarker} //slutt LoadXML funksjon Var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, LoadXML); xmlLoader.load (ny URLRequest ("xml.xml"));}
Test din film Ctrl + Enter for å sjekke resultatet. Du vil ha din egen xml basert Flash kartet! Du kan bruke den 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!