GoogleMaps + AS3
Posted by Administrador | Filed under Actionscript 3.0
Hola a todos, aquí os dejo un ejemplo para que os lo podáis descargar y trastear,
se trata de un mini ejercicio para poder insertar googlemaps en flash. Decir que está
programado con AS3. He deshabilitado opciones que tenia más desarrolladas para que fuera más sencillo de entender y no liaros tanto. Podéis hacer zoom, hacer una búsqueda, cambiar de vista, moveros por el dragPanel, y ver como se posiciona una marca customizada.
Este seria el código que como veréis no es muy complejo ni muy largo. Más adelante quizás incorporo alguna utilidad más como poner videos o que se yo :p…
/*
* BUSCADOR GOOGLE MAPS WITH AS3
*
* @author Isaac León (KAAX)
* @version 1.0.0
* @code AS 3.0
* @email hola@isaacleon.com
* @url www.isaacleon.com
* @blog www.isaacleon.com/blog
*/
package com.kaax.clases {
//IMPORTS//////////////////////////////////////////////////////////////////////////////////////////////////////////////
import com.google.maps.controls.*;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import flash.display.Sprite;
import flash.events.Event;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.*;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapType;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import flash.display.Stage;
public class Buscador{
//INICIALIZAMOS VARIABLES//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ESTA APPYKEY TENÉIS QUE CAMBIARLA POR LA VUESTRA PARA QUE ESTÉ ASOCIADA A VUESTRO DOMINIO
private var appyKey:String ="ABQIAAAA6wzkJ5pSCnsden7rffzX1BSZMDsZNlBtwbn4yRg11-JRawRw8BSe_1VnBDtJk4ejkS6488Fc0fGzgQ";
private var map:Map;
private var punto:Marker;
private var geo:ClientGeocoder;
private var gps:MovieClip;
private var control:MovieClip;
private var mcStage:Stage;
public function Buscador( _mc:Sprite, control:MovieClip, gps:MovieClip){
this.mcStage = _mc.stage;
this.control=control;
this.gps=gps;
}
//INICIAMOS LOS OBJETOS EN ESCENA
public function main():void {
// CREAMOS UN CONTENEDOR PARA EL MAPA
var puntoMapa:MovieClip = new MovieClip();
puntoMapa.x = 235;
puntoMapa.y = 175;
this.mcStage.addChild(puntoMapa);
//AÑADIMOS EL MAPA A SU CONTENEDOR
map = new Map();
map.key = appyKey;
map.setSize(new Point(573, 420));
map.addEventListener(MapEvent.MAP_READY, iniciarMapa);
puntoMapa.addChild(map);
//AÑADIMOS AL ESCENARIO LOS DOS ASSETS, LA PANTALLA DEL GPS Y EL PANEL DE CONTROL
gps.buttonMode = false;
gps.mouseChildren = false
gps.x = 133;
gps.y = 60;
this.mcStage.addChild(gps);
gps.mouseEnabled = false;
control.x = 133;
control.y = 60+gps.height;
this.mcStage.addChild(control);
control.bt_buscar.buttonMode=true;
}
public function colocamosPuntoInicial():void{
map.clearOverlays();
//CREAMOS ESTILOS PARA EL PUNTO
var estilos:MarkerOptions = new MarkerOptions({
strokeStyle: {
color: 0×8F053D
},
fillStyle: {
color: 0×000000,
alpha: 0.8
},
label: "Hi ! ",
labelFormat: {
color: 0xffffff,
size:20,
bold: true
},
radius: 32,
hasShadow: true,
clickable: false,
draggable: true,
gravity: 0.5,
distanceScaling: false
});
// CREAMOS UN PUNTO EN EL LUGAR ESPECIFICADO
punto= new Marker(new LatLng(41.387917,2.1699187),estilos);
//TEXTO PARA EL TOOLTIP
var fraseTooltip:String = "Bienvenido a Barcelona!" ;
// SI PULSAS LA MARCA APARECE EL TOOLTIP CON EL MENSAJE DE TEXTO
punto.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {;
map.openInfoWindow(event.latLng, new InfoWindowOptions({tailAlign: InfoWindowOptions.ALIGN_CENTER, contentHTML:fraseTooltip }));
});
map.addOverlay(punto);
}
// INICIALIZAMOS EL MAPA
public function iniciarMapa(event:Event):void {
map.removeEventListener(MapEvent.MAP_READY, iniciarMapa);
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.setCenter(new LatLng(41.387917,2.1699187), 14, MapType.NORMAL_MAP_TYPE);
//COLOCAMOS LA LANGITUD Y LA LATITUD EN EL PANEL DE CONTROL CON SOLO 3 DECIMALES
control.long.text = (41.387917).toFixed(3);
control.lat.text = (2.1699187).toFixed(3);
colocamosPuntoInicial();
//AÑADIMOS CONTROLES AL MAPA
map.addControl(new OverviewMapControl());// CONTROL PARA ARRSTRAR EL MAPA POR ZONAS
map.addControl(new MapTypeControl());// CONTROLES PARA CAMBIAR LAS VISTAS
map.addControl(new PositionControl());// CONTROLES PARA NAVEGAR DE FORMA DIRECCIONAL
map.addControl(new ZoomControl());// CONTROLES PARA EL ZOOM
//INICIALIZAMOS EL OBJETO CLIENTGEOCODER
geo = new ClientGeocoder();
// BOTON DE BUSQUEDA
control.bt_buscar.addEventListener(MouseEvent.CLICK, buscar);
// EN CASO DE ÉXITO O ERROR, LLAMAREMOS ACTUAREMOS DEPENDIENDO DEL RESULTADO
geo.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, exitoBusqueda);
geo.addEventListener(GeocodingEvent.GEOCODING_FAILURE, errorBusqueda);
}
public function buscar(event:Event):void {
//LLAMAMOS A LA FUNCION QUE NOS DEVUELVE LA LATITUD Y LA LONGITUD DE UNA DIRECCIÓN BUSCADA
geo.geocode(control.direccion.text);
control.mensaje.text = "BUSCANDO...";
}
public function errorBusqueda(event:GeocodingEvent):void {
//DAMOS UN MENSAJE DE ERROR EN EL CASO DE NO ENCONTRAR UNA DIRECCION
control.mensaje.text = "DIRECCION INCORRECTA";
}
public function exitoBusqueda(event:GeocodingEvent):void {
//OCULTAMOS MENSAJE DE BUSCANDO
control.mensaje.text = "";
//SI SE HA ENCONTRADO LA DIRECCIÓN COLOCAMOS UNA MARCA Y COMO ES POSIBLE QUE HAYAN VARIOS LUGARES
//QUE SE LLAMEN DE LA MISMA FORMA, COLOCAREMOS EL PRIMER RESULTADO DEL ARRAY
if (event.response.placemarks.length > 0) {
map.clearOverlays();
//CENTRAMOS EL MAPA EN LA DIRECCIÓN BUSCADA CON EL ZOOM QUE LE INDIQUEMOS
map.setCenter(event.response.placemarks[0].point, 7);
//CREAMOS ESTILOS PARA EL PUNTO
var estilos:MarkerOptions = new MarkerOptions({
strokeStyle: {
color: 0×8F053D
},
fillStyle: {
color: 0×000000,
alpha: 0.8
},
label: "Hi ! ",
labelFormat: {
color: 0xffffff,
size:14,
bold: true
},
radius: 26,
hasShadow: true,
clickable: false,
draggable: false,
gravity: 0.5,
distanceScaling: false
});
// CREAMOS UN PUNTO EN EL LUGAR ESPECIFICADO Y LE PASAMOS ESTILOS
punto= new Marker(event.response.placemarks[0].point,estilos);
//TEXTO PARA EL TOOLTIP
var html:String = "Bienvenido a " + control.direccion.text;
// SI PULSAS LA MARCA APARECE EL TOOLTIP CON EL MENSAJE DE TEXTO
punto.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
map.openInfoWindow(event.latLng, new InfoWindowOptions({tailAlign: InfoWindowOptions.ALIGN_CENTER, contentHTML:html }));
});
//AÑADIMOS PUNTO
map.addOverlay(punto);
}
//COLOCAMOS LA LANGITUD Y LA LATITUD EN EL PANEL DE CONTROL CON SOLO 3 DECIMALES
control.long.text = (event.response.placemarks[0].point.lng()).toFixed(3);
control.lat.text = (event.response.placemarks[0].point.lat()).toFixed(3);
}
}
}
Espero que os guste!
saludos!
Ver Buscador
Descargar Buscador
Enero 9th, 2009 at 11:26 am
[...] Podéis descargar el archivo y el código aquí. [...]
Enero 14th, 2009 at 4:30 pm
[...] Descargar buscador y código [...]
Enero 14th, 2009 at 8:44 pm
[...] Codigo y Ejemplo [...]
Enero 15th, 2009 at 12:28 am
Wow! muy buen ejemplo (y)
Enero 24th, 2009 at 12:32 am
espectacular el tutorial, la verdad es hace rato q te sigo y siempre q publicas algo, es espectacular, espero poder seguir viendo buenos aportes como este.
saludos
Febrero 3rd, 2009 at 10:23 am
me alegro de que os guste!!
un saludo!!
Junio 10th, 2009 at 10:58 pm
Hola, tengo un problema, Al intentar abrir el fichero no puedo, me da error, seguramente es porque tengo el Flash CS3 y esta hecho en el 4. Tienes un archivo para la versión que utilizo?
Muchisimas gracias, y un gran trabajo.