Tutorial IOS: Introdução ao MapKit API e adicionando anotações ao Mapa

On 19 de agosto de 2014 by Conrado Carneiro

Criando um projeto e o design da Interface!
Crie um projeto usando o template “Single View” conforme indicado na imagem a seguir:

Captura de Tela 2014-08-19 às 10.33.03
Na tela seguinte preencha o nome do Projeto (Product Name), Organização (Organization Name) e Identificação da Companhia (Company Identifier). Selecione o tipo de device que será utilizado, no nosso modelo faremos apenas para iPhone. Por fim clique em next e create.!

Com o projeto criado, devemos abrir o arquivo Main.Storyboatd e en seguida vamos agora adicionar um navigation Controller para gerenciar as telas da nossa aplicação. Para fazer isso basta ir no menu Editor -> Embed In -> Navigation controller. O resultado da storyboard será semelhante ao indicado a baixo:

Captura de Tela 2014-08-19 às 10.46.27

Agora, vamos adicionar ao View Controller o objeto responsável em exibir o mapa, para isso arraste o item Map View para o View Controller, conforme indicado a seguir:

Captura de Tela 2014-08-19 às 10.47.00

Vamos configurar nosso map, para sempre exibir a posição atual do usuário, para isso, basta seguir os seguintes passos e o primeiro deles é selecionar (1) a MKMapView que foi adicionada no passo anterior:
Em seguida selecione o menu indicado no item (2) e marque a opção Shows User Location (3)

Captura de Tela 2014-08-19 às 10.47.41

Agora precisamos adicionar os frameworks do mapa, para isso selecione o nome do projeto no menu a esquerda, na tela que será exibida vá nas opções Liked Frameworks and Libraries e clique no botão “+” e adicione os frameworks MapKit.framework e CoreLocation.framework!

Captura de Tela 2014-08-19 às 10.48.41

Por ultimo, precisamos linkar o delegate do framework a interface, isso será muito importante para que o comportamento do Map, seja definido por funções disponíveis no framework. Um exemplo disse, seria por exemplo, para adicionar anotações no mapa em uma determinada região.

Para Linkar o delegate, vá no arquivo Main.storyboard (1) selecione a view (2) do mapa MKMapView e em seguida no menu a direita selecione a aba: “Show the Connections Inspector” (3) em seguida clique no delegate e arrasta até a view, conforme podemos notar na image (4):

Captura de Tela 2014-08-19 às 10.49.22

Execute o projeto no Simulador iOS e um mapa será exibido, para simular uma posição no mapa basta ir no Menu: Debug -> Location -> Custom Location ou utilize uma localização já sugerida.

Captura de Tela 2014-08-19 às 10.50.04

Vamos agora colocar um pouco de programação no projeto, selecione o Main.storyboard (1), e habilite o modo de assistente de editor (Assistant editor) (2), certifique-se que o modo de edição está automático (3) e que o arquivo para edição seja o .h (4), conforme indicado na image a baixo.

Captura de Tela 2014-08-19 às 10.50.37

Feito isso, selecione o MKMapView na Storyboard pressione a tecla CONTROL e arraste até a tela do código, ao soltar um balão será exibido:

Captura de Tela 2014-08-19 às 10.51.25

Além disso, devemos adicionar a biblioteca MapKit.h, para isso basta colocar o seguinte comando no inicio do arquivo:

#import <MapKit/MapKit.h>
 

Defina um nome para o objeto Mapa, no exemplo em questão defini como myMap, e o código criado foi o seguinte:

@property (weak, nonatomic) IBOutlet MKMapView *myMap;

Atenção pra imagem a baixo, que mostra uma bolinha preenchida, indicando que o código está linkado ao interface builder.!

Captura de Tela 2014-08-19 às 10.51.09

Para entendermos a função do Delegate, vamos criar uma função que reposiciona o mapa toda vez que o usuário mudar sua posição no mapa, ou seja, o mapa irá seguir a posição atual do usuário. Iremos utilizar uma função disponível no MKMapViewDelegate:

– (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation;

Essa função é chamada automaticamente pelo Delegate toda vez que a posição do usuário for atualizada (alterada).
Vamos agora redefini-la, com o seguinte código:

[sourcecode language=”objc” wraplines=”false” collapse=”false”]
– (void)mapView:(MKMapView *)mapView didUpdateUserLocation:(MKUserLocation *)userLocation
{
MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance (userLocation.coordinate, 100, 100);
[self.myMap setRegion:[self.myMap regionThatFits:region] animated:YES];
}

[/sourcecode]

O que está sendo feito?

A cada atualização da posição do usuário, definimos uma nova região onde o centro é definido pela posição do usuário. Em seguida definimos essa região no mapa.

O MKMapDelegate disponibiliza diversas funções que podem ser chamadas e alteradas conforme a necessidade.

PARA PRATICAR:
Altere o código para que uma anotação seja marcada no mapa cada vez que o usuário mudar de posição.
A anotação deverá ter como título um contador de qual leitura ele corresponde, e no subtítulo deverá ter a latitude e longitude da posição, conforme exibido na imagem a seguir:

Captura de Tela 2014-08-19 às 10.52.36

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *