Usiamo le Google Maps con Flex
di Marcello Ruta
Tool utilizzati: Flash Builder 4
Requisiti: Cononoscenze di Actionscript 3.0
Assets Finali: GoogleMaps.mxml
Flex SDK: 4.0
Flash Player 10
In questo esercizio vedremo come utilizzare le Google Maps con Flex. Partiremo da una semplice configurazione delle Google Maps e successivamente vedremo come fare una ricerca di uno specifico indirizzo. Quindi gli step che seguiremo per realizzare questo esercizio sono: una semplice configurazione delle mappe di Google, dopo l'aggiunta di un textinput di ricerca per le località, aggiunta di un marker, e recupero delle coordinate da un marker. Adesso passiamo alla fase operativa.
1 Step: Creazione del progetto
Apriamo il Flash Builder o Eclipse (con il plugin di flex installato) e configuriamo il nostro progetto, al quale assegneremo il nome di GoogleMaps, durante la fase di configurazione del progetto aggiungeremo pure l’SWC map_flex_1_18.swc, che è scaricabile dal sito di Google. Per aggiungere la libreria (vedi fig.1) occorre fare clic su ADD SWC nella Library Path e poi fare clic su Browse nell’apposita finestrella di Add Swc, cercare la library nel proprio HD e quindi linkarla al nuovo progetto. Se questo passaggio non lo facciamo durante la fase di creazione del progetto, lo possiamo fare successivamente facendo clic di destro su progetto scegliamo l’opzione Properties, dopodichè facciamo clic su Flex Build Path e nella Library Path linkiamo la nostra libreria seguendo la spiegazione fatta in precedenza. A questo punto siamo pronti per passare alla fase successiva.
 |
2 Step: una semplice configurazione delle Google maps.
In questo passaggio ci preoccuperemo di configurare la nostra interfaccia e di creare la nostra prima mappa basata su delle coordinate predefinite scelte da noi.
La nostra interfaccia sarà composta da un’ApplicationControlBar aggiunta via Mxml e dalla mappa di Google. Aggiungiamo per prima cosa un blocco <fx:Script> per aggiungere poi il nostro codice actionscript, quindi un tag mx:ApplicationControlBar con le seguenti impostazioni height = 50, cornerRadius = 0, width = 100%, fatto questo aggiungiamo un tag <mpas:Map> con i seguenti attributi key= api_key, height=90%, width=100%, id=gamp, e un evento mapevent_mapready="mapreadyHandler(event)". Adesso andiamo sul codice e popoliamo l’handler con un po’ di codice actionscript, per prima cosa impostiamo le coordinate alla nostra mappa attraverso il metodo setCenter() al quale passeremo dei parametri e poi aggiungiamo dei controlli. Ecco il codice necessario del primo passaggio del nostro esercizio.
<fx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.NavigationControl;
private function mapreadyHandler(event:MapEvent):void {
var latLng:LatLng = new LatLng(41.8954656, 12.4823243)
gmap.setCenter(latLng, 12);
gmap.addControl(new NavigationControl());
gmap.addControl(new MapTypeControl());
}
]]>
</fx:Script>
<mx:ApplicationControlBar height = "50"
width = "100%"
cornerRadius = "0">
</mx:ApplicationControlBar>
<maps:Map key = "api_key"
height = "90%"
width = "100%"
id = "gmap"
y = "50"
mapevent_mapready = "mapreadyHandler(event)" />
N.B. La key è una chiave che ci viene fornita da Google, per ottenerla basta avere un account su google, quindi andare al seguente indirizzo: http://code.google.com/intl/it-IT/apis/maps/signup.html
3 Step: Costruzione di una mappa più complessa.
Lasciamo inalterato il codice Mxml del tag <maps:Map> e andiamo ad aggiungere dentro il tag <mx:ApplicationControlBar> un campo di testo di input e tre pulsanti. Quindi cancelliamo il metodo setCenter() e la variabile latLng, lasciamo invece i due controlli aggiunti.
Adesso eseguiamo l’import della classe Alert, e aggiungiamo 3 nuove variabili di tipo private. Ecco le variabili aggiunte:
private var geoCoder:ClientGeocoder; private var place:Array; private var marker:Marker;
Ecco il codice Mxml dell’ApplicationControlBar:
<mx:ApplicationControlBar height = "50" cornerRadius = "0" width = "100%"> <s:TextInput id = "tiSearchLocation" width = "290" /> <s:Button label = "Search" /> <s:Button label = "Save Position" /> <s:Button label = "Return Position" /> </mx:ApplicationControlBar>
Andiamo avanti istanziando la classe ClientGeocoder attraverso l’oggetto geoCoder all’interno dell’handler mapreadyHandler e dopo aggiungiamo due listener di eventi GeocodingEvent per il richiamo delle funzioni geocodingHanndlerSucces e geocodingHandlerFailure, quindi aggiungiamo l’handler onSearchHandler per gestire la ricerca degli indirizzi, alla fine avremo questo codice:
private function onSearchHandler(e:MouseEvent):void {
if(tiSearchLocation.text.length > 0) {
geoCoder.geocode(tiSearchLocation.text);
} else {
Alert.show("Immetti un indirizzo");
}
}
private function geocodingHandlerSuccess(e:GeocodingEvent):void {
//codice actionscript
}
private function geocodingHandlerFailure(e:GeocodingEvent):void {
//codice actionscript
}
La funzione searchHandler sarà richiamata al clic sul Button Search, quindi il button avrà il seguente codice: <s:Button label = "Search"click = "onSearchHandler(event)" />
Adesso spieghiamo in maniera rapida l’utilizzo della Classe ClientGeocoder e del metodo geocode().
Classe ClientGeocoder: Un oggetto ClientGeocoder communica con i server di Google per ottenere i geocodes di un indirizzo specifico immesso dall'utente e mantiene i propri geocoder nella cache dei propri indirizzi.
Metodo geocode(addresse: String): Avvia una richiesta di geocoding al server e dispaccia gli eventi GeocodingEvent.GEOCODING_SUCCESS o GeocodingEvent.GEOCODING_FAILURE al termine della richiesta.
4 Step: Codice Actionscript per i successivi Handler.
private function geocodingHandlerSuccess(e:GeocodingEvent):void {
trace(e.response.placemarks);
place = e.response.placemarks;
if(place.length > 0) {
gmap.setCenter(place[0].point, 16);
var markerOpt:MarkerOptions = new MarkerOptions({draggable: true, strokeStyle: {color: 0xff0000, alpha: 0.6 }, radius: 12, hasShadow: true, fillStyle: { color: 0x333344, alpha: 0.6 }})
marker = new Marker(place[0].point);
marker.setOptions(markerOpt);
if(marker) {
gmap.clearOverlays();
gmap.addOverlay(marker);
}
marker.addEventListener(MapMouseEvent.CLICK, markerHandler)
}
}
Bene spieghiamo cosa fa questo handler, alla variabile place accodiamo i risultati ottenuti al termine della richiesta al server, tutto ciò accade tramite la classe GeocodingResponse.
Classe GeocodingResponse: Un oggetto GeocodingResponse rappresenta il risultato di un’operazione di geocoding restituita dal server. Essa ha due proprietà name e placemarks.
Proprietà placemarks: E’ di tipo Array e restituisce una lista dei placemark dal geocoder.
A questo punto impostiamo una condizione if all’interno della quale faremo alcuni settaggi. Per prima cosa, attraverso il metodo setCenter() imposteremo le coordinate del nostra ricerca e lo zoom.
Metodo setCenter(latin: LatLng, opt_zoom:Number, opt_mapType: IMapType): Questo metodo cambia la posizione della mappa ed accetta un argomento LatLng, uno di tipo Number e uno di tipo IMapType questi ultimi due sono opzionali. L’argomento di tipo Number serve per regolare lo zoom mentre quello IMapType il nuvo tipo di mappa.
Classe MarkerOptions: Questa classe specifica un insieme di parametri di rendering per il Marker.
Nella variabile markerOpt abbiamo fatto una serie di settaggi per rendere il marker draggabile, abbiamo modificato lo stokeStyle (ovvero il bordo esterno del marker) nel colore e nell’alfa, abbiamo impostato hasShadow (ovvero l’ombra del marker) su true, ed infine cambiato fillStyle (ovvero il colore di riempimento del marker).
Quindi assegniamo alla variabile marker la posizione in cui deve apparire il marcatore: marker = new Marker(place[0].point);
Quindi tramite il metodo setOptions() assegniamo i settaggi che abbiamo fatto nella variabile markerOpt.
Metodo setOptions(options:MarkerOptions): Questo metodo aggiorna le opzioni del marker.
Andando avanti nell’analisi del codice ci accorgiamo che abbiamo aggiunto un controllo sul marker. All’interno del blocco if cancelliamo (clearOverlays())tutti i marker di una possibile precedente ricerca e ne aggiungiamo (addOverlay(overlay:IOverlay)) uno nuovo.
Metodo clearOverlays(): Rimuove tutti gli overlays dalle mappe.
Metodo addOverlay(overlay:IOverlay): Aggiunge un nuovo overlay alla mappa.
Infine abbiamo aggiunto un Event Listener all’oggetto marker per il richiamo della funzione markerHandler dove tramite un Alert mostriamo le coordinate ottenute dal marker.
Ecco il codice della funzione:
private function markerHandler(e:MapMouseEvent):void {
Alert.show("Cooordinate: " + marker.getLatLng().toString());
}
Metodo getLatLng(): Questo metodo della Classe Marker serve per recuperare la posizione del Marker.
A questo punto non ci resta che analizzare le ultime tre funzioni, ecco il codice:
private function geocodingHandlerFailure(e:GeocodingEvent):void {
Alert.show("Geocoding Failure: " + e.status);
}
private function savePositionHandler(e:MouseEvent):void {
gmap.savePosition();
}
private function returnPositionHandler(e:MouseEvent):void {
gmap.returnToSavedPosition();
}
Nella funzione geocodingFailure non facciamo altro che farci restituire un errore in caso di una mancata risposta dal server, mentre la funzione savePositionHandler non fa altro che salvare la posizione corrente e returnPositionHandler ritorna nella precedente posizione di ricerca una volta salvata.
Metodo savePosition(): Memorizza la posizione corrente della mappa e il livello di zoom per poi essere richiamato successivamente attraverso returnToSavedPosition.
Metodo returnToSavedPosition(): Restituisce la mappa nella posizione salvata.
Risorse:
- http://code.google.com/intl/it-IT/apis/maps/documentation/flash/reference.html
- Apikey: http://code.google.com/intl/it-IT/apis/maps/signup.html
- http://code.google.com/intl/it-IT/apis/maps/documentation/flash/3d-maps.html
- Example: http://code.google.com/intl/it-IT/apis/maps/documentation/examples/index.html
- 3d Gmaps: http://code.google.com/intl/it-IT/apis/maps/documentation/flash/3d-maps.html
A questo punto abbiamo finito, non mi resta che darvi appuntamento al prossimo tutorial.
Usiamo le Google Maps con Flex