Share
Después de una respuesta tan positiva a mi primer tutorial Implementar un mapa utilizando la API de Google Map para Flash, decidí escribir un segundo. Desde esa primera vez, la API de Google Map se ha actualizado, lo que permite a los desarrolladores (entre otras cosas) agregar la visualización 3D a los mapas. Esta es una gran característica y durante este tutorial explicaré cómo usarlo..
Además, muchas personas solicitaron una explicación para agregar marcadores personalizados; eso es lo segundo que discutiremos aquí hoy.
No seguiré construyendo en nuestro mapa anterior porque necesitamos descargar el nuevo componente de Google Map. No hay forma de usar el componente de mi tutorial anterior ya que ese no es compatible con las funciones 3D. Entonces ... vaya a http://code.google.com/intl/nl/apis/maps/documentation/flash/
Necesitamos instalar el componente SDK para usarlo en Flash. Para hacerlo, navegue hasta la ubicación donde guardó el componente SDK de Google Maps y busque la versión no flexible de la biblioteca de la interfaz. En mi caso esto es (lib / map_1_18.swc). Ahora copia el archivo "map_1_18.swc".
Luego, si tiene Flash actualmente abierto, salga de la aplicación y busque esta carpeta:
Dentro de esa carpeta, cree una nueva carpeta llamada "google" y pegue el archivo "map_1_18.swc" en su interior. Flash ahora está configurado para
soporta la API de Google Maps para Flash.
Ok, ahora tenemos el componente, pero antes de que podamos trabajar, todavía necesitamos una clave API de Google Map para que nuestro mapa funcione en línea. Una clave de API de Google Map es gratuita y puede obtener una aquí:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
Al hacer clic en el enlace "Registrarse para obtener una clave API de Google Maps" nos lleva a la página siguiente donde podemos generar nuestra clave API personal. Desplácese hacia abajo en la página, acepte los términos y condiciones (también puede leerlos si está realmente interesado) y agregue la URL del sitio web donde desea utilizar la aplicación (necesitará una clave API diferente para cada dominio donde quieres colocar un mapa). Después de eso, haga clic en "Generar clave de API".
Ahora verá su clave API personal para el dominio seleccionado. Copie la clave API y péguela o guárdela en algún lugar, ya que la necesitaremos muy pronto.
OK, el trabajo aburrido está hecho, ¡ahora podemos comenzar con las cosas divertidas! Vamos a sumergirnos en Flash y crear un nuevo archivo ActionScript 3.0, tamaño de escenario predeterminado (550 x 400).
Prefiero empezar guardando el archivo. Mientras trabajo, realmente me gusta presionar "Ctrl + S" todo el tiempo, así que adelante, pulsa
"Ctrl + S" o haga clic en "Archivo> Guardar" en el menú. Guárdalo en la ubicación que desees y ponle el nombre que desees Lo nombraré
"mapa de Google".
Abra el panel de Componentes "Ctrl + F7" o haga clic en Ventana> Componentes en el menú. Arrastra GoogleMapsLibrary a tu biblioteca.
Para mantenerme organizado me gusta cambiar el nombre de la primera capa a "acciones".
Con la capa de acciones seleccionada, abra el panel de acciones (presione "F9" o haga clic en "Ventana> Acciones") y agregue estas líneas de código:
importar com.google.maps.LatLng; importar com.google.maps.Map; importar com.google.maps.Map3D; importar com.google.maps.MapEvent; importar com.google.maps.MapType; importar com.google.maps.View; importar com.google.maps.geom.Attitude;
Ahora vamos a crear nuestra primera función. Primero queremos declarar nuestra variable de Mapa:
// Variables var map: Map3D;
Ahora podemos agregar nuestra función a la que llamaremos para agregar el mapa principal en el escenario:
// Función que agrega el mapa en la función de escenario add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (nuevo punto (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mapa);
De acuerdo, como puede ver, agregamos un listador de eventos que se activará una vez que se cargue nuestro mapa, así que también creamos esa función:
// La función que se activará una vez que se haya creado la función map onMapReady (evento: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (nueva Actitud (20,30,0));
Aquí hemos puesto el mapa al centro. Esta función tiene 3 valores y definirá la ubicación donde se abrirá el mapa. los
los valores son como este "map.setCenter (new LatLng (latitud, longitud), enfocar); ". Luego definimos el modo de vista;
Como estamos usando el nuevo mapa 3D, usaré la vista Perspectiva. Si le gusta una vista de mapa normal, puede cambiar este valor a
"View.VIEWMODE_2D".
Entonces ponemos la Actitud. Esto definirá cómo vemos el mapa. En este caso le agregaremos una pequeña vista en perspectiva y
gire el mapa un poco para crear un ángulo de visión más agradable. Puedes jugar un poco con estos valores y ver qué te gusta más.
OK, es hora de un primer cheque! ¿Qué tenemos hasta ahora? ¡Bien, nada todavía! Primero necesitamos llamar a nuestra función para crear el
¡mapa! Agreguemos esta línea de código justo debajo de nuestras variables:
// Variables var map: Map3D; // Llama a la función para crear el mapa add_map ();
¡Aquí vamos! Ahora solo pruebe su película "Ctrl + Enter" o haga clic en Control> Probar película en el menú ...
¡Sí! Tenemos un mapa ampliado en el aeropuerto de Bruselas! ¿No es genial? Quizás no ... Echemos un vistazo a lo que tenemos aquí. Tenemos el mapa y podemos arrastrar el mapa alrededor. Entonces, lo que necesitamos a continuación son herramientas para navegar por el mapa, acercar y alejar el mapa. Empecemos con esas herramientas de navegación primero.!
En primer lugar vamos a importar 3 clases extra; agregue estas líneas debajo del otro código de importación en nuestro script:
importar com.google.maps.controls.NavigationControl; importar com.google.maps.controls.MapTypeControl; importar com.google.maps.controls.OverviewMapControl;
No vaya a la función onMapReady () y agregue estas 3 líneas de código debajo de las otras líneas:
map.addControl (new MapTypeControl ()); map.addControl (nuevo OverviewMapControl ()); map.addControl (new NavigationControl ());
Aquí estamos agregando los controles de tipo de mapa, por lo que ahora podemos cambiar el tipo de mapa. Luego, agregamos un control de vista general del mapa a la parte inferior derecha de nuestro mapa. Y añadimos las herramientas de navegación del mapa. Este es nuestro código fuente completo como debería verse ahora:
importar com.google.maps.LatLng; importar com.google.maps.Map; importar com.google.maps.Map3D; importar com.google.maps.MapEvent; importar com.google.maps.MapType; importar com.google.maps.View; importar com.google.maps.geom.Attitude; importar com.google.maps.controls.NavigationControl; importar com.google.maps.controls.MapTypeControl; importar com.google.maps.controls.OverviewMapControl; // Variables var map: Map3D; // Llama a la función para crear el mapa add_map (); // Función que agrega el mapa en la función de escenario add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nuevo punto (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mapa); // Función que se activará una vez que se cree el mapa. Función onMapReady (evento: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nueva Actitud (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (nuevo OverviewMapControl ()); map.addControl (new NavigationControl ());
Sigue adelante y prueba tu película otra vez. Puedes ver que puedes moverte por el mapa muy fácilmente ahora con estos nuevos y modernos diseños.
controles!
Creo que es hora de pasar a la parte de los marcadores; un mapa sin marcadores es como un bar sin cerveza, ¿verdad? No hay cosas tontas esta vez! Pasemos a los marcadores personalizados de inmediato.!
Queremos colocar nuestros marcadores personalizados en el mapa con información que se almacenará en un archivo XML externo. Comencemos por crear un marcador personalizado, luego crearemos el archivo XML y luego lo cargaremos en Flash.
No soy un gran diseñador, así que creo que podrás crear un marcador mucho más genial que el que tengo. Es por eso que no voy a pasar demasiado tiempo en esto. Simplemente dibuje algunos círculos, colóquelos uno encima del otro, seleccione todo, presione F8, seleccione MovieClip, llámelo "marker_mc" y seleccione Exportar para Actionscript. Pulsa "OK".
Como mencioné anteriormente, ¡espero que creen un marcador más fresco y de mejor apariencia que este! Solo dibuja tu propio marcador y
convertirlo en un moviclip como se explicó anteriormente.
Una vez que hayas creado el movieclip, aparecerá en tu biblioteca. Luego puede borrarlo del escenario, ya que lo importaremos usando
ActionScript (por eso tuvo que seleccionar la opción "Exportar para ActionScript"). En nuestra biblioteca ahora tenemos 2 artículos; la
GoogleMapsLibrary y nuestro marker_mc.
Ok aqui estamos Tenemos un mapa y (en su caso) un marcador muy guapo! Ahora vamos a crear el archivo XML. Abra su editor de código favorito, cree este archivo y guárdelo como locations.xml.
50.899197766773284 4.486040573103489 Bruselas 49.004024443647324 2.571113562006575 París 51.4699229971675 -0.45367874251784013 Londres
Necesitamos obtener los datos XML en nuestra película flash. Para hacerlo necesitamos crear una nueva función que cargará nuestro xml. Añadir
Esta pieza de código al final del script. Dentro de nuestra función onMapReady () llamamos a esta nueva función load_xml (). Una vez que nuestro mapa esté listo, comenzaremos a cargar el xml..
Accentsconagua
// Función que cargará la función xml loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); function load_xml () var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (nueva URLRequest ("locations.xml")); Como tenemos 3 ubicaciones en nuestro archivo XML, deberemos crear un bucle "Para" y almacenar todos los datos en algunos Arrays. Dentro de nuestro
En la función loadXML () agregamos este fragmento de código para crear el bucle For:
para (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip);
Si probamos nuestra película ahora, podemos ver que nuestra película muestra los datos xml. Ahora vamos a trabajar con eso.
Luego tenemos que crear algunas variables para almacenar nuestros datos cargados desde el archivo XML. Dentro de nuestro bucle For agregamos estas variables:
var latlng: LatLng = new LatLng (map_xml.location [i] .lat, map_xml.location [i] .lon); var tip = map_xml.location [i] .name_tip; var myTitle: String = map_xml.location [i] .title_tip; var myContent: String = map_xml.location [i] .content_tip;
Puede eliminar la línea "trace ()" que usamos antes porque sabemos que las cosas están funcionando.
Ahora que tenemos todos nuestros datos xml almacenados en variables, podemos volver a cargar nuestros marcadores en el mapa. Primero agregamos algunas clases extra a nuestro código. Agregue este pedazo de código en las otras clases:
importar com.google.maps.overlays. *; importar com.google.maps.InfoWindowOptions; importar com.google.maps.MapMouseEvent;
Crea una nueva función llamada createMarker (). Queremos agregar esta función justo antes de nuestra función loadXML ().
// Agregar marcadores en la función de mapa createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, información sobre herramientas: "" + propina ) ); regreso i;
Podemos llamar a la función createMarker () para cada marcador que necesitamos agregar al mapa, así que dentro de nuestro For Loop agregamos esta línea de código:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
¡Si prueba la película ahora, puede ver que tenemos marcadores en nuestro mapa en las ubicaciones que especificamos en nuestro archivo xml! Eso es genial, pero no creamos ese gran marcador personalizado para nada, ¿verdad? Eliminaremos esos marcadores estándar y agregaremos nuestros marcadores personalizados..
Primero necesitamos crear nuestro objeto marcador personalizado. Agregue este código en la función createMarker (), encima del resto del código:
// crear un marcador marcador personalizado var markerPin: marker_mc = new marker_mc (); // Si tu marcador es demasiado grande, puedes reducirlo aquí markerPin.width = 20; markerPin.height = 20;
Luego, iremos al siguiente fragmento de código donde tenemos que agregar una línea a las opciones de marcador. Busca este código:
nuevas MarkerOptions (hasShadow: true, tooltip: "" + tip)
y cambiarlo a:
nuevas MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), información sobre herramientas: "" + tip)
¡De acuerdo! Prueba tu película y comprueba el resultado.!
Ok que sigue Las ventanas de información! Cuando hacemos clic en nuestro marcador, necesitamos obtener la información que agregamos a nuestro archivo XML. Antes de agregar las ventanas de información, solo quiero eliminar esa fea línea amarilla alrededor de nuestro mapa, ¿ya lo notó? Cuando te enfocas en el mapa, se muestra una línea amarilla a su alrededor. Personalmente, realmente no me gusta eso, así que vamos a eliminarlo. Solo agregue esta línea de código en nuestra sección de variables:
// No hay línea de enfoque stage.stageFocusRect = false;
Ok eso es hecho! Vamos a añadir ventanas de información. Agregue un poco más de código a nuestra función createMarker ():
i.addEventListener (MapMouseEvent.CLICK, function (evento: MapMouseEvent): void map.openInfoWindow (event.latLng, nueva InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));));
Así es como se ve nuestra función createMarker () ahora:
function createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker // create Custom marker object var markerPin: marker_mc = new marker_mc (); // Si tu marcador es demasiado grande, puedes reducirlo aquí markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), información sobre herramientas: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (evento: MapMouseEvent): void map.openInfoWindow (event.latLng, nueva InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));)); regreso i;
Prueba tu película y ahora también tendrás ventanas de información.
¡Bueno, eso es todo! Enhorabuena, ¡acaba de crear un mapa de Google con navegación 3D y marcadores personalizados! ¡Muy buen trabajo! Tengamos una
última mirada a nuestro código:
importar com.google.maps.LatLng; importar com.google.maps.Map; importar com.google.maps.Map3D; importar com.google.maps.MapEvent; importar com.google.maps.MapType; importar com.google.maps.View; importar com.google.maps.geom.Attitude; importar com.google.maps.controls.NavigationControl; importar com.google.maps.controls.MapTypeControl; importar com.google.maps.controls.OverviewMapControl; importar com.google.maps.overlays. *; importar com.google.maps.InfoWindowOptions; importar com.google.maps.MapMouseEvent; // Variables var map: Map3D; // No hay línea de enfoque stage.stageFocusRect = false; // Llama a la función para crear el mapa add_map (); // Función que agrega el mapa en la función de escenario add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nuevo punto (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (mapa); // Función que se activará una vez que se cree el mapa. Función onMapReady (evento: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nueva Actitud (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (nuevo OverviewMapControl ()); map.addControl (new NavigationControl ()); // Cargar el xml load_xml (); // Agregar marcadores en la función de mapa createMarker (latlng: LatLng, número: Number, tip, myTitle, myContent): Marker // create Custom marker object var markerPin: marker_mc = new marker_mc (); // Si tu marcador es demasiado grande, puedes reducirlo aquí markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), información sobre herramientas: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (evento: MapMouseEvent): void map.openInfoWindow (event.latLng, nueva InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));)); regreso i; // Función que cargará la función xml loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); para (var i: Number = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng, i, tip, myTitle, myContent)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Puede usar este mapa en su sitio web, editar las ubicaciones como desee, depende de usted. Continúe y experimente, si tiene resultados interesantes, asegúrese de compartirlos con nosotros..
Espero que te haya gustado este tutorial, gracias por leerlo.!
