Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel maggio 2009.
In questo tutorial vedremo come possiamo creare una mappa in Flash utilizzando l'API di Google Maps. Tratteremo alcune nozioni di base come lo zoom sulla mappa e l'aggiunta di alcuni controlli. Vedremo anche come aggiungere marcatori alla nostra mappa e come possiamo caricare i dati utilizzando un file XML.
Prima di poter iniziare a creare la nostra mappa in Flash, è necessario configurare alcune cose. Per utilizzare l'API di Google Maps avrai bisogno di una chiave API personale. Per ottenere questo vai su http://code.google.com/intl/nl/apis/maps/documentation/flash/ e fai clic sul link sul lato destro della pagina "Registrati per una chiave API di Google Maps".
Facendo clic sul link "Registrati per una chiave API di Google Maps" ci porta alla pagina successiva dove possiamo generare la nostra chiave API personale. Scorri la pagina, accetta i termini e le condizioni (potresti leggerli anche tu se sei veramente interessato) e aggiungi l'url del sito web in cui desideri utilizzare l'applicazione (ti servirà una chiave API diversa per ogni dominio in cui vuoi mettere una mappa). Successivamente, fai clic su "Genera chiave API".
Ora vedrai la tua chiave API personale per il dominio selezionato. Copia la chiave API e incollala o salvala da qualche parte poiché ne avremo bisogno molto presto.
Ok, ora abbiamo la nostra chiave API, ma abbiamo ancora bisogno di un'altra cosa prima di poter iniziare a creare la nostra mappa in Flash. Dobbiamo scaricare il componente SWC di Google Maps. Per farlo, vai su http://code.google.com/intl/nl/apis/maps/documentation/flash/ e fai clic su "Scarica l'API di Google Maps per Flash SDK". Apparirà una finestra popup, scegli di salvare il file "sdk.zip" e scaricarlo.
Ora dobbiamo installare il componente SDK per usarlo in Flash. Per fare ciò, accedi alla posizione in cui hai salvato l'API di Google Maps per Flash SDK e trova la versione non flessibile della libreria di interfaccia. Nel mio caso questo è (lib / map_1_9.swc). Ora copia il file "map_1_9.swc".
Successivamente, se Flash è aperto, chiudi l'applicazione e cerca questa cartella:
All'interno di questa cartella crea una nuova cartella chiamata "google" e incolla il file "map_1_9.swc" al suo interno. Flash ora è configurato per supportare l'API di Google Maps per Flash.
Ok. Questo è tutto fatto e spolverato! Ora possiamo finalmente iniziare a creare la nostra mappa in Flash. Avvia Flash CS3 o CS4 e crea un nuovo file ActionScript 3.0, dimensioni dello stage predefinite (550 x 400).
Ora basta salvare il file; premi "Ctrl + S" o vai a File> Salva nel menu. Salvalo nella posizione desiderata e assegnagli il nome desiderato. Lo chiamerò "google_map".
Apri il pannello Componenti "Ctrl + F7" o fai clic su Finestra> Componenti nel menu e trascina GoogleMapsLibrary sul palco.
Crea un nuovo livello, fai doppio clic sul suo nome e rinominalo in "azioni".
Ora, con il livello di azioni selezionato, apri il pannello azioni premendo "F9" o facendo clic su Finestra> Azioni. Aggiungi queste righe di codice:
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType;
Ora aggiungiamo la mappa! Quando carichiamo il film, questo pezzo di codice creerà una mappa e la metterà sul palco. All'interno del codice vediamo la variabile "map.key"; qui dobbiamo aggiungere la nostra chiave API personale. Apri il file in cui hai salvato la chiave API e copia / incolla nella variabile.
// Crea la mappa var map: Map = new Map (); map.key = "La tua chiave API qui"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); this.addChild (mappa);
Ok, ora vai a testare il tuo film "Ctrl + Invio" o fai clic su Controllo> Prova filmato nel menu e vedrai che hai appena creato una mappa.
In questa fase possiamo solo trascinare la mappa. Non è proprio quello che stiamo cercando, quindi aggiungiamo alcuni controlli alla mappa che ci consentiranno di ingrandire e spostare. Per aggiungere controlli alla nostra mappa, dobbiamo aggiornare il nostro codice. Per prima cosa dobbiamo chiamare alcune classi extra:
import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
Dopodiché è necessario creare una nuova funzione per chiamare una volta creata la mappa. Chiamiamo la funzione "onMapReady ()". All'interno di questa funzione aggiungiamo i nostri controlli alla mappa.
function onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Ora dobbiamo solo chiamare la funzione "onMapReady ()" ogni volta che viene caricata la nostra mappa. Per fare ciò abbiamo bisogno di aggiungere una linea in più al nostro primo pezzo di codice.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Il nostro codice completo ora si presenta così:
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; // Crea la mappa var map: Map = new Map (); map.key = "La tua chiave API qui"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa); function onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Ora prova il tuo film "Ctrl + Invio" o fai clic su Controllo> Prova filmato nel menu e vedrai che la nostra mappa ora ha dei controlli. Siamo in grado di ingrandire e persino modificare la nostra mappa in modalità Satellite, Hybrid e Terrain. È molto bello, ma vogliamo di più?
Esaminiamo una posizione specifica quando la nostra mappa viene caricata per la prima volta. Dì che sono un surfista e voglio creare una mappa degli spot di surf nella mia città natale. Non vogliamo che le persone debbano manualmente ingrandire e cercare l'area, quindi la risolveremo in un secondo. L'unica cosa che dobbiamo aggiungere è una piccola riga di codice per la nostra funzione "onMapReady ()".
map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Quello che effettivamente facciamo qui è creare un nuovo punto LatLng sulla mappa. Per prima cosa specifichiamo 2 valori: la "latitudine" e la "longitudine" dalla nostra regione. Quindi impostiamo il nostro valore di zoom; Ho optato per l'uso 9. Lo zoom varia da 0 a circa 16 (questo può variare da regione a regione). Infine, impostiamo il tipo di mappa; Ho optato per HYBRID_MAP_TYPE.
La nostra funzione "onMapReady ()" ora si presenta così:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Se testiamo il nostro film, puoi vedere che molte cose sono cambiate. Una volta caricata la mappa, eseguiamo lo zoom nella nostra regione specifica e il nostro tipo di mappa è ora ibrido. Per determinare la latitudine e la longitudine della tua regione puoi utilizzare Google Earth o uno strumento online come http://itouchmap.com/latlong.html.
Ora aggiungiamo un semplice marker alla nostra mappa. Aggiungi solo altre 2 classi:
import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker;
e aggiorna la funzione "onMapReady ()" con questa parte di codice:
var marker: Marker = new Marker (new LatLng (28.74659, -13.93447)); map.addOverlay (marker);
Di nuovo creiamo un punto LatLng con alcuni valori specifici di latitudine / longitudine per la nostra posizione. Quindi chiamiamo "addOverlay ()" per mettere il nostro marker sulla mappa. Il nostro codice completo ora si presenta così:
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; // Crea la mappa var map: Map = new Map (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); var marker: Marker = new Marker (new LatLng (28.74659, -13.93447)); map.addOverlay (marker);
Vai e prova il tuo film. Vedrai il nostro marcatore sulla mappa.
Ora portiamo tutto al livello successivo. Abbiamo una mappa con controlli zoom e un marker. Di che altro abbiamo bisogno? Bene, ti dirò Abbiamo bisogno di PIÙ MARKER, TOOLTIPS, INFO WINDOWS e vogliamo caricare tutto da un file XML. Quindi iniziamo. Per prima cosa creeremo il nostro file XML. Apri il tuo editor XML preferito e crea questo file:
28,74,659 mila -13,93,447 mila Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 Il Bubbel
Una volta caricata la nostra mappa, dobbiamo inserire i dati XML nel nostro file Flash. Crea una nuova funzione denominata "xmlLoader ()" e chiameremo tale funzione nella nostra funzione "onMapReady ()". Per prima cosa dobbiamo eliminare il codice che abbiamo aggiunto per creare il nostro marker solo pochi passaggi prima. Quindi aggiungeremo la linea per chiamare la funzione "xmlLoader ()". La nostra funzione "onMapReady ()" dovrebbe ora apparire così:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader ();
Quindi vogliamo creare la funzione "xmlLoader ()".
function xmlLoader ()
Nel prossimo passaggio lo riempiremo.
Ok, eccoci qui. Carichiamo i nostri dati XML. All'interno della funzione "xmlLoader ()" aggiungiamo questo codice:
Accentsconagua
function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); // fine della funzione loadXML var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (new URLRequest ("xml.xml")); Questo ci porterà i nostri dati XML con cui lavorare.
Dato che abbiamo 3 posizioni nel nostro file XML, sarà necessario creare un ciclo "For" e archiviare tutti i dati in alcuni array. All'interno della nostra funzione "loadXML ()" aggiungiamo questo pezzo di codice per creare il ciclo For:
per (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
Per verificare se le cose stanno funzionando per noi, tracceremo la variabile "title_tip". Metti alla prova il tuo film e dovresti ottenere il seguente risultato:
Quindi dobbiamo creare alcune variabili per memorizzare i nostri dati caricati dal file XML. All'interno del nostro ciclo For aggiungiamo queste variabili:
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;
Se vuoi, puoi cancellare la linea "trace ()" che abbiamo usato prima. Il nostro ciclo For ora si presenta così:
per (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
Ok! Dobbiamo aggiungere un indicatore alla mappa per ognuna delle nostre tre posizioni. Ora che abbiamo tutti i dati memorizzati nelle nostre variabili, dovremo creare una nuova funzione chiamata "createMarker ()". All'interno della nostra funzione "loadXML ()" aggiungiamo questa nuova funzione:
// Aggiungi marcatori sulla funzione Map createMarker (latlng: LatLng, numero: Number, tip, myTitle, myContent): Marker var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, tooltip: "" + mancia ) ); ritorna i; // end function createMarker
Dobbiamo ancora chiamare questa funzione "createMarker ()" per vedere i nostri marcatori sulla mappa. Per fare ciò abbiamo bisogno di aggiungere una riga di codice in più alla fine del nostro ciclo For:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Ecco come dovrebbe apparire la nostra funzione "loadXML ()" ora:
function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); per (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
Metti alla prova il tuo film e vedrai i marcatori sulla mappa! Nota che i nostri 3 punti sono molto vicini tra loro, quindi potresti voler ingrandire un po 'per vederli più chiaramente.
Finalmente abbiamo bisogno di aggiungere alcune informazioni di Windows. Se clicchiamo sui marker, otterremo alcune informazioni sulle loro posizioni. Per fare ciò dobbiamo aggiungere altre 2 classi:
import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
? un po 'più di codice per la nostra funzione "createMarker ()"?
i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)););
Ora prova il tuo film e vedrai che i nostri marcatori ora sono cliccabili e che creano una finestra informativa con testo dal file XML.
Questo è tutto! Dai un'occhiata al nostro codice finale:
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; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Crea la mappa var map: Map = new Map (); map.key = "La tua chiave API qui"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader (); function xmlLoader () function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); per (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")); Metti alla prova il tuo film Ctrl + Invio per verificare il risultato. Avrai la tua mappa Flash basata su xml! Puoi usarlo sul tuo sito web, modificare i luoghi come vuoi, tocca a te. Vai avanti e sperimenta, se hai dei risultati fantastici, assicurati di condividerli con noi.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
