Inicio Android Mapas en Android (II): Control MapView

Mapas en Android (II): Control MapView

por sgoliver

[box type=»alert» border=»full»]Este artículo ha quedado obsoleto con la aparición de la segunda versión de la API de Google Maps para Android. Tienes disponible tres nuevos artículos del curso (IIIIII) donde aprender a utilizar esta nueva API.[/box]

En el artículo anterior del curso, ya dimos los primeros pasos necesarios para configurar un proyecto de Eclipse de forma que pudiéramos utilizar la API de Google Maps desde nuestras aplicaciones. Vimos además cómo crear una aplicación de ejemplo muy básica en la que mostrábamos un mapa y permitíamos su manipulación mendiante los gestos del usuario o los controles de zoom por defecto.

En este artículo nos centraremos en comentar los diferentes métodos y propiedades del control MapView con los que podremos manipular un mapa desde el código de nuestra aplicación.

Veamos en primer lugar cómo ajustar algunas propiedades del control para ajustarlo a nuestras necesidades. Por defecto, cuando añadimos un control MapView a nuestra aplicación éste muestra en el modo de mapa tradicional, sin embargo, el control también nos permite cambiar por ejemplo a vista de satélite, marcar las zonas disponibles en StreetView, o mostrar la información del tráfico. Esto lo conseguimos mediante los siguientes métodos:

  • setSatellite(true)
  • setStreetView(true)
  • setTraffic(true)

Por supuesto existen también otros tres métodos para consultar el estado de cada uno de estos modos: isSatellite(), isStreetView() e isTraffic().

En este artículo voy a continuar ampliando la aplicación de ejemplo que construimos en el artículo anterior, al que añadiremos varios botones para realizar diferentes acciones. Así, por ejemplo vamos a incluir un botón para alternar en nuestro mapa entre vista normal y vista de satélite.

private Button btnSatelite = null;
//...
btnSatelite = (Button)findViewById(R.id.BtnSatelite);
//...
btnSatelite.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View arg0) {
		if(mapa.isSatellite())
			mapa.setSatellite(false);
		else
			mapa.setSatellite(true);
	}
});

Si ejecutamos la aplicación en este momento y probamos el nuevo botón veremos cómo se visualiza sin problemas nuestro mapa en vista de satélite:

mapas-satelite

Además de la elección del tipo de vista de mapa a mostrar en el control, también podemos elegir si queremos mostrar controles de zoom sobre el mapa. Para ello llamaremos al método setBuiltInZoomControls() indicando si queremos que se muestren o no los controles de zoom:

//Mostramos los controles de zoom sobre el mapa
mapa.setBuiltInZoomControls(true);

Al margen de las propiedades para personalizar el aspecto gráfico del control también dispondremos de varios métodos para consultar la información geográfica visualizada en el mismo. Así,por ejemplo, podremos saber las coordenadas geográficas en las que está centrado actualmente el mapa [método getMapCenter()] y el nivel de zoom que está aplicado [método getZoomLevel()].

//Obtenemos el centro del mapa
GeoPoint loc = mapa.getMapCenter();

//Latitud y Longitud (en microgrados)
int lat = loc.getLatitudeE6();
int lon = loc.getLongitudeE6();

//Nivel de zoom actual
int zoom = mapa.getZoomLevel();

Como vemos en el código anterior, las coordenadas del centro del mapa se obtienen en forma de objeto GeoPoint, que encapsula los valores de latitud y longitud expresados en microgrados (grados * 1E6). Estos valores se pueden obtener mediante los métodos getLatitudeE6() y getLongitudeE6() respectivamente.

Por su parte, el nivel de zoom se obtiene como un valor entero entre 1 y 21, siendo 21 el que ofrece mayor nivel de detalle en el mapa.

Sin embargo, si miramos la documentación de la API de la clase MapView veremos que no existen métodos para modificar estos valores de centro y zoom del mapa. ¿Cómo podemos entonces modificar la localización mostrada en el mapa? Pues bien, para esto habrá que acceder en primer lugar al controlador del mapa, algo que conseguimos mediante el método getController(). Este método nos devolverá un objeto MapController con el que sí podremos modificar los datos indicados. Así, contaremos con los métodos setCenter() y setZoom() al que podremos indicar las coordenadas centrales del mapa y el nivel de zoom deseado.

Vamos a incluir en la aplicación de ejemplo un nuevo botón para centrar el mapa sobre un punto determinado (Sevilla) y aplicaremos un nivel de zoom (10) que nos permita distinguir algo de detalle.

private Button btnCentrar = null;
private MapController controlMapa = null;
//...
btnCentrar = (Button)findViewById(R.id.BtnCentrar);
//...
controlMapa = mapa.getController();
//...
btnCentrar.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View arg0) {
		Double latitud = 37.40*1E6;
		Double longitud = -5.99*1E6;

		GeoPoint loc =
			new GeoPoint(latitud.intValue(), longitud.intValue());

		controlMapa.setCenter(loc);
		controlMapa.setZoom(10);
	}
});

Como vemos, para establecer el punto central del mapa construiremos un objeto GeoPoint a partir de los valores de latitud y longitud y lo pasaremos como parámetro al método setCenter().

mapas-centrar-sevilla

Si ejecutáis la aplicación en el emulador podréis comprobar que funciona perfectamente de la forma esperada, sin embargo, el desplazamiento y zoom a la posición y nivel indicados se hace de forma instantanea, sin ningún tipo de animación.

Para resolver esto, la API nos ofrece otra serie de métodos que nos permitirán desplazarnos a una posición específica de forma progresiva y a subir o bajar el nivel de zoom de forma «animada», tal como se realiza al pulsar los botones de zoom del propio mapa. Estos métodos son animateTo(GeoPoint), que desplazará el mapa hasta un punto determinado, y zoomIn()/zoomOut() que aumentará o disminuirá en 1 el nivel de zoom de forma progresiva.

Teniendo esto en cuenta, añadamos un nuevo botón para hacer algo análogo al anterior pero de forma progresiva:

private Button btnAnimar = null;
//...
btnAnimar = (Button)findViewById(R.id.BtnAnimar);
//...
btnAnimar.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View arg0) {
		Double latitud = 37.40*1E6;
		Double longitud = -5.99*1E6;

		GeoPoint loc =
			new GeoPoint(latitud.intValue(), longitud.intValue());

		controlMapa.animateTo(loc);

		int zoomActual = mapa.getZoomLevel();

		for(int i=zoomActual; i<10; i++)
			controlMapa.zoomIn();
	}
});

Por último, disponemos de otro método que en ocasiones puede ser interesante y que nos permitirá desplazar el mapa, no a una posición específica, sino un determinado número de pixeles en una u otra dirección, al igual que conseguiríamos mediante gestos con el dedo sobre el mapa. Este método se llama scrollBy() y recibe como parámetros el número de pixeles que queremos desplazarnos en horizontal y en vertical.

Así, por ejemplo, podemos añadir un nuevo botón a la aplicación de ejemplo, que desplace el mapa 40 píxeles hacia la derecha y hacia abajo, de la siguiente forma:

private Button btnMover = null;
//...
btnMover = (Button)findViewById(R.id.BtnMover);
//...
btnMover.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View arg0) {
		controlMapa.scrollBy(40, 40);
	}
});

En este artículo hemos aprendido a manipular desde nuestro código un control MapView, tanto a través de sus propiedades como de las acciones disponibles desde su controlador. En el próximo artículo veremos cómo podemos añadir capas a nuestro mapa de forma que podamos dibujar sobre él por ejemplo marcas de posición, o responder eventos de pulsación sobre el control.

El código fuente de este artículo podéis descargarlo desde este enlace.

Curso de Programación Android en PDF

Este curso también está disponible en PDF. Descubre cómo conseguirlo…

¿Te ha sido de utilidad el Curso de Programación Android? ¿Quieres colaborar de forma económica con el proyecto? Puedes contribuir con cualquier cantidad, unos céntimos, unos euros, cualquier aportación será bienvenida. Además, si tu aportación es superior a una pequeña cantidad simbólica recibirás como agradecimiento un documento con la última versión del curso disponible en formato PDF. Sea como sea, muchas gracias por colaborar!

Más información:

You may also like

9 comentarios

Desarrollo en Android | sgoliver.net blog 27/05/2011 - 13:10

[…] Mapas en Android (II): Control MapView [Nuevo!] […]

Responder
juan 29/05/2011 - 4:28

excelente el tutorial.. esperemos a que sigan colocando videotutoriales !! gracias !!!!

Responder
joselowolf 30/05/2011 - 17:14

Gracias! exelecte tutorial. solo tengo dos preguntas.

la primera.

aunque tengo
mapa.setBuiltInZoomControls(true);

no aparece los controles de zoom.

¿que puede ser?

la segunda
¿como puedo desplazar el mapa con el dedo?

la tercera

¿como puedo poner marcas?

Responder
joselowolf 30/05/2011 - 17:14

Gracias con el tutorial..

solo faltaria como agragar marcas

Responder
katerine 01/11/2011 - 8:57

Disculpe porque el googlemaps de mi aplicacion solo se ve en el emulador de la computadora pero en un movil android real no se puede ver, solo sale el marcador y el mapa sale blanco, esta activo internet y todo y aun asi nada , le agradeceria mucho si me dice por favor. :(

Responder
Mapas en Android (III): Overlays (Capas) | sgoliver.net blog 21/11/2011 - 20:09

[…] mostrar un ejemplo vamos a seguir trabajando con la misma apliación de ejemplo del artículo anterior, al que añadiremos algún marcador sobre el mapa. Para no complicar mucho el ejemplo, añadiremos […]

Responder
daniel 18/01/2012 - 18:23

En la animacion del zoom tenemos posibilidad de modificar la velocidad del zoom?

Responder
Paco 24/03/2012 - 13:07

No funciona solo me sale el mapa en blanco el http://schemas.android.com/apk/res/android no existe por favor ayuda

Responder
cristian 27/05/2012 - 20:22

Hola, no se olviden cambiar su API key, para que les muestre el mapa. Gracias por el tutorial!!

Responder

Dejar un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies