[Desenvolvimento] Como visualizar sua atual posição geográfica em um mapa

3

Olá pessoal, tudo bom?

Nesse post demonstro como podemos desenvolver uma APP para Windows Phone capaz de exibir sua posição geográfica atual em um mapa e ainda permitir que o usuário tenha à disposição um controle para aumentar ou diminuir o zoom de visualização.

Bem, tendo criado uma aplicação Windows Phone no Visual Studio, adicione uma nova página e nela faça referência ao XML namespace Microsoft.Phone.Maps.Controls.

1
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"

Na sequencia, adicione um elemento Map e um Slider para composição da interface de teste.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
<!--ContentPanel - place additional content here-->
<grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 
<maps:map x:Name="mapa"
   ZoomLevel="15" CartographicMode="Aerial" ColorMode="Light"
   HorizontalAlignment="Left" Margin="10,10,0,0"
   VerticalAlignment="Top" Height="587" Width="436"></maps:map>
 
<slider x:Name="zoom" HorizontalAlignment="Left"
   Margin="392,0,0,0" VerticalAlignment="Top" Width="76" Maximum="19"
   Minimum="1" Orientation="Vertical" Grid.Row="1" Height="322"
   ValueChanged="zoom_ValueChanged" Value="15"></slider>
</grid>
...

A imagem abaixo lhe dá uma ideia de como o layout está ficando.

layout-mapa

Ajustando as Capabilities da APP

Para que seja possível usar os recursos de mapa e geolocalização é necessário que você abra o arquivo WMAppManifest.xml que fica junto à pasta Properties da aplicação e marque as capabilities ID_CAP_LOCATION e ID_CAP_MAP.

wp-capacidades-emulador

Codificação em C#

Agora que já cuidamos do layout em XAML e das Capabilities da APP verifiquemos a implementação do código C#.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
...
 
//Construtor
public Mapa()
{
  InitializeComponent();
  //Após o carregamento da página, o método para
  //leitura da posição geográfica atual e exibição
  //do mapa é acionado.
  this.Loaded += Mapa_Loaded;
}
 
private async void Mapa_Loaded(object sender, RoutedEventArgs e)
{
  //Objeto que será usado para obter a posição geográfica atual
  Geolocator geo = new Geolocator();
  if (geo.LocationStatus != PositionStatus.Disabled)
  {
    //Obtendo a posição geográfica
    Geoposition pos = await geo.GetGeopositionAsync();
    //Centralizando o mapa na coordenada geográfica obtida
    mapa.Center = pos.Coordinate.ToGeoCoordinate();
  }
}
 
//Método que trata o aumento ou diminuição do zoom
private void zoom_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
  try
  {
    //Ajustando o zoom...
    mapa.ZoomLevel = e.NewValue;
  }
  catch { }
}

Ao executar a aplicação teremos o seguinte resultado:

app-mapa

Fica a dica!

Grande abraço,
Eduardo Henrique Rizo (@eduardorizo)

MCP

Posts Relacionados: 

Fonte: Blog do Eduardo H. Rizo

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.