Artigos .NET Bing Maps API: Usando mapas em Aplicações Universais do Windows

Motivação para usar a Bing Maps API

O uso de mapas e coordenadas geográficas em aplicações web e mobile vem se tornando cada vez mais comum. Podemos ver esse tipo de funcionalidade em aplicações como Facebook e TripAdvisor, nas quais existe a opção de realizarmos marcações de locais em mapas.

Para auxiliar nesse tipo de implementação, a Bing Maps API, da Microsoft, oferece recursos com os quais é possível mostrar mapas customizados, acessar localizações, endereços e rotas, baixar mapas para uso off-line, entre outras possibilidades.

Nesse artigo, veremos como utilizar a Bing Maps API, em Aplicações Universais do Windows, para recuperar dados geográficos de pontos clicados no controle MapControl.

Passo 1: Criar uma conta no Bing Maps API Dev Center

Para que seja possível utilizar o Bing Maps API da Microsoft, será necessário criar uma conta no Bing Maps Dev Center, página na qual vamos receber a chave para acesso às funcionalidades supracitadas. Dessa forma, os seguintes passos devem ser executados:

  1. Acesse o site do Bing Maps Dev Center e realize login com a sua conta da Microsoft (ou crie uma nova conta, caso não possua uma);
  2. Preencha o formulário apresentado e finalize a criação da sua conta do Bing Maps Dev Center;
  3. Selecione a opção My Keys, no menu My Account, e preencha o formulário, fornecendo o nome e URL de sua aplicação, além do tipo de chave (aqui utilizaremos o tipo “Basic”) e Application Type (selecione “Universal Windows App”).

Feito isso, será apresentada uma tela com a nova chave gerada.

Passo 2: Criar e configurar o projeto

Tendo criado a chave, será possível exibir mapas com o controle MapControl, disponível para Aplicações Universais do Windows. Então, para começar, abra o Visual Studio 2015 e crie um projeto com o template “Blank App (Universal Windows)”.

Nota: Para poder criar esse tipo de projeto, é necessário ter o Windows 10 SDK instalado.

Com o projeto criado, abra o arquivo MainPage.xaml e adicione o seguinte namespace XAML ao controle Page, para que você possa adicionar o controle MapControl à página:

xmlns:Maps=”using:WIndows.UI.Xaml.Controls.Maps”

Em seguida, adicione um controle MapControl, atribuindo à sua propriedade MapServiceToken a chave criada ao final do Passo 1. Logo após, introduza dois controles TextBlock, a fim de armazenar os valores das coordenadas obtidas cada vez que o evento MapTapped for chamado, o que ocorre sempre que se clica com o botão direito do mouse sobre o MapControl. Após adicionar esses controles, o código interno da MainPage deverá ficar como na Listagem 1.


  01 <StackPanel>
  02     <Maps:MapControl Name="MapControl1" Height="240" MapServiceToken="Insert your Key here" MapTapped="MapControl1_MapTapped"/>
  03     <TextBlock Name="latitude"></TextBlock>
  04     <TextBlock Name="longitude"></TextBlock>
  05 </StackPanel>
Listagem 1. Criar um StackPanel dentro do controle Grid no arquivo MainPage.xaml

Para implementar o método MapControl1_Tapped, clique com o botão direito do mouse sobre esse termo no XAML, contido na propriedade MapTapped do MapControl (linha 2), e selecione a opção Go To Definition. Assim, um método será criado no arquivo MainPage.xaml.cs, no qual poderemos tratar então esse evento a fim de obter as coordenadas geográficas do ponto selecionado. A Listagem 2 apresenta o código para essa implementação.


  01  private void MapControl1_MapTapped(Windows.UI.Xaml.Controls.Maps.MapControl sender, Windows.UI.Xaml.Controls.Maps.MapInputEventArgs args)
  02 {
  03            var tappedGeoposition = args.Location.Position;
  04            latitude.Text = "Latitude: " + tappedGeoposition.Latitude.ToString();
  05            longitude.Text = "Longitude:" + tappedGeoposition.Longitude.ToString();
  06            altitude.Text = "Altitude: " + tappedGeoposition.Altitude.ToString();
  07 }
Listagem 2. Evento MapTapped, no qual atualizamos os controles TextBlock.

Linha 3: Obtemos um objeto BasicGeoposition, que representa o ponto clicado, e que é recebido através do argumento args.Location.Position. Essa classe contém as propriedades Latitude, Longitude e Altitude, que serão usadas logo em seguida;

Linhas 04 a 06: A partir das propriedades do objeto tappedGeoposition, atualizamos o texto dos TextBlocks que definimos para conter os valores de altitude, longitude e latitude.

Caso deseje, também é possível adicionar ícones no ponto selecionado. Para isso, bastaria incluir o seguinte código ao final da Listagem 2:


  01 Windows.UI.Xaml.Controls.Maps.MapIcon icon = new Windows.UI.Xaml.Controls.Maps.MapIcon();
  02 icon.Location = new Windows.Devices.Geolocation.Geopoint(tappedGeoposition);
  03 MapControl1.MapElements.Add(icon);

Linha 01: Instanciamos um objeto do tipo MapIcon, que representa de fato o ícone a ser adicionado ao mapa;

Linha 02: Passamos para o ícone a variável tappedGeoposition, que indica a localização em que ele deve ser inserido;

Linha 03: Adicionamos o objeto MapIcon à lista de elementos do MapControl.

Na Figura 1 podemos ver o resultado final do que foi implementado.

Controle MapControl contendo três pontos selecionados
Figura 1. Controle MapControl contendo três pontos selecionados

A Bing Maps API, além de ser de fácil aprendizado, permite ainda a criação de rotas personalizadas pelo meio de transporte (automóvel ou caminhada), visualização de pontos geográficos em modo 3D, entre outras funcionalidades.