Share
Etter en så positiv respons på min første opplæring, implementer en kart ved hjelp av Google Map API for Flash bestemte jeg meg for å skrive et sekund. Siden den første tuten har Google Map API blitt oppdatert, slik at utviklere (blant annet) kan legge til 3D-visning på kart. Dette er en flott funksjon, og under denne opplæringen vil jeg forklare hvordan du bruker den.
Også, mange mennesker ba om en forklaring for å legge til egendefinerte markører; Det er den andre tingen vi diskuterer her i dag.
Jeg vil ikke bygge videre på vårt forrige kart fordi vi må laste ned den nye Google Map-komponenten. Det er ingen måte å bruke komponenten fra min tidligere opplæring som den ikke støtter 3D-funksjonene. Så ... gå til http://code.google.com/intl/no/apis/maps/documentation/flash/
Vi må installere SDK-komponenten for å bruke den i Flash. For å gjøre det, naviger til stedet der du lagret SDK-komponenten for Google Maps, og finn ikke-Flex-versjonen av grensesnittbiblioteket. I mitt tilfelle er dette (lib / map_1_18.swc). Kopier nå "map_1_18.swc" -filen.
Etterpå, hvis du har Flash for øyeblikket åpen, avslutter du søknaden og søker etter denne mappen:
Inne i denne mappen opprett en ny mappe kalt "google" og lim inn "map_1_18.swc" -filen inne i den. Flash er nå konfigurert til
støtte Google Maps API for Flash.
Ok, vi har komponenten nå, men før vi kan komme på jobb trenger vi fortsatt en Google Map API-nøkkel for å få kartet vårt til å fungere på nettet. En Google Map API-nøkkel er gratis, og du kan få en her:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, det kjedelige arbeidet er gjort, nå kan vi begynne med de morsomme tingene! La oss dykke inn i Flash og opprette en ny ActionScript 3.0-fil, standard scenestørrelse (550 x 400).
Jeg foretrekker å begynne med å lagre filen. Mens jeg jobber, liker jeg virkelig å treffe "Ctrl + S" hele tiden, så fortsett å treffe
"Ctrl + S" eller klikk "File> Save" i menyen. Lagre det til ønsket sted og gi det navnet du vil. Jeg skal nevne det
"Google Kart".
Åpne komponentpanelet "Ctrl + F7" eller klikk på Window> Components i menyen. Dra GoogleMapsLibrary til biblioteket ditt.
For å holde orden, liker jeg å gi nytt navn til det første laget til "handlinger".
Med aksjonslaget valgt, åpne handlingspanelet (trykk "F9" eller klikk "Vindu> Handlinger") og legg til disse kodelinjene:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude;
Nå lager vi vår første funksjon. Først vil vi erklære vår Kartvariabel:
// Variabler var kart: Map3D;
Nå kan vi legge til vår funksjon som vi vil ringe for å legge til hovedkartet på scenen:
// Funksjon som legger til kartet på scenefunksjonen add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart);
OK, som du ser, har vi lagt til en hendelsesliste som vil brenne når kartet er lastet, så lar vi også opprette den funksjonen:
// Funksjon som brann en gang kart er opprettet funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (ny holdning (20,30,0));
Her har vi satt kartet til senter. Denne funksjonen har 3 verdier, og vil definere stedet der kartet skal åpnes. De
verdiene er som denne "map.setCenter (new LatLng (breddegrad, lengdegrad), zoom); ". Da definerer vi visningsmodus;
Når vi bruker det nye 3D-kartet, vil jeg bruke Perspektiv-visningen. Hvis du liker en vanlig kartvisning, kan du endre denne verdien til
"View.VIEWMODE_2D".
Så setter vi holdning. Dette vil definere hvordan vi ser kartet. I dette tilfellet vil vi legge til et lite perspektivvinkel til det og
Vri kartet litt for å skape en finere synsvinkel. Du kan leke med disse verdiene litt og se hva du liker best.
OK, det er på tide for en første sjekk! Hva har vi så langt? Vel, ingenting enda! Vi må først ringe vår funksjon for å skape
kart! La oss legge til denne linjen med kode like under våre variabler:
// Variabler var kart: Map3D; // Ring funksjonen for å lage kartet add_map ();
Der går vi! Test nå filmen "Ctrl + Enter", eller klikk på Kontroll> Test film i menyen ...
Ja! Vi har et kart zoomet inn på Brussels Airport! Er det ikke så bra ?! 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 kartet, zoome inn og ut på kartet. La oss starte med disse navigasjonsverktøyene først!
Først og fremst la oss importere 3 ekstra klasser; legg til disse linjene under den andre importkoden i vårt skript:
importer com.google.maps.controls.NavigationControl; importer com.google.maps.controls.MapTypeControl; importer com.google.maps.controls.OverviewMapControl;
Nei, gå til funksjonen onMapReady () og legg til disse 3 kodelinjene under de andre linjene:
map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (new NavigationControl ());
Her legger vi til karttyper, så nå kan vi endre karttyper. Deretter legger vi til en kartoversiktskontroll til høyre bunnen av kartet vårt. Og vi legger til kartnavigasjonsverktøyene. Dette er vår full kildekode som den burde se akkurat nå:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude; importer com.google.maps.controls.NavigationControl; importer com.google.maps.controls.MapTypeControl; importer com.google.maps.controls.OverviewMapControl; // Variabler var kart: Map3D; // Ring funksjonen for å lage kartet add_map (); // Funksjon som legger til kartet på scenefunksjonen add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); // Funksjon som brann en gang kart, er opprettet funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny holdning (20,40,0)); map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (new NavigationControl ());
Gå videre og test filmen på nytt. Du kan se at du kan flytte rundt på kartet veldig enkelt nå med disse funky ser nye
kontroller!
Jeg synes det er på tide å gå videre til markørdelen; et kart uten markører er som en bar uten øl er det ikke? Ingen dumme ting denne gangen! La oss flytte til egendefinerte markører med en gang!
Vi vil plassere våre egendefinerte markører på kartet med informasjon som vil bli lagret i en ekstern XML-fil. La oss begynne med å lage en egendefinert markør, og vi lager XML-filen, og deretter laster vi den inn i Flash.
Jeg er ikke mye av en designer, så jeg tror du kan lage en mye kjøligere markør enn jeg har! Det er derfor jeg skal ikke bruke for mye tid på dette. Bare tegn noen sirkler, sett dem på toppen av hverandre, velg alt, trykk F8, velg movieClip, merk det "marker_mc" og velg Eksporter for handlingskript. Hit "OK".
Som jeg nevnte tidligere, håper jeg at du vil opprette en kjøligere og bedre utseende markør enn dette! Bare tegne din egen markør og
skjule det til en bevegelseslip som forklart ovenfor.
Når du har opprettet filmklippet, vises det i biblioteket ditt. Du kan da slette den fra scenen som vi vil importere den med
ActionScript (derfor måtte du velge alternativet "Eksporter for ActionScript"). I vårt bibliotek har vi nå 2 elementer; de
GoogleMapsLibrary og vår markør_mc.
OK, her er vi. Vi har et kart og (i ditt tilfelle) en veldig fin markør! La oss nå lage XML-filen. Åpne favorittkodeditoren din, lag denne filen og lagre den som locations.xml.
50,899197766773284 4,486040573103489 Brussel 49,004024443647324 2,571113562006575 Paris 51,4699229971675 -,45367874251784013 London
Vi må få XML-dataene i vår flash-film. For å gjøre dette må vi opprette en ny funksjon som laster opp xml. Legg til
dette stykke kode til bunnen av skriptet. I vår funksjon onMapReady () kaller vi denne nye load_xml () -funksjonen. Når kartet er klart vil vi begynne å laste inn XML.
Accentsconagua
// Funksjon som vil laste xml-funksjonen loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = ny XML (e.target.data); funksjon load_xml () var xmlLoader: URLLoader = ny URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (ny URLRequest ("locations.xml")); Siden vi har 3 steder i XML-filen, må vi opprette en "For" -sløyfe og lagre alle dataene i enkelte Arrays. Inne i vår
loadXML () -funksjonen 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);
Hvis vi tester vår film nå, kan vi se våre filmproduksjoner xml-dataene. La oss nå jobbe med det.
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;
Du kan slette "trace ()" -linjen vi brukte før vi vet at ting fungerer.
Nå som vi har alle våre XML-data lagret i variabler, kan vi komme over for å laste våre markører på kartet. Først legger vi til noen ekstra klasser i koden vår. Legg til dette stykket kode under de andre klassene:
importer com.google.maps.overlays. *; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent;
Opprett en ny funksjon kalt createMarker (). Vi vil legge til denne funksjonen like før vår loadXML () -funksjon.
// 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;
Vi kan ringe funksjonen createMarker () for hver markør vi må legge til på kartet, så i vår For Loop legger vi til denne linjen med kode:
map.addOverlay (createMarker (latlng, jeg, tips, myTitle, myContent));
Hvis du tester filmen nå, kan du se at vi har markører på kartet vårt på de stedene vi angav i vår xml-fil! Det er flott, men vi opprettet ikke den store egendefinerte markøren for ingenting gjorde vi? Vi fjerner disse standardmarkørene og legger til våre egendefinerte markører.
Først må vi opprette vårt egendefinerte markørobjekt. Legg til denne koden i createMarker () -funksjonen, over resten av koden:
// lage Tilpasset markørobjekt var markørPin: markør_mc = ny markør_mc (); // Hvis markøren din er for stor, kan du skala den ned her markørenPin.width = 20; markørPin.height = 20;
Etterpå går vi til neste stykke kode der vi må legge til en linje til markørOptions. Søk etter dette stykket kode:
nye MarkerOptions (hasShadow: true, tooltip: "" + tips)
og endre den til:
nye MarkerOptions (hasShadow: true, icon: this.addChild (markørPin), verktøytips: "" + tips)
Ok! Test filmen og sjekk resultatet!
OK, hva er neste? Info-vinduene! Når vi klikker på vår markør, må vi få informasjonen vi legger til vår XML-fil. Før vi legger til informasjonsvinduene, vil jeg bare fjerne den stygge gule linjen rundt kartet, har du lagt merke til allerede? Når du fokuserer på kartet, viser den en gul linje rundt den. Jeg personlig egentlig ikke liker det, så la oss fjerne det. Bare legg til denne linjen kode under delen vår variabler:
// Ingen fokuslinje stage.stageFocusRect = false;
Ok det er gjort! La oss legge til informasjonsvinduer. Legg til litt mer kode i vår createMarker () -funksjon:
i.addEventListener (MapMouseEvent.CLICK, funksjon (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nye InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);;
Dette er hva vår createMarker () -funksjon nå ser ut som:
funksjon createMarker (latlng: LatLng, nummer: Nummer, tips, myTitle, myContent): Marker // create Tilpasset markørobjekt var markørPin: markør_mc = ny markør_mc (); // Hvis markøren din er for stor, kan du skala den ned her markørenPin.width = 20; markørPin.height = 20; var jeg: Marker = ny Marker (latlng, ny MarkerOptions (hasShadow: true, icon: this.addChild (markørPin), verktøytip: "" + tips)); i.addEventListener (MapMouseEvent.CLICK, funksjon (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nye InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);; returner jeg;
Test filmen din, og du vil nå ha info-vinduer også.
Vel det er det! Gratulerer, du har nettopp opprettet et Google Map med 3D-navigasjon og egendefinerte markører! Veldig bra jobbet! La oss få en
siste titt på vår kode:
importer com.google.maps.LatLng; importer com.google.mapsMap; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude; importer com.google.maps.controls.NavigationControl; importer com.google.maps.controls.MapTypeControl; importer com.google.maps.controls.OverviewMapControl; importer com.google.maps.overlays. *; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent; // Variabler var kart: Map3D; // Ingen fokuslinje stage.stageFocusRect = false; // Ring funksjonen for å lage kartet add_map (); // Funksjon som legger til kartet på scenefunksjonen add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nytt punkt (scene.stagewidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kart); // Funksjon som brann en gang kart, er opprettet funksjon onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (ny holdning (20,40,0)); map.addControl (ny MapTypeControl ()); map.addControl (ny OverviewMapControl ()); map.addControl (new NavigationControl ()); // Last xml load_xml (); // Legg til markører på kart-funksjonen createMarker (latlng: LatLng, nummer: tall, tips, myTitle, myContent): Marker // opprett Tilpasset markørobjekt var markørPin: marker_mc = ny markør_mc (); // Hvis markøren din er for stor, kan du skala den ned her markørenPin.width = 20; markørPin.height = 20; var jeg: Marker = ny Marker (latlng, ny MarkerOptions (hasShadow: true, icon: this.addChild (markørPin), verktøytip: "" + tips)); i.addEventListener (MapMouseEvent.CLICK, funksjon (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nye InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);; returner jeg; // Funksjon som vil laste xml-funksjonen 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Du kan bruke dette kartet 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!
