Exportar (0) Imprimir
Expandir Tudo

Bing Maps no Windows Phone 7.5

Do Renato Haddad

Março 2012

Hh972467.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Como integrar o Bing Maps no Windows Phone 7.5?

O Windows Phone 7.5 contém uma vasta coleção de funcionalidades que os usuários podem tirar proveito. Para quem necessita usar mapas em viagens ou no deslocamento para qualquer endereço, o Windows Phone 7.5 oferece o serviço de mapas integrado ao Bing.

Tal funcionalidade já está pronta, não é preciso criar nada, basta usar. Veja um exemplo diretamente no emulador do Windows Phone. Cabe ressaltar que se você instalou todas as ferramentas de desenvolvimento de aplicações para o Windows Phone 7.5 Mango, com certeza a emulador está disponível na sua máquina. Para abri-lo, no Windows search, digite Windows Phone Emulator e pronto.

Com o emulador aberto, clique no ícone do Internet Explorer, digite um endereço qualquer na URL e certifique-se que a página do site abriu. Isto é só para termos certeza que há conexão com a internet.

Hh972467.E8754D218A70A94409F636EEDC89ABA8(pt-br,MSDN.10).png

O próximo passo é clicar no botão Search (botão da direita de qualquer Windows Phone). Será aberto o Bing contendo quatro botões, sendo que o último é para comando de voz (voice).

Hh972467.05C5F1B21F8AC578EA10DF0A3245052A(pt-br,MSDN.10).png

Ao clicar em voice será aberta uma janela para você dizer o que deseja pesquisar. Neste caso, diga Staples Center. O próprio Windows Phone já captura o som e envia ao Bing para pesquisa.

Hh972467.8BED4140BE40658A386E903BE3E7383B(pt-br,MSDN.10).png

Veja a tela com os resultados da pesquisa, sendo locais, imagens ou web.

Hh972467.EF1FF9324270A6CA8CFCA8F872435BE1(pt-br,MSDN.10).png

Clique no mapa para ampliar e visualizar o resultado.

Hh972467.92CB4ECD8CB590E66A9C96C1C0B8E7B6(pt-br,MSDN.10).png

Se você clicar no menu suspenso, visualizará demais opções de acordo o contexto, por exemplo search results (resultado da pesquisa), Clear map (apagar o mapa), show traffic (mostrar como está o trânsito), favorite places (locais favoritos), etc.

Hh972467.7A9759AD1BAACA2927CD05BBC2D93CCA(pt-br,MSDN.10).png

Enfim, isto tudo é do ponto de vista funcional, ou seja, esta API do Bing já está embarcada no Windows Phone 7.5, você não precisa desenvolver nada.

Agora, do ponto de vista de uma aplicação criado por nós com o Visual Studio .NET 2011 para o Windows Phone 7.5, como é que podemos aproveitar esta fantástica funcionalidade de mapas do Bing e integrar diretamente na nossa aplicação? Existem vários exemplos, imagine um entregador de encomendas que precise localizar um endereço, uma viagem que você está fazendo, um roteiro de entregas a ser seguido, verificar alternativas de trânsito, etc.

No VS.NET 2011 crie uma aplicação contendo na MainPage.xaml três botões conforme a figura a seguir.

Hh972467.3686FC023232989BC192A8E6A69600C8(pt-br,MSDN.10).png

Veja o código XAML deste formulário. Note que cada botão contém a chamada do evento Click, respectivamente.

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <StackPanel Grid.Row="1">
            <Button Content="by Search" Name="btnSearch" Click="btnSearch_Click"/>
            <Button Content="by coordenadas" Name="btnCoordenadas" Click="btnCoordenadas_Click"/>
            <Button Content="by direção" Name="btnDirecao" Click="btnDirecao_Click"/>
        </StackPanel>
    </Grid>

Para cada botão é preciso criar os seguintes códigos para invocar o Bing. O primeiro passo no código C# é declarar dois namespaces que sem eles não há funcionalidade alguma. Portanto, declare estes dois na lista de using.

using Microsoft.Phone.Tasks;
using System.Device.Location;

A seguir digite o código do botão Search para pesquisar o local “Space Needle”e já mostrar o resultado no Bing. Eu sei que você deve estar pensando que são poucas linhas, mas a ideia é exatamente esta, não é preciso criar nada, apenas invocar a classe BingMapsTask, definir a propriedade SearchTerm com o conteúdo a ser pesquisado, e ao final, mostrar o Bing com o método Show.

private void btnSearch_Click(object sender, RoutedEventArgs e)
{
    BingMapsTask bing = new BingMapsTask();
    bing.SearchTerm = "Space Needle";
    bing.Show();
}

Não executa a aplicação ainda, vamos escrever os demais códigos. Veja o código do botão Coordenadas, o qual definimos na propriedade Center as coordenadas de latitude e longitude. Aproveitando o recurso de zoom do Windows Phone, veja que o nível 10 do zoom pode ser alterado de acordo com a necessidade, ou seja, você atribui o nível que quiser, este número é apenas um valor default. Por fim, o Show mostrará o mapa nestas coordenadas.

private void btnCoordenadas_Click(object sender, RoutedEventArgs e)
{
    BingMapsTask bing = new BingMapsTask();
    bing.Center = new GeoCoordinate(30, -90);
    bing.ZoomLevel = 10;
    bing.Show();
}

E no último botão iremos definir a rota para ir do ponto A ao B. A classe BingMapsDirectionsTask contém as propriedades Start e End (início e fim) o qual podemos usar o LabeledMapLocation contendo o nome e as coordenadas.

private void btnDirecao_Click(object sender, RoutedEventArgs e)
{
    BingMapsDirectionsTask direcao = new BingMapsDirectionsTask();
    direcao.Start = new LabeledMapLocation("Seattle", new GeoCoordinate(47.6, -122.3));
    direcao.End = new LabeledMapLocation("New Orleans", new GeoCoordinate(30, -90));
    direcao.Show();
}

Para testar a aplicação, pressione F5 para fazer o deploy no emulador.

Hh972467.3686FC023232989BC192A8E6A69600C8(pt-br,MSDN.10).png

Clique no botão “by Search” e veja o resultado direto no Bing já com o mapa, o local de destino e demais opções no menu.

Hh972467.65560A556D55E3EB47F93F15F2E5EF7C(pt-br,MSDN.10).png

Retorno ao menu da aplicação (clique no botão voltar do aparelho) e agora teste a segunda opção “by coordenadas”. Note que o resultado é outro nível de zoom.

Hh972467.29E4CA7E9D7F267CE8CC88E4AA4329EA(pt-br,MSDN.10).png

Por fim, veja na terceira opção da nossa aplicação como visualizar a rota do ponto A para o B. O mais legal desta opção é que podemos navegar pelo mapa em si. Não se assuste que no momento em que o mapa for exibido, assim como na navegação, haverá uma pessoa (mulher) que irá ditar a rota a ser seguida. Para quem já usou GPS em carro sabe como funciona.

Hh972467.95075CD48A180C7C287EEEE9ECABD47C(pt-br,MSDN.10).png

Pronto, é simples e rápido aprender como integrar o Bing Maps na sua aplicação .NET. O melhor de tudo em minha opinião é a integração e o acesso as APIs do Windows Phone. Vale ressaltar que se houver uma API disponível para qualquer funcionalidade, então via programação temos acesso. E para finalizar, tente imaginar o que seria preciso em nível de código para desenvolver algo similar como as funcionalidades mostradas neste artigo!

Renato Haddad é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010, ASP.NET 4, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog http://weblogs.asp.net/renatohaddad

Mostrar:
© 2015 Microsoft