Tutorial IOS: Introdução ao MapKit API e adicionando anotações ao Mapa
Criando um projeto e o design da Interface!
Crie um projeto usando o template “Single View” conforme indicado na imagem a seguir:
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:
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:
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)
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!
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):
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.
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.
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:
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.!
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: