introducción al api flash de google maps
DESCRIPTION
Presentación desarrollada para apoyar mi clase sobre el uso del API Flash de Google Maps en la asignatura Laboratorio de Software de Comunicaciones de la Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid.TRANSCRIPT
¿Esto de qué va?
Configuración del entorno de trabajo
Hello Map!
Aspecto básicos y controles
Eventos
Superposiciones
Por si os habéis perdido en algo
• Todos conocemos Google Maps… y nos gusta ☺
• Varios APIs para integrarlo en nuestras aplicaciones.
• Los más importantes:– API JavaScript
– API Flash (Flex y AIR)
• Nosotros utilizaremos el API Flash desde Flex Builder.
1. Obtener una clave del API de Maps.• Sin limitaciones hasta las 500.000 visitas diarias.
• Sin publicidad.
• Para aplicaciones de libre acceso.
• Registro y resto de condiciones en:o http://code.google.com/intl/es/apis/maps/signup.html
2. Descargar el kit de desarrollo de:• http://maps.googleapis.com/maps/flash/release/sdk.zip
• En la carpeta lib, usaremos el archivo map_flex_*.swc
3. Descargar e instalar Flex Builder de:• http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
4. Configurar el proyecto en Flex Builder:• Creamos un proyecto nuevo: HelloMap.
• Añadimos la biblioteca del API de Google Maps al proyecto copiando el archivo map_flex_*.swc en la carpeta libs.
• A partir de ahora podremos hacer uso del API.
<?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script><![CDATA[
import com.google.maps.LatLng;import com.google.maps.Map;import com.google.maps.MapEvent;import com.google.maps.MapType;
private function onMapReady(event:Event):void {this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}]]>
</mx:Script>
<maps:Mapxmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key=“{api_key}"/>
</mx:Application>
• Se trabajan con latitudes y longitudes:
• Evento MapEvent.MAP_PREINITIALIZE:– Se activa cuando el mapa está preparado para recibir parámetros de inicialización, pero antes de que el mapa esté listo para un uso generalizado.
• Evento MapEvent.MAP_READY:– Se activa después de haber dibujado un mapa predeterminado. – Aquí es donde añadimos los controles al mapa y los posibles Listener de eventos del mapa.
var myGeographicCoordinates:LatLng = new LatLng(myLatitude, myLongitude);
<?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*“ layout="absolute"><mx:Script>
<![CDATA[import com.google.maps.MapOptions;import com.google.maps.controls.ScaleControl;import com.google.maps.controls.MapTypeControl;import com.google.maps.controls.ZoomControl;import com.google.maps.controls.PositionControl;import com.google.maps.LatLng;import com.google.maps.MapType;
private function onMapPreinitialize(event:Event):void {var myMapOptions:MapOptions = new MapOptions();myMapOptions.zoom = 6;myMapOptions.center = new LatLng(40.426199,-3.69976);myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;this.map.setInitOptions(myMapOptions);
}
private function onMapReady(event:Event):void {map.addControl(new PositionControl());map.addControl(new ZoomControl());map.addControl(new MapTypeControl());map.addControl(new ScaleControl());
}]]>
</mx:Script>
<maps:Mapid="map"mapevent_mappreinitialize="onMapPreinitialize(event)"mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ABQIAAAA32a5qLBz6NmxwUVh-6rzthScdxAlIjSga_SIx5BMb7ZpjMRdQhSzYOWduGlBMwMrq0hfYceLWg1muw"/>
</mx:Application>
• Ventanas de información:
• Eventos de mapa (MapEvent, MapMouseEvent…):
private function onMapReady(event:MapEvent):void {setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);openInfoWindow(getCenter(), new InfoWindowOptions({title: "Hello", content: "World"}));
}
private function onMapReady(event:MapEvent):void {map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}
private function onMapClick(event:MapMouseEvent):void {map.openInfoWindow(event.latLng,
new InfoWindowOptions({title: "Click Event", content: "You clicked the map!"}));}
• Marcadores
• Marcadores con eventos
private function onMapReady(event:Event):void {map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var markerA:Marker = new Marker(new LatLng(48.858842, 2.346997),new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x987654}),fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),radius: 12,hasShadow: true
}));map.addOverlay(markerA);
}
private function onMapReady(event:Event):void {map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var marker:Marker = new Marker(getCenter(), new MarkerOptions({draggable: true}));marker.addEventListener(MapMouseEvent.DRAG_START, function(event:Event):void {map.closeInfoWindow();
});
marker.addEventListener(MapMouseEvent.DRAG_END, function(event:Event):void {marker.openInfoWindow(new InfoWindowOptions({content:"Just bouncing along..."}));
});
map.addOverlay(marker);}
Iconos ‐> código
Polilíneas codificadas ‐> código
Polígonos ‐> código
Superposiciones de terreno ‐> código
• API de Google Maps para Flash:– http://code.google.com/intl/es‐ES/apis/maps/documentation/flash/
• Tutorial de configuración de FlexBuilder:– http://code.google.com/intl/es/apis/maps/documentation/flash/tutorial‐
flexbuilder.html
• Guía del desarrollador del API de Google Mapspara Flash:– http://code.google.com/intl/es/apis/maps/documentation/flash/intro.ht
ml
• Referencia del API para ActionScript:– http://code.google.com/intl/es/apis/maps/documentation/flash/referenc
e.html