jueves, abril 23, 2009

Conociendo Flex IV: Trabajando con Google Maps

.
Flex posee una API para interactuar con los servicios Google Maps. Su uso requiere de la registración previa de la aplicación que la va a utilizar (Google te da una clave de uso). Aparte hay que descargar la librería que ampliará a Flex y en el proyecto que se requiera el uso de mapas hay que indicarle en las propiedades que se agrega esta nueva librería (En el framework: propierties, Flex build path, library path, add SWC) .
Un programa muy básico para mostrar como funciona la API y el servicio es el siguiente:


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*">

   <mx:Script>

      <![CDATA[
         import com.google.maps.MapType;
         import com.google.maps.LatLng;
         import com.google.maps.MapMouseEvent;
         import com.google.maps.MapEvent;
         import com.google.maps.styles.StrokeStyle;
         import com.google.maps.styles.FillStyle;
         import com.google.maps.overlays.MarkerOptions;
         import com.google.maps.overlays.Marker;
         import com.google.maps.controls.MapTypeControl;
         import com.google.maps.controls.ZoomControl;
          
          // Función que crea el mapa a partir de datos provistos por Google

         private function mapready_mimapa(e:MapEvent):void {

         // se define donde se posicionará la imagen en pantalla, el grado de zoom y el tipo de vista

            idmapa.setCenter(new LatLng(-33, -60), 6, MapType.HYBRID_MAP_TYPE);

            //Se agrega el control de zoom
            idmapa.addControl(new ZoomControl());

            //se agrega el selector de tipo de mapa  
            idmapa.addControl(new MapTypeControl());

            // Se permite hacer scroll sobre el mapa
            idmapa.enableScrollWheelZoom();

            // se activa la deetcción delevento click sobre el mapa
            idmapa.addEventListener(MapMouseEvent.CLICK, click_gmap);

         }
   
         private var m:Marker;
        
         // Función que se lanza cadavez que alguien hace click sobre el mapa
         // En este ejemplo se agregará un objeto tipo marcador
       
         private function click_gmap(e:MapMouseEvent):void {

            // Se crea el objeto marcador
            m = new Marker(e.latLng,
               new MarkerOptions({
                  // se instancia el color
                  fillStyle: new FillStyle({ alpha: 0.5,  color: 0xBBCCDD }),
                  // se define el tamaño y se aplica sombra
                  radius: 6, hasShadow: true,
                  // Fnalmente se añade un tooltip al objeto marcador
                  tooltip: "Estoy en " + e.latLng.toString()
               })
            );
            
            //Se añade el marcador al mapa
            idmapa.addOverlay(m);
         }

      ]]>

   </mx:Script>

   <!-- Se muestra el mapa en pantalla -->
   <!-- Con mapready_mimapa se llama a las funciones AS  que lo definen y crean -->
   <!-- Nótese que idmapa es el identificador del objeto geográfico -->
  
   <maps:Map id="idmapa" width="100%" height="100%" mapevent_mapready="mapready_mimapa(event)"  key="Clave de uso del servicio" />

</mx:Application>

Y la correspondiente salida de pantalla es


No hay comentarios.: