Hola developers vamos a hacer un MKMapView
EJERCICIO 12: MKMapView en XCode
Comenzamos el ejercicio 12 creando un nuevo proyecto de la forma habitual : file - new proyect - View based application o single view application, depende de la versión.
Nos tocará importar a nuestra libreria un par de frameworks, esto se hace clickando en el proyecto - Build Phases - Link Binary With Libraries.
Le damos al +, y buscamos los que nos interesen.
El primero es MapKit.framework para el mapa.
El segundo es CoreLocation.framework para las localizaciones.
Ya está, arrastramos un MKMapView a nuestro storyboard, nuestros frameworks ya han aparecido en la carpeta Frameworks, ejecutamos el proyecto y... este es el resultado :
Ahora bien, si queremos acercarnos, doble click, para alejarnos, pulsamos alt y aparecen dos bolitas, dependiendo de cómo de alejadas estén, se verá mas lejos, cuanto más cerca estén, mas cerca se verá.
Configuramos la conexion para el view Controller.h
// ViewController.h // Mapkit //@interface ViewController : UIViewController @property (weak, nonatomic) IBOutlet MKMapView *mapa; @end
Vamos ahora a cambiar el mapa de nuestra aplicación,por defecto aparecen los EEUU, pero queremos que aparezca nuestra bendita España, una bella tierra, aunque se la estén cargando estos malditos politicos corruptos... en fin. Yo he cogido de Google Maps las coordenadas de Madrid :
@implementation ViewController
@synthesize mapa;
- (void)viewDidLoad
{
[super viewDidLoad];
//Configuramos la region que queremos delimitar de nuestro mapa
MKCoordinateRegion region;
//La altura a la que vamos a mostrar nuestro mapa
MKCoordinateSpan altura;
altura.latitudeDelta = 4;
altura.longitudeDelta = 4;
region.span=altura;
//LOCALIZACION
CLLocationCoordinate2D localizacion;
localizacion.latitude= 40.4378271;
localizacion.longitude=-3.679566;
region.center=localizacion;
//ASIGNAMOS LA REGION AL MAPA
[mapa setRegion:region animated:YES];
}
Vualá!! ya tenemos nuestro MKMapView!!
Este mapa se puede poner en modo normal, por satélite o híbrido así que añadimos un elemento llamado Toolbar a nuestro mapa para poder cambiarlo.A ese elemento Tool Bar, le añadimos dos Bar Button Item, uno llamado mapa y otro Híbrido. Si además añadimos un Flexible Space Bar Button Item entre ellos y pegando a los bordes, nos separará los botones de una manera proporcional, para que queden situados perfectamente.
Ahora para darle funcionalidad a los botones vamos al .m a implementar la lógica de los botones, aunque primero asignamos un Tag a cada botón (1,2 y 3 respectivamente). Vamos a hacer una funcion que haga de IBACTION, en el .h
//CREAMOS UN IBAction, que es la función que hace de botón -(IBAction) BotonTipMap:(id) sender;
Y en vez de hacer las conexiones como IBOutlet de los items del ToolBar arrastramos pulsando control dentro de la función, para asignarle los elementos.
Vamos a desarrollar la función en el .m para que según se pulse un botón, se ponga el mapa solo, satélite o un híbrido :
-(IBAction) BotonTipMap:(id) sender{
//Creamos el botron que referencia el id
UIBarButtonItem *item=(UIBarButtonItem *)sender;
if (item.tag==1) {
[mapa setMapType:MKMapTypeSatellite];
}else if (item.tag==2){
[mapa setMapType:MKMapTypeStandard];
}else if (item.tag==3){
[mapa setMapType:MKMapTypeHybrid];
}
}
Y para finalizar, vamos a ponerle un punto sobre el mapa de localizacion, se pueden crear tantos como queramos, siempre añadiendo objetos nuevos, este código va en la función ViewDidLoad :
//PUNTO DE LOCALIZACION
//Creamos coordenada con latitud y longitud
CLLocationCoordinate2D PuntoCoordenada = CLLocationCoordinate2DMake(region.center.latitude, region.center.longitude);
//Creamos el pivote
MKPointAnnotation *pivote = [[MKPointAnnotation alloc] init];
//Le asignamos la coordenada
[pivote setCoordinate:PuntoCoordenada];
//Le ponemos titulo y subtitulo
[pivote setTitle:@"MadrizZzZzZ"];
[pivote setSubtitle:@"Capital de España"];
//Lo introducimos en el mapa
[self.mapa addAnnotation:pivote];
Y aquí tenemos nuestro mapa maqueadito chulo :
De maqueadito a maqueado hay una gran diferencia, para ello vamos a indagar en la clase delegada de la aplicación, vamos a usar nuestro ViewController como clase delegada, para que podamos usar los métodos delegados del MapView, es decir los métodos que se ejecutan cuando se ejecuta un MapView, cuando se mueve, cuando sucede algun evento.... en el ViewController.m, en el método viewDidLoad ponemos :
mapa.delegate=self;
pero nos saldrá error, eso es porque en el .h tenemos que hacer que herede de MKMapViewDelegate
@interface ViewController : UIViewController@property (weak, nonatomic) IBOutlet MKMapView *mapa; @end
Ya podemos customizar un poquito nuestro mapa, vamos a usar una clase para ello, en el viewController.m dentro de la función he puesto para que se anime el pivote.
//MÉTODO PARA CUSTOMIZAR EL CUADRO DEL PIVOTE - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id)annotation{ //OBJETO MKPinAnnotation *pinView = [[MKPinAnnotationView alloc] intiWithAnnotation:annotation reuseIdentifier:@"curr"]; //PROPIEDAD PARA ANIMAR EL PIVOTE, EN ESTE CASO QUE SE DEJE CAER pinView.animatesDrop=YES //PROPIEDAD PARA PONER OTRO COLOR AL PIVOTE pinView.pinColor = MKPinAnnotationColorPurple; return pinView; }
Hemos cambiado unas cuantas propiedades, pero si ejecutamos el proyecto al pulsar sobre el pivote a diferencia de antes, no aparece nada, eso es porque le hemos dicho que use la vista pinView, entonces hay que decirle que cargue lo que anteriormente teníamos.Añadimos también una imágen, primero hay que añadirla al proyecto :
//MÉTODO PARA CUSTOMIZAR EL CUADRO DEL PIVOTE - (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id)annotation{ //OBJETO MKPinAnnotation *pinView = [[MKPinAnnotationView alloc] intiWithAnnotation:annotation reuseIdentifier:@"curr"]; //PROPIEDAD PARA ANIMAR EL PIVOTE, EN ESTE CASO QUE SE DEJE CAER pinView.animatesDrop=YES //PROPIEDAD PARA PONER OTRO COLOR AL PIVOTE pinView.pinColor = MKPinAnnotationColorPurple; //PARA QUE CARGUE LA ANTERIOR pinView.canShowCallout = YES; //AÑADIR IMAGEN UIImageView *imagen [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"madrid.jpg"]]; //CONFIGURAMOS LAS DIMENSIONES FRAME IMAGEN [imagen setFrame:CGRectMake(0,0,50,50)]; //INSERTAMOS IMAGEN pinView.leftCalloutAccessoryView = imagen; return pinView; }
-(IBAction)BotonDinamico:(id)sender{
exit();
}
//MÉTODO PARA CUSTOMIZAR EL CUADRO DEL PIVOTE
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id)annotation{
//OBJETO
MKPinAnnotation *pinView = [[MKPinAnnotationView alloc] intiWithAnnotation:annotation reuseIdentifier:@"curr"];
//PROPIEDAD PARA ANIMAR EL PIVOTE, EN ESTE CASO QUE SE DEJE CAER
pinView.animatesDrop=YES
//PROPIEDAD PARA PONER OTRO COLOR AL PIVOTE
pinView.pinColor = MKPinAnnotationColorPurple;
//PARA QUE CARGUE LA ANTERIOR
pinView.canShowCallout = YES;
//AÑADIR IMAGEN
UIImageView *imagen [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"madrid.jpg"]];
//CONFIGURAMOS LAS DIMENSIONES FRAME IMAGEN
[imagen setFrame:CGRectMake(0,0,50,50)];
//INSERTAMOS IMAGEN
pinView.leftCalloutAccessoryView = imagen;
//CREAMOS BOTON DE FORMA DINAMICA
UIButton *boton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
[boton addTarget:self action:@selector(BotonDinamico:) forControlEvents:UIControlEventTouchUpInside];
//INSERTAMOS BOTON A LA IZQUIERDA
pinView.leftCalloutAccessoryView = boton;
return pinView;
}
Y este es el resultado :
|
Indice
|
Ejercicio anterior |
Siguiente ejercicio |
Este comentario ha sido eliminado por el autor.
ResponderEliminarhola! me encanto este post.
ResponderEliminarAndo buscando hacer algo similar, pero ando aprendiendo Swift.
Podrías hacer algo similar pero usando Swift en lugar de Objetive - C?