Share
După un răspuns pozitiv la primul meu tutorial Implementarea unei hărți Utilizând API-ul Google Map pentru Flash, am decis să scriu o secundă. De la primul tut, API-ul Google Map a fost actualizat, permițându-i dezvoltatorilor (printre altele) să adauge vizualizarea 3D pe hărți. Aceasta este o caracteristică excelentă și în timpul acestui tutorial vă voi explica cum să îl folosiți.
De asemenea, o mulțime de persoane au solicitat o explicație pentru adăugarea de markere personalizate; acesta este al doilea lucru pe care îl vom discuta astăzi.
Nu voi mai construi harta noastră anterioară, deoarece trebuie să descărcați noua componentă Google Map. Nu există nicio modalitate de a utiliza componenta din tutorialul meu anterior, deoarece nu suportă funcțiile 3D. Deci ... accesați http://code.google.com/intl/nl/apis/maps/documentation/flash/
Trebuie să instalați componenta SDK pentru ao folosi în Flash. Pentru aceasta, navigați la locația în care ați salvat Componenta SDK Google Maps și găsiți versiunea non-Flex a bibliotecii de interfață. În cazul meu, acesta este (lib / map_1_18.swc). Copiați acum fișierul "map_1_18.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_18.swc" din interiorul acestuia. Flash este acum setat la
suportă API-ul Google Maps pentru Flash.
Bine că avem componenta acum, dar înainte de a ajunge la lucru avem încă nevoie de o cheie API Google Map pentru a face ca harta noastră să funcționeze online. Un chei API Google Map este gratuit și puteți obține unul aici:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, munca plictisitoare se face, acum putem începe cu lucrurile distractive! Să ne aruncăm în Flash și să creăm un nou fișier ActionScript 3.0, dimensiunea standard a scenei (550 x 400).
Prefer să încep prin salvarea fișierului. În timp ce lucrez, îmi place foarte mult să lovesc "Ctrl + S" tot timpul, așa că du-te mai departe lovit
"Ctrl + S" sau faceți clic pe "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
"harta Google".
Deschideți panoul Componente "Ctrl + F7" sau faceți clic pe Fereastră> Componente din meniu. Glisați GoogleMapsLibrary în biblioteca dvs..
Pentru a păstra organizat, îmi place să redenumesc primul strat la "acțiuni".
Cu stratul de acțiuni selectat deschideți panoul de acțiuni (apăsați "F9" sau faceți clic pe "Fereastră> Acțiuni") și adăugați următoarele rânduri de cod:
importați 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;
Acum vom crea prima noastră funcție. În primul rând, vrem să declarăm variabila noastră hartă:
// Variabile var hartă: Map3D;
Acum putem adăuga funcția pe care o vom apela pentru a adăuga harta principală pe scenă:
// Funcție care adaugă harta pe funcția scena add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta);
OK, după cum puteți vedea, am adăugat un eventlistener care se va declanșa odată ce harta noastră este încărcată, deci vă permite să creați și acea funcție:
// Funcția care va declanșa o dată ce harta este creată funcția onMapReady (eveniment: MapEvent): void map.setCenter (noul LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (nouă atitudine (20,30,0));
Aici am stabilit harta în centru. Această funcție are 3 valori și va defini locația unde se va deschide harta.
valorile sunt ca aceasta "map.setCenter (LatLng nou (latitudine, longitudine), zoom); Apoi definim modul de vizualizare;
pe măsură ce folosim noua hartă 3D, voi folosi vizualizarea Perspectivă. Dacă doriți o vizualizare normală a hărții, puteți modifica această valoare
"View.VIEWMODE_2D".
Apoi am setat Atitudinea. Acesta va defini modul în care vedem harta. În acest caz, vom adăuga o perspectivă mică asupra lui și
întoarceți harta puțin pentru a crea un unghi de vizualizare mai frumos. Puteți să jucați puțin cu aceste valori și să vedeți ce vă place cel mai bine.
OK, este timpul pentru un prim cec! Ce avem până acum? Ei bine, nimic încă! Mai întâi trebuie să sunăm funcția noastră pentru a crea
Hartă! Să adăugăm această linie de cod chiar sub variabilele noastre:
// Variabile var hartă: Map3D; // Apelați funcția pentru a crea harta add_map ();
Acolo mergem! Acum testați filmul "Ctrl + Enter" sau faceți clic pe Control> Test Movie din meniu ...
Da! Avem o hartă mărită pe aeroportul din Bruxelles! Nu e grozav ?! Poate că nu ... Să aruncăm o privire la ceea ce avem aici. Avem harta și putem trage harta în jurul nostru. Așadar, ceea ce avem nevoie în continuare sunt instrumente pentru a naviga în jurul hărții, pentru a mări și a distanța pe hartă. Să începem mai întâi cu aceste instrumente de navigare!
Mai întâi, să importăm 3 clase suplimentare; adăugați aceste linii sub alt cod de import în scriptul nostru:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
Nu mergeți la funcția onMapReady () și adăugați aceste 3 linii de cod sub celelalte linii:
map.addControl (nou MapTypeControl ()); map.addControl (noua descriereMapControl ()); map.addControl (noul NavigationControl ());
Aici adăugăm comenzile de tip hartă, deci acum putem schimba tipul hărții. Apoi adăugăm un control de perspectivă a hărții în partea de jos a hărții noastre. Și adăugăm instrumentele de navigare pe hartă. Acesta este codul nostru sursă complet așa cum ar trebui să arate chiar acum:
importați 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; // Variabile var hartă: Map3D; // Apelați funcția pentru a crea harta add_map (); // Funcție care adaugă harta pe funcția scena add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta); // Funcția care se declanșează odată ce harta este creată funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nouă atitudine (20,40,0)); map.addControl (nou MapTypeControl ()); map.addControl (noua descriereMapControl ()); map.addControl (noul NavigationControl ());
Continuați și încercați din nou filmul. Puteți vedea că puteți să vă mișcați foarte ușor pe hartă acum cu aceste funky cautând noi
controale!
Cred că este timpul să trecem la partea markerilor; o hartă fără marcatori este ca un bar fără bere, nu-i așa? Fără prostii de data asta! Să trecem imediat la marcaje personalizate!
Vrem să plasăm marcaje personalizate pe hartă cu informații care vor fi stocate într-un fișier XML extern. Să începem prin crearea unui marcaj personalizat, apoi vom crea fișierul XML și apoi îl vom încărca în Flash.
Nu prea sunt un designer, așa că cred că veți putea crea un marker mult mai rece decât am! De aceea nu voi petrece prea mult timp în asta. Desenați doar câteva cercuri, puneți-le una peste alta, selectați totul, apăsați F8, selectați filmClip, denumiți-o "marker_mc" și selectați Export pentru Actionscript. Apăsați "OK".
După cum am menționat mai devreme, sper că veți crea un răcoritor și un aspect mai bun decât acesta! Doar desenați propriul dvs. marker și
ascundeți-l într-un videoclip, așa cum este explicat mai sus.
Odată ce ați creat filmul, acesta va apărea în bibliotecă. Apoi îl puteți șterge din scenă pe măsură ce îl vom importa folosind
ActionScript (de aceea a trebuit să selectați opțiunea "Export pentru ActionScript"). În biblioteca noastră avem acum 2 articole;
GoogleMapsLibrary și marker_mc.
OK, aici suntem. Avem o hartă și (în cazul tău) un marker foarte bun! Acum, să creăm fișierul XML. Deschideți editorul de cod preferat, creați acest fișier și salvați-l ca locații.xml.
50.899197766773284 4.486040573103489 Bruxelles 49.004024443647324 2.571113562006575 Paris 51.4699229971675 -.45367874251784013 Londra
Trebuie să obținem datele XML în filmul nostru flash. Pentru a face acest lucru trebuie să creați o nouă funcție care să încarce xml-ul nostru. Adăuga
această bucată de cod în partea de jos a scriptului. În interiorul funcției onMapReady () numim această nouă funcție load_xml (). Odată ce harta noastră este gata, vom începe să încărcăm xml-ul.
Accentsconagua
// Funcția care va încărca funcția xml loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nou XML (e.target.data); funcția load_xml () var xmlLoader: URLLoader = nou URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (noua adresă URLRequest ("locations.xml")); 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 nostru
loadXML () adăugăm această bucată de cod pentru a crea bucla For:
pentru (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip);
Dacă încercăm filmul acum, putem vedea că filmul nostru transmite datele xml. Acum hai să lucrăm cu asta.
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;
Puteți șterge linia "trace ()" pe care am folosit-o înainte, deoarece știm că lucrurile funcționează.
Acum, când avem toate datele xml stocate în variabile, putem trece pentru a încărca markerii pe hartă. Mai întâi adăugăm câteva clase suplimentare în codul nostru. Adăugați această bucată de cod în celelalte clase:
importați com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
Creați o nouă funcție numită createMarker (). Vrem să adăugăm această funcție chiar înainte de funcția noastră loadXML ().
// 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;
Putem apela funcția createMarker () pentru fiecare marcator pe care trebuie să-l adăugăm pe hartă, astfel încât în interiorul For Loop să adăugăm această linie de cod:
map.addOverlay (creaMarker (latlng, i, tip, myTitle, myContent));
Dacă testați filmul acum puteți vedea că avem markeri pe harta noastră pe locațiile pe care le-am specificat în fișierul xml! Asta e minunat, dar nu am creat acel marcator personalizat pentru că nu am făcut nimic? Vom elimina marcatorii standard și ne vom adăuga marcatorii personalizați.
Mai întâi trebuie să ne creăm obiectul marker personalizat. Adăugați acest cod în funcția createMarker (), deasupra restului codului:
// crea propriul obiect marker var markerPin: marker_mc = new marker_mc (); // Dacă marcatorul tău este mare, îl poți scala aici markerPin.width = 20; markerPin.height = 20;
Apoi, vom trece la următoarea bucată de cod în care trebuie să adăugăm o linie la markerOptions. Căutați această bucată de cod:
noi MarkerOptions (hasShadow: true, tooltip: "" + tip)
și schimbați-l la:
noi MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "+ tip)
O.K! Testați-vă filmul și verificați rezultatul!
OK, ce urmează? Ferestrele de informații! Când faceți clic pe marcatorul nostru trebuie să obțineți informațiile pe care le-am adăugat în fișierul XML. Înainte de a adăuga ferestrele de informații, vreau doar să elimin această linie urâtă galbenă în jurul hărții noastre, ați observat deja? Când vă concentrați pe hartă, acesta arată o linie galbenă în jurul acestuia. Eu personal nu îmi place asta, așa că haideți să o eliminăm. Doar adăugați această linie de cod sub secțiunea variabilelor noastre:
// Fără linie de focalizare stage.stageFocusRect = false;
Ok! Să adăugăm ferestrele Info. Adăugați un cod mai mult pentru funcția createMarker ():
i.addEventListener (MapMouseEvent.CLICK, funcție (eveniment: MapMouseEvent): void map.openInfoWindow (event.latLng, nou InfoWindowOptions (titleHTML: "+ myTitle, contentHTML:" + myContent));
Așa arată acum funcția createMarker ():
funcția createMarker (latlng: LatLng, număr: Număr, vârf, myTitle, myContent): Marker // crea obiect marker particular var markerPin: marker_mc = new marker_mc (); // Dacă marcatorul tău este mare, îl poți scala aici markerPin.width = 20; markerPin.height = 20; var i: Marker = Marker nou (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "+ tip)); i.addEventListener (MapMouseEvent.CLICK, funcție (eveniment: MapMouseEvent): void map.openInfoWindow (event.latLng, nou InfoWindowOptions (titleHTML: "+ myTitle, contentHTML:" + myContent)); întoarce i;
Testați-vă filmul și acum veți avea și ferestre info.
Ei bine, asta e! Felicitări, tocmai ați creat o hartă Google cu navigare 3D și marcaje personalizate! O treabă foarte bună! Hai să avem
uita-te definitiv la codul nostru:
importați 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; importați com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Variabile var hartă: Map3D; // Fără linie de focalizare stage.stageFocusRect = false; // Apelați funcția pentru a crea harta add_map (); // Funcție care adaugă harta pe funcția scena add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (punct nou (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (harta); // Funcția care se declanșează odată ce harta este creată funcția onMapReady (eveniment: MapEvent): void map.setCenter (nou LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nouă atitudine (20,40,0)); map.addControl (nou MapTypeControl ()); map.addControl (noua descriereMapControl ()); map.addControl (noul NavigationControl ()); // Încărcați xml load_xml (); // Adăugați marcaje pe funcția MapMarker (latlng: LatLng, număr: Număr, vârf, myTitle, myContent): Marker // creare obiect marker particular var markerPin: marker_mc = new marker_mc (); // Dacă marcatorul tău este mare, îl poți scala aici markerPin.width = 20; markerPin.height = 20; var i: Marker = Marker nou (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "+ tip)); i.addEventListener (MapMouseEvent.CLICK, funcție (eveniment: MapMouseEvent): void map.openInfoWindow (event.latLng, nou InfoWindowOptions (titleHTML: "+ myTitle, contentHTML:" + myContent)); întoarce i; // Funcția care va încărca funcția xml 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Puteți utiliza această hartă pe site-ul dvs. web, puteți modifica locațiile după 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ă!
