Share
Dopo una risposta così positiva al mio primo tutorial Implementare una mappa Utilizzando l'API di Google Maps per Flash, ho deciso di scrivere un secondo. Da quel primo tut l'API di Google Maps è stata aggiornata, consentendo agli sviluppatori di (tra le altre cose) di aggiungere la visualizzazione 3D alle mappe. Questa è una grande funzionalità e durante questo tutorial ti spiegherò come usarlo.
Inoltre, molte persone hanno richiesto una spiegazione per l'aggiunta di marcatori personalizzati; questa è la seconda cosa che discuteremo qui oggi.
Non svilupperò ulteriormente la nostra mappa precedente perché è necessario scaricare il nuovo componente di Google Maps. Non c'è modo di utilizzare il componente dal mio precedente tutorial in quanto quello non supporta le funzioni 3D. Quindi ... vai su http://code.google.com/intl/nl/apis/maps/documentation/flash/
Dobbiamo installare il componente SDK per usarlo in Flash. Per fare ciò, accedi alla posizione in cui hai salvato il componente Google Maps SDK e trova la versione non flessibile della libreria dell'interfaccia. Nel mio caso questo è (lib / map_1_18.swc). Ora copia il file "map_1_18.swc".
Successivamente, se Flash è aperto, chiudi l'applicazione e cerca questa cartella:
Dentro quella cartella crea una nuova cartella chiamata "google" e incolla il file "map_1_18.swc" al suo interno. Flash è ora impostato su
supporta l'API di Google Maps per Flash.
Ok, ora abbiamo il componente, ma prima che possiamo andare al lavoro abbiamo ancora bisogno di una chiave API di Google Map per far funzionare la nostra mappa online. Una chiave API di Google Maps è gratuita e puoi acquistarne una qui:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, il lavoro noioso è finito, ora possiamo iniziare con le cose divertenti! Immergiti in Flash e crea un nuovo file ActionScript 3.0, dimensioni dello stage predefinite (550 x 400).
Preferisco iniziare salvando il file. Mentre sto lavorando mi piace molto premere "Ctrl + S" per tutto il tempo, quindi andare avanti
"Ctrl + S" o fai clic su "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. Trascina GoogleMapsLibrary nella tua libreria.
Per mantenere organizzato mi piace rinominare il primo livello in "azioni".
Con il livello di azioni selezionato, apri il pannello delle azioni (fai clic su "F9" o fai clic su "Finestra> Azioni") e aggiungi queste righe di codice:
import 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;
Ora creeremo la nostra prima funzione. Per prima cosa vogliamo dichiarare la nostra variabile Mappa:
// Variables var map: Map3D;
Ora possiamo aggiungere la nostra funzione che chiameremo per aggiungere la mappa principale sul palco:
// Funzione che aggiunge la funzione map on stage add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa);
OK, come puoi vedere abbiamo aggiunto un eventlistener che verrà attivato una volta caricata la nostra mappa, quindi creiamo anche quella funzione:
// Funzione che si attiva quando viene creata la funzione map onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (new Attitude (20,30,0));
Qui abbiamo impostato la mappa al centro. Questa funzione ha 3 valori e definirà la posizione in cui si aprirà la mappa. Il
i valori sono come questo "map.setCenter (new LatLng (latitudine, longitudine), zoom); ". Quindi definiamo la modalità di visualizzazione;
mentre stiamo usando la nuova mappa 3D userò la vista Prospettica. Se ti piace una normale visualizzazione mappa puoi cambiare questo valore in
"View.VIEWMODE_2D".
Quindi impostiamo l'atteggiamento. Questo definirà il modo in cui visualizziamo la mappa. In questo caso aggiungeremo una piccola vista prospettica ad esso e
gira leggermente la mappa per creare un angolo di visualizzazione migliore. Puoi giocare un po 'con questi valori e vedere cosa ti piace di più.
OK, è tempo di un primo controllo! Cosa abbiamo finora? Bene, ancora niente! Per prima cosa dobbiamo chiamare la nostra funzione per creare il
carta geografica! Aggiungiamo questa linea di codice proprio sotto le nostre variabili:
// Variables var map: Map3D; // Chiama la funzione per creare la mappa add_map ();
Eccoci! Ora prova solo il tuo film "Ctrl + Invio" o fai clic su Controllo> Prova filmato nel menu ...
Sì! Abbiamo una mappa ingrandita sull'aeroporto di Bruxelles! Non è fantastico ?! Forse no ... Diamo un'occhiata a quello che abbiamo qui. Abbiamo la mappa e possiamo trascinare la mappa. Quindi quello di cui abbiamo bisogno sono gli strumenti per navigare sulla mappa, ingrandire e rimpicciolire la mappa. Iniziamo con quegli strumenti di navigazione prima!
Prima di tutto importiamo 3 classi extra; aggiungi queste righe sotto l'altro codice di importazione nel nostro script:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
No vai alla funzione onMapReady () e aggiungi queste 3 linee di codice sotto le altre linee:
map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Qui stiamo aggiungendo i controlli del tipo di mappa, quindi ora possiamo cambiare il tipo di mappa. Quindi aggiungiamo un controllo di panoramica della mappa alla parte inferiore destra della nostra mappa. E aggiungiamo gli strumenti di navigazione della mappa. Questo è il nostro codice sorgente completo come dovrebbe apparire in questo momento:
import 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; // Variables var map: Map3D; // Chiama la funzione per creare la mappa add_map (); // Funzione che aggiunge la funzione map on stage add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa); // Funzione che si attiva quando viene creata la funzione map onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (new Attitude (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Vai avanti e prova di nuovo il tuo film. Puoi vedere che puoi muoverti facilmente intorno alla mappa ora con questi nuovi originali
controlli!
Penso che sia ora di passare alla parte dei marcatori; una mappa senza marcatori è come un bar senza birra, vero? Non ci sono sciocchezze questa volta! Passiamo subito agli indicatori personalizzati!
Vogliamo posizionare i nostri marcatori personalizzati sulla mappa con le informazioni che verranno memorizzate in un file XML esterno. Iniziamo con la creazione di un indicatore personalizzato, quindi creeremo il file XML e dopo lo caricheremo in Flash.
Non sono un grande designer, quindi penso che sarai in grado di creare un marcatore molto più bello di quello che ho! Ecco perché non sto spendendo troppo tempo su questo. Basta disegnare alcuni cerchi, metterli uno sopra l'altro, selezionare tutto, premere F8, selezionare MovieClip, denominarlo "marker_mc" e selezionare Esporta per Actionscript. Hit "OK".
Come ho detto prima, spero che creerai un pennarello più bello e più bello di questo! Basta disegnare il tuo pennarello e
nascosto a un filmato come spiegato sopra.
Una volta creato il Movie Clip, apparirà nella tua libreria. È quindi possibile eliminarlo dallo stage poiché verrà importato utilizzando
ActionScript (ecco perché è stato necessario selezionare l'opzione "Esporta per ActionScript"). Nella nostra libreria ora abbiamo 2 oggetti; il
GoogleMapsLibrary e il nostro marker_mc.
OK, eccoci qui. Abbiamo una mappa e (nel tuo caso) un indicatore molto bello! Ora creiamo il file XML. Apri il tuo editor di codice preferito, crea questo file e salvalo come locations.xml.
50,899197766773284 4,486040573103489 Bruxelles 49,004024443647324 2,571113562006575 Parigi 51,4699229971675 -,45367874251784013 Londra
Abbiamo bisogno di ottenere i dati XML nel nostro film in flash. Per fare ciò abbiamo bisogno di creare una nuova funzione che caricherà il nostro xml. Inserisci
questo pezzo di codice in fondo alla sceneggiatura. All'interno della nostra funzione onMapReady () chiamiamo questa nuova funzione load_xml (). Una volta che la nostra mappa sarà pronta, inizieremo a caricare l'xml.
Accentsconagua
// Funzione che caricherà la funzione xml loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); function load_xml () var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (new URLRequest ("locations.xml")); Dato che abbiamo 3 posizioni nel nostro file XML, sarà necessario creare un ciclo "For" e archiviare tutti i dati in alcuni array. Dentro il nostro
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);
Se testiamo il nostro film ora possiamo vedere il nostro film che emette i dati xml. Ora lavoriamo con esso.
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;
Puoi cancellare la linea "trace ()" che abbiamo usato prima, poiché sappiamo che le cose stanno funzionando.
Ora che abbiamo tutti i nostri dati xml memorizzati in variabili, possiamo passare a caricare i nostri indicatori sulla mappa. Per prima cosa aggiungiamo alcune classi extra al nostro codice. Aggiungi questo pezzo di codice sotto le altre classi:
import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent;
Crea una nuova funzione chiamata createMarker (). Vogliamo aggiungere questa funzione appena prima della nostra funzione loadXML ().
// 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;
Possiamo chiamare la funzione createMarker () per ogni marker che dobbiamo aggiungere alla mappa, quindi all'interno del nostro ciclo For aggiungiamo questa riga di codice:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Se provi il film ora puoi vedere che abbiamo marcatori sulla nostra mappa sulle posizioni che abbiamo specificato nel nostro file xml! È grandioso, ma non abbiamo creato quel grande segnalino personalizzato per niente, vero? Rimuoviamo quei segnalini standard e aggiungiamo i nostri segnalini personalizzati.
Per prima cosa dobbiamo creare il nostro oggetto marcatore personalizzato. Aggiungi questo codice nella funzione createMarker (), sopra il resto del codice:
// crea oggetto marcatore personalizzato var markerPin: marker_mc = new marker_mc (); // Se il tuo indicatore è troppo grande puoi ridimensionarlo qui markerPin.width = 20; markerPin.height = 20;
Successivamente, andremo al prossimo pezzo di codice in cui dobbiamo aggiungere una linea a markerOptions. Cerca questo pezzo di codice:
new MarkerOptions (hasShadow: true, tooltip: "" + tip)
e cambiarlo in:
new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "" + tip)
Ok! Metti alla prova il tuo film e controlla il risultato!
OK, qual è il prossimo? Le finestre Info! Quando clicchiamo sul nostro marcatore abbiamo bisogno di ottenere le informazioni che abbiamo aggiunto al nostro file XML. Prima di aggiungere le finestre di informazione, voglio solo rimuovere quella brutta linea gialla attorno alla nostra mappa, lo hai già notato? Quando ti concentri sulla mappa mostra una linea gialla attorno ad essa. Personalmente non mi piace, quindi rimuoviamolo. Basta aggiungere questa riga di codice sotto la nostra sezione delle variabili:
// Nessuna linea di messa a fuoco stage.stageFocusRect = false;
Ok questo è fatto! Aggiungiamo le finestre Info. Aggiungi un altro codice alla nostra funzione createMarker ():
i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)););
Ecco come appare la nostra funzione createMarker ():
function createMarker (latlng: LatLng, numero: Number, tip, myTitle, myContent): Marker // create Oggetto marcatore personalizzato var markerPin: marker_mc = new marker_mc (); // Se il tuo indicatore è troppo grande puoi ridimensionarlo qui markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icona: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));); ritorna i;
Metti alla prova il tuo film e ora avrai anche le finestre di informazione.
Bene, questo è tutto! Congratulazioni, hai appena creato una mappa di Google con navigazione 3D e marcatori personalizzati! Ottimo lavoro! Facciamo un
sguardo finale al nostro codice:
import 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; import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; // Variables var map: Map3D; // Nessuna linea di messa a fuoco stage.stageFocusRect = false; // Chiama la funzione per creare la mappa add_map (); // Funzione che aggiunge la funzione map on stage add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (new Point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mappa); // Funzione che si attiva quando viene creata la funzione map onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (new Attitude (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ()); // Carica il file xml load_xml (); // Aggiungi marcatori sulla funzione Map createMarker (latlng: LatLng, numero: Number, tip, myTitle, myContent): Marker // create Oggetto marcatore personalizzato var markerPin: marker_mc = new marker_mc (); // Se il tuo indicatore è troppo grande puoi ridimensionarlo qui markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icona: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));); ritorna i; // Funzione che caricherà la funzione xml 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Puoi usare questa mappa 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!
