Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în mai 2009.
În acest tutorial vom vedea cum putem crea o hartă în Flash utilizând API-ul Google Map. Vom acoperi câteva dintre elementele de bază cum ar fi mărirea imaginii pe hartă și adăugarea unor controale. Vom analiza modul în care putem adăuga marcaje pe harta noastră și cum putem încărca datele utilizând un fișier XML.
Înainte de a începe să creăm harta noastră în Flash, trebuie să setăm câteva lucruri. Pentru a utiliza API-ul Google Map, veți avea nevoie de o cheie API personală. Pentru aceasta, accesați http://code.google.com/intl/nl/apis/maps/documentation/flash/ și dați clic pe link-ul din partea dreaptă a paginii "Înscrieți-vă pentru o cheie API Google Maps".
Dacă faceți clic pe linkul "Înscrieți-vă pentru o cheie API Google Maps", ne duceți la pagina următoare unde putem genera Cheia API personală. Derulați în jos pe pagină, sunteți de acord cu termenii și condițiile (le puteți citi și dacă sunteți foarte interesat) și adăugați adresa URL a site-ului unde doriți să utilizați aplicația (veți avea nevoie de o cheie API diferită pentru fiecare domeniu unde doriți să amplasați o hartă). Apoi, faceți clic pe "Generați cheia API".
Acum veți vedea cheia API personală pentru domeniul selectat. Copiați cheia API și lipiți-o sau salvați-o undeva, deoarece vom avea nevoie foarte curând.
Ok, acum avem Cheia API, dar mai avem nevoie de încă un lucru înainte de a începe să ne creăm harta în Flash. Trebuie să descărcați componenta Google Map SWC. Pentru a face acest lucru, accesați http://code.google.com/intl/nl/apis/maps/documentation/flash/ și dați clic pe "Descărcați API-ul Google Maps for SDK Flash". Va apărea o fereastră pop-up, alegeți Salvarea fișierului "sdk.zip" și descărcați-l.
Acum trebuie să instalați componenta SDK pentru ao folosi în Flash. Pentru a face acest lucru, navigați la locația în care ați salvat API-ul Google Maps API pentru Flash SDK și găsiți versiunea non-Flex a bibliotecii de interfață. În cazul meu, acesta este (lib / map_1_9.swc). Copiați acum fișierul "map_1_9.swc".
Ulterior, dacă aveți Flash deschis în prezent, închideți aplicația și căutați acest dosar:
În interiorul acelui director creați un folder nou numit "google" și lipiți fișierul "map_1_9.swc" în el. Flash este acum setat pentru a suporta API-ul Google Maps pentru Flash.
O.K. Asta e totul făcut și murdarit! Acum putem începe să creăm harta noastră în Flash. Porniți Flash CS3 sau CS4 și creați un nou fișier ActionScript 3.0, dimensiunea implicită a scenei (550 x 400).
Acum salvați pur și simplu fișierul; apăsați "Ctrl + S" sau mergeți la File> Save din meniu. Salvați-l în locația pe care o doriți și numiți-o așa cum doriți. O voi numi "google_map".
Deschideți panoul Componente "Ctrl + F7" sau faceți clic pe Fereastră> Componente din meniu și glisați GoogleMapsLibrary pe scenă.
Creați un nou strat, faceți dublu clic pe numele acestuia și redenumiți-l la "acțiuni".
Acum, cu stratul de acțiuni selectat, deschideți panoul de acțiuni apăsând "F9" sau făcând clic pe Fereastră> Acțiuni. Adăugați următoarele linii de cod:
importați com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType;
Acum să adăugăm harta! Când încărcăm filmul, această bucată de cod va crea o hartă și o va fixa pe scenă. În interiorul codului vedem variabila "map.key"; aici trebuie să adăugăm cheia API personală. Deschideți fișierul în care ați salvat cheia API și copiați / inserați-o în variabilă.
// Creați harta Harta var: Harta = Harta nouă (); map.key = "Cheia dvs. API aici"; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); this.addChild (harta);
Acum, du-te și testați-vă filmul "Ctrl + Enter" sau faceți clic pe Control> Test Movie din meniu și veți vedea că tocmai ați creat o hartă.
În acest stadiu, putem trage doar harta. Nu este exact ceea ce căutăm, deci să adăugăm niște controale pe hartă, ceea ce ne va permite să mărim și să ne mișcăm. Pentru a adăuga controale pe hartă, trebuie să ne actualizăm codul. Mai întâi trebuie să sunăm câteva clase suplimentare:
import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
După aceea, trebuie să creați o nouă funcție de apel după crearea hărții. Denumim funcția "onMapReady ()". În cadrul acestei funcții adăugăm comenzile noastre pe hartă.
funcția onMapReady (eveniment: MapEvent): void map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ());
Acum trebuie să apelam funcția "onMapReady ()" ori de câte ori harta noastră este încărcată. Pentru a face acest lucru, trebuie să adăugăm o linie suplimentară primei noastre bucăți de cod.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Codul nostru complet arată acum:
importați 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; // Creați harta Harta var: Harta = Harta nouă (); map.key = "Cheia dvs. API aici"; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta); funcția onMapReady (eveniment: MapEvent): void map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ());
Acum, testați filmul "Ctrl + Enter" sau faceți clic pe Control> Test Movie din meniu și veți vedea că hărțile noastre au acum controale. Suntem capabili să mărim și chiar să ne schimbăm harta pe vizualizarea prin satelit, hibrid și pe teren. E foarte cool, dar vrem mai mult?
Să zoomem într-o anumită locație după încărcarea hărții noastre pentru prima dată. Spune că sunt un surfer și vreau să creez o hartă a punctelor de surf în orașul meu natal. Nu vrem ca oamenii să meargă manual și să caute zona, așa că o să rezolvăm asta într-o secundă. Singurul lucru pe care trebuie să-l adăugăm este o linie mică de cod pentru funcția "onMapReady ()".
map.setCenter (nou LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Ceea ce facem aici este crearea unui nou punct LatLng pe hartă. Mai întâi specificăm două valori: "latitudinea" și "longitudinea" din regiunea noastră. Apoi am stabilit valoarea de zoom; Am optat pentru utilizarea 9. Zoom-ul variază de la 0 la aproximativ 16 (acest lucru poate varia de la o regiune la alta). În sfârșit, setăm tipul hărții; Am optat aici pentru HYBRID_MAP_TYPE.
Funcția noastră "onMapReady ()" arată acum:
funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ());
Dacă încercăm filmul nostru, puteți vedea că multe lucruri s-au schimbat. După ce harta este încărcată, mărim regiunea noastră specifică și tipul hărții este acum Hybrid. Pentru a determina latitudinea și longitudinea pentru regiunea dvs., puteți utiliza Google Earth sau un instrument online, cum ar fi http://itouchmap.com/latlong.html.
Acum, să adăugăm pe harta noastră un marcaj simplu. Doar adăugați alte 2 clase:
importați com.google.maps.overlays.MarkerOptions; importați com.google.maps.overlays.Marker;
și actualizați funcția "onMapReady ()" cu această bucată de cod:
var marker: Marker = marker nou (LatLng nou (28.74659, -13.93447)); map.addOverlay (marcator);
Din nou, creăm un punct LatLng cu anumite valori latitudine / longitudine specifice pentru locația noastră. Apoi, numim "addOverlay ()" pentru a pune markerul pe hartă. Codul nostru complet arată acum:
importați 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; importați com.google.maps.overlays.MarkerOptions; importați com.google.maps.overlays.Marker; // Creați harta Harta var: Harta = Harta nouă (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta); funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ()); var marker: Marker = marker nou (LatLng nou (28.74659, -13.93447)); map.addOverlay (marcator);
Du-te și testați-vă filmul. Veți vedea marca noastră pe hartă.
Acum să luăm totul la nivelul următor. Avem o hartă cu controale de zoom și un marcator. De ce mai avem nevoie? Ei bine, îți spun eu. Avem nevoie de MARKERI MAI MULTE, TOOLTIPS, INFO WINDOWS și dorim să încărcăm totul dintr-un fișier XML. Deci sa începem. Mai intai vom crea fisierul nostru XML. Deschideți editorul XML preferat și creați acest fișier:
28.74659 -13.93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 Bubbel
Odată ce harta noastră este încărcată, trebuie să tragem datele XML în fișierul nostru Flash. Creați o nouă funcție numită "xmlLoader ()" și vom apela această funcție în funcția "onMapReady ()". Mai întâi trebuie să ștergem codul pe care l-am adăugat pentru a crea marca noastră cu doar câțiva pași înainte. Apoi adăugăm linia pentru a apela funcția "xmlLoader ()". Funcția "onMapReady ()" ar trebui să arate astfel:
funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ()); xmlLoader ();
În continuare vrem să creăm funcția "xmlLoader ()".
funcția xmlLoader ()
În pasul următor o vom umple.
Bine, suntem aici. Să încărcăm datele XML. În interiorul funcției "xmlLoader ()" adăugăm acest cod:
Accentsconagua
funcția loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nou XML (e.target.data); // sfârșitul funcției loadXML var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (noua adresă URLRequest ("xml.xml")); Acest lucru ne va aduce datele XML cu care să lucrăm.
Deoarece avem 3 locații în fișierul nostru XML, va trebui să creăm o buclă "For" și să stocăm toate datele din unele Arrays. În interiorul funcției "loadXML ()" adăugăm această bucată de cod pentru a crea buclă For:
pentru (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
Pentru a testa dacă lucrurile funcționează pentru noi, vom urmări variabila "title_tip". Testați-vă filmul și trebuie să obțineți următoarea ieșire:
Apoi trebuie să creăm câteva variabile pentru a stoca datele încărcate din fișierul XML. În interiorul buzei noastre Pentru adăugăm aceste variabile:
var latlng: LatLng = LatLng nou (harta_xml.locație [i] .lat, map_xml.location [i] .lon); var vârful = map_xml.location [i] .name_tip; var myTitle: String = harta_xml.locație [i] .title_tip; var myContent: String = map_xml.location [i] .content_tip;
Dacă doriți, puteți șterge linia "trace ()" pe care am folosit-o înainte. Bucla noastră For acum arată astfel:
pentru (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; // end of for loop
O.K! Trebuie să adăugăm un marcator pe hartă pentru fiecare din cele trei locații. Acum, că avem toate datele stocate în variabilele noastre, va trebui să creăm o nouă funcție numită "createMarker ()". În interiorul funcției noastre "loadXML ()" adăugăm această nouă funcție:
// Adaugati markeri pe harta Map createMarker (latlng: LatLng, numar: Number, tip, myTitle, myContent): Marcator var i: Marker = Marker new (latlng, new MarkerOptions bacsis ) ); întoarce i; // funcția end createMarker
Mai trebuie să numim această funcție "createMarker ()" pentru a vedea marcatorii pe hartă. Pentru a face acest lucru, trebuie să adăugăm o linie suplimentară de cod la sfârșitul bucla noastră For:
map.addOverlay (creaMarker (latlng, i, tip, myTitle, myContent));
Aceasta ar trebui să arate funcția noastră "loadXML ()" acum:
funcția loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nou XML (e.target.data); pentru (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)); // 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
Testați-vă filmul și veți vedea marcatorii pe hartă! Rețineți că cele 3 puncte ale noastre sunt foarte apropiate una de cealaltă, astfel încât este posibil să doriți să măriți un pic pentru a le vedea mai clar.
În cele din urmă trebuie să adăugăm câteva informații despre Windows. Dacă faceți clic pe marcatori, vom obține apoi câteva informații despre locațiile acestora. Pentru a face acest lucru trebuie să adăugăm încă două clase:
import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
? un cod mai mic pentru funcția "createMarker ()"?
i.addEventListener (MapMouseEvent.CLICK, funcție (eveniment: MapMouseEvent): void map.openInfoWindow (event.latLng, nou InfoWindowOptions (titleHTML: "+ myTitle, contentHTML:" + myContent));
Acum, testați-vă filmul și veți vedea că marcajele noastre sunt acum clicabile și că ele creează o fereastră de informații cu text din fișierul XML.
Asta e! Uitați-vă la codul nostru final:
importați 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; importați com.google.maps.overlays.MarkerOptions; importați com.google.maps.overlays.Marker; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Creați harta Harta var: Harta = Harta nouă (); map.key = "Cheia dvs. API aici"; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta); funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (noul ZoomControl ()); map.addControl (noua pozițieControl ()); map.addControl (nou MapTypeControl ()); xmlLoader (); funcția xmlLoader () funcția loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nou XML (e.target.data); pentru (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)); // 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")); Testați-vă filmul Ctrl + Enter pentru a verifica rezultatul. Veți avea propria hartă flash bazată pe xml! Puteți să-l utilizați pe site-ul dvs., să editați locațiile așa cum doriți, depinde de dvs. Continuați și experimentați, dacă aveți rezultate reale, asigurați-vă că le împărtășiți cu noi.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
