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.:
Publicar un comentario