Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i mai 2009.
I denne opplæringen ser vi hvordan vi kan lage et kart i Flash ved hjelp av Google Map API. Vi vil dekke noen av grunnleggende, for eksempel å zoome inn på kartet og legge til noen kontroller. Vi vil også se på hvordan vi kan legge til markører på kartet vårt og hvordan vi kan laste inn data ved hjelp av en XML-fil.
Før vi kan begynne å lage vårt kart i Flash må vi sette opp noen ting. For å bruke Google Map API må du ha en personlig API-nøkkel. For å få dette, gå til http://code.google.com/intl/no/apis/maps/documentation/flash/ og klikk på linken til høyre på siden "Registrer deg for en Google Maps API-nøkkel".
Ved å klikke på koblingen "Registrer deg for en Google Maps API-nøkkel" kommer vi til neste side der vi kan generere vår personlige API-nøkkel. Rull ned på siden, godkjenn vilkårene (du kan lese disse også hvis du er veldig interessert) og legg til webadressen til nettstedet der du vil bruke programmet (du trenger en annen API-nøkkel for hvert domene hvor du vil plassere et kart). Deretter klikker du på "Generer API-nøkkel".
Nå ser du din personlige API-nøkkel for det valgte domenet. Kopier API-nøkkelen og lim inn eller lagre den et sted som vi trenger det veldig snart.
Ok, nå har vi vår API-nøkkel, men vi trenger fortsatt en ting før vi kan begynne å lage vårt kart i Flash. Vi må laste ned Google Map SWC-komponenten. For å gjøre det, gå til http://code.google.com/intl/no/apis/maps/documentation/flash/ og klikk på "Last ned Google Maps API for Flash SDK". Et popup-vindu vil vises, velg å lagre filen "sdk.zip" og last den ned.
Nå må vi installere SDK-komponenten for å bruke den i Flash. For å gjøre det, naviger til stedet der du lagret Google Maps API for Flash SDK, og finn ikke-Flex-versjonen av grensesnittbiblioteket. I mitt tilfelle er dette (lib / map_1_9.swc). Kopier nå "map_1_9.swc" -filen.
Etterpå, hvis du har Flash for øyeblikket åpen, avslutter du søknaden og søker etter denne mappen:
Inne i den mappen opprett en ny mappe kalt "google" og lim inn "map_1_9.swc" -filen inne i den. Flash er nå konfigurert for å støtte Google Maps API for Flash.
Ok. Det er alt gjort og støvet! Nå kan vi endelig begynne å lage vårt kart i Flash. Start Flash CS3 eller CS4 og opprett en ny ActionScript 3.0-fil, standard scenestørrelse (550 x 400).
Nå lagrer du bare filen; trykk "Ctrl + S" eller gå til Arkiv> Lagre i menyen. Lagre det til ønsket sted og gi det navnet du vil. Jeg skal nevne det "google_map".
Åpne komponentpanelet "Ctrl + F7" eller klikk på Window> Components i menyen, og dra GoogleMapsLibrary til scenen..
Opprett et nytt lag, dobbeltklikk på navnet og endre det til "handlinger".
Nå med handlingslaget valgt, åpne handlingspanelet ved å trykke "F9" eller klikke på Vindu> Handlinger. Legg til disse kodelinjene:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.MapEvent; importer com.google.maps.MapType;
La oss nå legge til kartet! Når vi laster opp filmen, vil dette stykket kode skape et kart og sette det på scenen. Inne i koden ser vi variabelen "map.key"; her må vi legge til vår personlige API-nøkkel. Åpne filen der du lagret API-nøkkelen og Kopier / Lim inn den i variabelen.
// Opprett kart var kart: Kart = Ny Kart (); map.key = "API-nøkkelen din her"; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); this.addChild (kart);
Ok, nå gå og test filmen "Ctrl + Enter" eller klikk på Control> Test Movie i menyen, og du vil se at du nettopp har opprettet et kart.
På dette stadiet kan vi bare dra kartet rundt. Det er egentlig ikke det vi leter etter, så la oss legge til noen kontroller på kartet som vil tillate oss å zoome og flytte om. For å legge til kontroller på kartet må vi oppdatere koden vår. Først må vi ringe noen ekstra klasser:
importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; importer com.google.maps.controls.MapTypeControl;
Deretter må vi opprette en ny funksjon for å ringe når kartet er opprettet. Vi nevner den funksjonen "onMapReady ()". Innenfor denne funksjonen legger vi til kontrollene våre på kartet.
funksjon onMapReady (event: MapEvent): void map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ());
Nå trenger vi bare å ringe funksjonen "onMapReady ()" når kartet vårt er lastet inn. For å gjøre det må vi legge til en ekstra linje til vårt første stykke kode.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Vår fulle kode ser nå slik ut:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; importer com.google.maps.controls.MapTypeControl; // Opprett kart var kart: Kart = Ny Kart (); map.key = "Din API-nøkkel her"; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ());
Test nå filmen "Ctrl + Enter" eller klikk på Control> Test Movie i menyen, og du vil se at kartet vårt nå har kontroller. Vi kan zoome inn og til og med bytte kart til satellitt-, hybrid- og terrengvisning. Det er veldig kult, men vi vil ha mer?
La oss zoome inn i et bestemt sted når kartet vårt lastes for første gang. Si at jeg er surfer, og jeg vil lage et kart over surfeplassene i hjembyen min. Vi vil ikke at folk skal manuelt må zoome inn og søke etter området, så vi vil fikse det om noen sekunder. Det eneste vi må legge til er en liten linje med kode til vår "onMapReady ()" -funksjon.
map.setCenter (nytt LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Det vi faktisk gjør her er å lage et nytt LatLng-punkt på kartet. Først angir vi 2 verdier: "breddegrad" og "lengdegrad" fra vår region. Da setter vi vår zoomverdi; Jeg valgte å bruke 9. Zoomen varierer fra 0 til 16 (dette kan variere fra region til region). Til slutt satt vi karttypen; Jeg valgte her for HYBRID_MAP_TYPE.
Vår funksjon "onMapReady ()" ser nå slik ut:
funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ());
Hvis vi tester vår film kan du se at mange ting har endret seg. Når kartet er lastet zoomer vi inn i vår spesifikke region og vår karttype er nå Hybrid. For å bestemme breddegrad og lengdegrad for regionen din kan du bruke Google Earth eller et elektronisk verktøy som http://itouchmap.com/latlong.html.
La oss nå legge til en enkel markør på kartet vårt. Bare legg til 2 flere klasser:
importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker;
og oppdater "onMapReady ()" -funksjonen med dette koden:
var markør: Marker = ny Marker (ny LatLng (28.74659, -13.93447)); map.addOverlay (markør);
Igjen skaper vi et LatLng-punkt med noen spesifikke breddegrad / lengdeverdier for vår plassering. Da kaller vi "addOverlay ()" for å sette vår markør på kartet. Vår fulle kode ser nå slik ut:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; importer com.google.maps.controls.MapTypeControl; importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker; // Opprett kart var kart: Kart = Ny Kart (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ()); var markør: Marker = ny Marker (ny LatLng (28.74659, -13.93447)); map.addOverlay (markør);
Gå og test filmen din. Du ser vår markør på kartet.
La oss nå ta alt til neste nivå. Vi har et kart med zoom kontroller og en markør. Hva mer trenger vi? Vel, jeg forteller deg det. Vi trenger flere markører, verktøy, INFO-vinduer og vi vil laste alt fra en XML-fil. Så la oss komme i gang. Først oppretter vi vår XML-fil. Åpne ditt favoritt XML-editor og opprett denne filen:
28,74659 -13,93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 The Bubbel
Når kartet er lastet, må vi trekke XML-dataene inn i vår Flash-fil. Opprett en ny funksjon kalt "xmlLoader ()" og vi kaller den funksjonen i funksjonen "onMapReady ()". Først må vi slette koden vi la til for å lage vår markør bare noen få skritt før. Da legger vi til linjen for å ringe funksjonen "xmlLoader ()". Vår funksjon "onMapReady ()" skal nå se slik ut:
funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ()); xmlLoader ();
Neste vil vi lage "xmlLoader ()" -funksjonen.
funksjon xmlLoader ()
I neste trinn fyller vi opp det.
Ok her er vi. La oss laste inn XML-dataene våre. Innenfor "xmlLoader ()" -funksjonen legger vi til denne koden:
Accentsconagua
funksjon loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); // slutten av loadXML-funksjonen var xmlLoader: URLLoader = ny URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (ny URLRequest ("xml.xml")); Dette vil gi oss våre XML-data for å jobbe med.
Siden vi har 3 steder i XML-filen, må vi opprette en "For" -sløyfe og lagre alle dataene i enkelte Arrays. I vår "loadXML ()" -funksjon legger vi til dette stykket kode for å lage For-sløyfen:
for (var jeg: tall = 0; jeg < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
For å teste om ting virker for oss, vil vi spore varianten "title_tip". Test filmen, og du bør få følgende utgang:
Deretter må vi lage noen variabler for å lagre våre data lastet fra XML-filen. I vår For-løype legger vi til disse variablene:
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 mitt innhold: String = map_xml.location [i] .content_tip;
Hvis du vil at du kan slette "trace ()" -linjen vi brukte før. Vår For-løkke ser nå ut som dette:
for (var jeg: tall = 0; jeg < 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å legge til en markør på kartet for hver av våre tre steder. Nå som vi har alle dataene lagret i våre variabler, må vi opprette en ny funksjon kalt "createMarker ()". I vår "loadXML ()" -funksjon legger vi til denne nye funksjonen:
// Legg til markører på kartfunksjonen createMarker (latlng: LatLng, nummer: Nummer, tips, myTitle, myContent): Marker var jeg: Marker = ny Marker (latlng, ny MarkerOptions (hasShadow: true, tooltip: Tips ) ); returner jeg; // sluttfunksjon createMarker
Vi trenger fortsatt å ringe denne "createMarker ()" -funksjonen 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-løkke:
map.addOverlay (createMarker (latlng, jeg, tips, myTitle, myContent));
Dette er hva vår "loadXML ()" -funksjon skal se ut som nå:
funksjon loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); for (var jeg: tall = 0; jeg < 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
Test filmen din, og du vil se markørene på kartet! Vær oppmerksom på at våre 3 poeng er svært nær hverandre, slik at du kanskje vil zoome inn litt for å se dem tydeligere.
Til slutt må vi legge til litt Info Windows. Hvis vi klikker på markørene, får vi litt informasjon om deres plasseringer. For å gjøre det må vi legge til 2 flere klasser:
importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent;
? litt mer kode til vår "createMarker ()" -funksjon?
i.addEventListener (MapMouseEvent.CLICK, funksjon (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nye InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);;
Test nå filmen, og du vil se at markørene våre nå er klikkbare, og at de lager et informasjonsvindu med tekst fra XML-filen.
Det er det! Ta en titt på vår endelige kode:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; importer com.google.maps.controls.MapTypeControl; importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent; // Opprett kart var kart: Kart = Ny Kart (); map.key = "Din API-nøkkel her"; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (ny ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (ny MapTypeControl ()); xmlLoader (); funksjon xmlLoader () funksjon loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); for (var jeg: tall = 0; jeg < 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")); Test filmen Ctrl + Enter for å sjekke utfallet. Du har ditt eget xml-basert Flash-kort! Du kan bruke den på nettstedet ditt, redigere plasseringene som du vil, det er opp til deg. Gå videre og eksperiment, hvis du har noen kule resultater, vær sikker på å dele dem med oss.
Jeg håper du likte denne opplæringen, takk for å lese!
