Exibir mapas com vistas 2D, 3D e Streetside

Faça o download do de exemplo de mapa para experimentar alguns dos recursos descritos neste guia.

Exibir mapa em um cartão de lugar

Você pode mostrar aos usuários um mapa dentro de uma janela pop-up leve acima, abaixo ou ao lado de um elemento da interface do usuário ou de uma área de um aplicativo onde o usuário toca. O mapa pode mostrar uma cidade ou endereço relacionado a informações em seu aplicativo.

Este placecard mostra a cidade de Seattle.

Aqui está o código que faz com que Seattle apareça numa placa abaixo de um botão.

private void Seattle_Click(object sender, RoutedEventArgs e)
{
    Geopoint seattlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 });

    PlaceInfo spaceNeedlePlace = PlaceInfo.Create(seattlePoint);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

Este placecard mostra a localização da Space Needle em Seattle.

Aqui está o código que faz com que o Space Needle apareça num cartão de apresentação abaixo de um botão.

private void SpaceNeedle_Click(object sender, RoutedEventArgs e)
{
    Geopoint spaceNeedlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6205, Longitude = -122.3493 });

    PlaceInfoCreateOptions options = new PlaceInfoCreateOptions();

    options.DisplayAddress = "400 Broad St, Seattle, WA 98109";
    options.DisplayName = "Seattle Space Needle";

    PlaceInfo spaceNeedlePlace =  PlaceInfo.Create(spaceNeedlePoint, options);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

Exibir mapa em um controle

Use um controle de mapa para mostrar dados de mapa ricos e personalizáveis em seu aplicativo. Um controle de mapa pode exibir mapas rodoviários, aéreos, 3D, visualizações, direções, resultados de pesquisa e tráfego. Em um mapa, você pode exibir a localização, as direções e os pontos de interesse do usuário. Um mapa também pode mostrar vistas aéreas em 3D, vistas da rua, trânsito, trânsito e empresas locais.

Use um controle de mapa quando quiser um mapa em seu aplicativo que permita que os usuários visualizem informações geográficas gerais ou específicas do aplicativo. Ter um controle de mapa em seu aplicativo significa que os usuários não precisam sair do aplicativo para obter essas informações.

Adicionar um controle de mapa ao seu aplicativo

Exiba um mapa em uma página XAML adicionando um MapControl. Para usar o MapControl, você deve declarar o namespace Windows.UI.Xaml.Controls.Maps na página XAML ou em seu código. Se você arrastar o controle da Caixa de Ferramentas, essa declaração de namespace será adicionada automaticamente. Se você adicionar o MapControl à página XAML manualmente, deverá adicionar a declaração de namespace manualmente na parte superior da página.

O exemplo a seguir exibe um controle de mapa básico e configura o mapa para exibir os controles de zoom e inclinação, além de aceitar entradas por toque.

<Page
    x:Class="MapsAndLocation1.DisplayMaps"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MapsAndLocation1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
    mc:Ignorable="d">

 <Grid x:Name="pageGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Maps:MapControl
       x:Name="MapControl1"            
       ZoomInteractionMode="GestureAndControl"
       TiltInteractionMode="GestureAndControl"   
       MapServiceToken="EnterYourAuthenticationKeyHere"/>

 </Grid>
</Page>

Se você adicionar o controle de mapa em seu código, você deve declarar o namespace manualmente na parte superior do arquivo de código.

using Windows.UI.Xaml.Controls.Maps;
...

// Add the MapControl and the specify maps authentication key.
MapControl MapControl2 = new MapControl();
MapControl2.ZoomInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.TiltInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.MapServiceToken = "EnterYourAuthenticationKeyHere";
pageGrid.Children.Add(MapControl2);

Obter e definir uma chave de autenticação de mapas

Antes de poder utilizar MapControl e os serviços de mapa, deve especificar a chave de autenticação de mapas como o valor da propriedade MapServiceToken. Nos exemplos anteriores, substitua EnterYourAuthenticationKeyHere pela chave obtida do Centro de Desenvolvedores do Bing Maps. O texto Aviso: MapServiceToken não especificado continua a aparecer abaixo do controle até que você especifique a chave de autenticação de mapas. Para obter mais informações sobre como obter e definir uma chave de autenticação de mapas, consulte Solicitar uma chave de autenticação de mapas.

Definir a localização de um mapa

Aponte o mapa para qualquer local desejado ou use a localização atual do usuário.

Definir um local de partida para o mapa

Defina o local a ser exibido no mapa especificando a propriedade Center do MapControl em seu código ou vinculando a propriedade em sua marcação XAML. O exemplo a seguir exibe um mapa com a cidade de Seattle como centro.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   // Specify a known location.
   BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 };
   Geopoint cityCenter = new Geopoint(cityPosition);

   // Set the map location.
   MapControl1.Center = cityCenter;
   MapControl1.ZoomLevel = 12;
   MapControl1.LandmarksVisible = true;
}

Definir a localização atual do mapa

Antes que seu aplicativo possa acessar a localização do usuário, ele deve chamar o método RequestAccessAsync . Nesse momento, seu aplicativo deve estar em primeiro plano e RequestAccessAsync deve ser chamado a partir do thread da interface do usuário. Até que o usuário conceda permissão ao seu aplicativo para sua localização, seu aplicativo não poderá acessar os dados de localização.

Obtenha a localização atual do dispositivo (se a localização estiver disponível) usando o método GetGeopositionAsync da classe Geolocator . Para obter o Geopoint correspondente, use a propriedade Ponto da geocoordenada da geoposição. Para obter mais informações, consulte Obtenha localização atual.

// Set your current location.
var accessStatus = await Geolocator.RequestAccessAsync();
switch (accessStatus)
{
   case GeolocationAccessStatus.Allowed:

      // Get the current location.
      Geolocator geolocator = new Geolocator();
      Geoposition pos = await geolocator.GetGeopositionAsync();
      Geopoint myLocation = pos.Coordinate.Point;

      // Set the map location.
      MapControl1.Center = myLocation;
      MapControl1.ZoomLevel = 12;
      MapControl1.LandmarksVisible = true;
      break;

   case GeolocationAccessStatus.Denied:
      // Handle the case  if access to location is denied.
      break;

   case GeolocationAccessStatus.Unspecified:
      // Handle the case if  an unspecified error occurs.
      break;
}

Ao exibir a localização do dispositivo em um mapa, considere exibir gráficos e definir o nível de zoom com base na precisão dos dados de localização. Para saber mais, veja Diretrizes para aplicativos com reconhecimento de localização.

Alterar a localização do mapa

Para alterar a localização que aparece num mapa 2D, chame uma das sobrecargas do método TrySetViewAsync. Use esse método para especificar novos valores para Center, ZoomLevel, Heading e Pitch. Você também pode especificar uma animação opcional fornecendo uma constante da enumeração MapAnimationKind para ser usada quando a visualização for alterada.

Para alterar o local de um mapa 3D, use o método TrySetSceneAsync. Para obter mais informações, consulte Exibir exibições aéreas em 3D.

Chame o método TrySetViewBoundsAsync para exibir o conteúdo de uma GeoboundingBox no mapa. Use esse método, por exemplo, para exibir uma rota ou uma parte de uma rota no mapa. Para obter mais informações, consulte Apresentar rotas e direções num mapa.

Alterar a aparência de um mapa

Para personalizar a aparência do mapa, defina a propriedade StyleSheet do controlador de mapa a qualquer objeto MapStyleSheet existente.

myMap.StyleSheet = MapStyleSheet.RoadDark();

Você também pode usar JSON para definir estilos personalizados e, em seguida, usar esse JSON para criar um objeto MapStyleSheet .

myMap.StyleSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""settings"": {
            ""landColor"": ""#FFFFFF"",
            ""spaceColor"": ""#000000""
        },
        ""elements"": {
            ""mapElement"": {
                ""labelColor"": ""#000000"",
                ""labelOutlineColor"": ""#FFFFFF""
            },
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            },
            ""area"": {
                ""fillColor"": ""#EEEEEE""
            },
            ""political"": {
                ""borderStrokeColor"": ""#CCCCCC"",
                ""borderOutlineColor"": ""#00000000""
            }
        }
    }
");

Para consultar a referência completa de entrada JSON, veja Referência da folha de estilos do mapa.

Você pode começar com uma planilha existente e, em seguida, usar JSON para substituir quaisquer elementos desejados. Este exemplo começa com um estilo existente e usa JSON para alterar apenas a cor das áreas de água.

 MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""elements"": {
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            }
        }
    }
");

MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();

myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });

Definir orientação e perspetiva

Aumente e diminua o zoom, gire e incline a câmera do mapa para obter o ângulo certo para o efeito desejado. Experimente estas propriedades.

• Defina a central de do mapa como um ponto geográfico definindo o Center propriedade.
• Defina a de nível de zoom do mapa definindo a propriedade ZoomLevel como um valor entre 1 e 20.
• Defina a de rotação do mapa definindo a propriedade Heading, onde 0 ou 360 graus = Norte, 90 = Leste, 180 = Sul e 270 = Oeste.
• Defina a de inclinação do mapa definindo a propriedade DesiredPitch para um valor entre 0 e 65 graus.

Mostrar e ocultar recursos do mapa

Mostrar ou ocultar recursos de mapa, como estradas e pontos de referência, definindo os valores das seguintes propriedades do MapControl.

• Exiba edifícios e pontos de referência no mapa ativando ou desativando a LandmarksVisible propriedade.

  Observação

  Você pode mostrar ou ocultar edifícios, mas não pode impedir que eles apareçam em 3 dimensões.

• Exiba recursos pedestres como escadas públicas no mapa, ativando ou desativando a propriedade PedestrianFeaturesVisible .

• Exiba o tráfego de no mapa ativando ou desativando a propriedadeTrafficFlowVisible.

• Especifique se a marca d'água é exibida no mapa definindo a propriedade WatermarkMode como uma das constantes de MapWatermarkMode .

• Exiba um de rota de condução ou caminhada no mapa adicionando um MapRouteView à coleção Routes do controle Map. Para obter mais informações e um exemplo, consulte Exibir rotas e direções em um mapa.

Para saber mais sobre como exibir pinos, formas e controles XAML noMapControl do , veja Exibir pontos de interesse (POI) em um mapa.

Exibir vistas da funcionalidade Streetside

Um modo de exibição ao nível da rua é uma perspetiva de um local que aparece na parte superior do mapa interativo.

Considere a experiência "dentro" da visualização Streetside separada do mapa originalmente exibido no controle de mapa. Por exemplo, alterar a localização na vista Streetside não altera a localização ou aparência do mapa sob a vista Streetside. Depois de fechar a vista Streetside (clicando no X no canto superior direito do controlo), o mapa original permanece inalterado.

Para exibir a vista Streetside

1. Determine se os modos de exibição Streetside são suportados no dispositivo marcando IsStreetsideSupported.
2. Se o modo de exibição Streetside for suportado, crie um StreetsidePanorama perto do local especificado chamando FindNearbyAsync.
3. Determine se um panorama próximo foi encontrado verificando se o StreetsidePanorama não é nulo
4. Se um panorama próximo for encontrado, crie um StreetsideExperience para a propriedade CustomExperience do controle de mapa.

Este exemplo mostra como exibir uma vista Streetside semelhante à da imagem anterior.

private async void showStreetsideView()
{
   // Check if Streetside is supported.
   if (MapControl1.IsStreetsideSupported)
   {
      // Find a panorama near Avenue Gustave Eiffel.
      BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 48.858, Longitude = 2.295};
      Geopoint cityCenter = new Geopoint(cityPosition);
      StreetsidePanorama panoramaNearCity = await StreetsidePanorama.FindNearbyAsync(cityCenter);

      // Set the Streetside view if a panorama exists.
      if (panoramaNearCity != null)
      {
         // Create the Streetside view.
         StreetsideExperience ssView = new StreetsideExperience(panoramaNearCity);
         ssView.OverviewMapVisible = true;
         MapControl1.CustomExperience = ssView;
      }
   }
   else
   {
      // If Streetside is not supported
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "Streetside is not supported",
         Content ="\nStreetside views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();            
   }
}

Exibir vistas aéreas em 3D

Especifique uma perspetiva 3D do mapa usando a classe MapScene . A cena do mapa representa uma visualização 3D apresentada no mapa. A classe MapCamera representa a posição da câmera que exibiria tal visualização.

Para fazer com que edifícios e outros recursos na superfície do mapa apareçam em 3D, defina a propriedade Style do controle de mapa como MapStyle.Aerial3DWithRoads. Este é um exemplo de uma vista 3D com o estilo Aerial3DWithRoads.

Para apresentar uma vista 3D

1. Determine se as visualizações 3D são suportadas no dispositivo marcando Is3DSupported.
2. Se houver suporte para visualizações 3D, defina a propriedade Style do controle de mapa como MapStyle.Aerial3DWithRoads.
3. Crie um objeto MapScene utilizando um dos muitos métodos CreateFrom, como CreateFromLocationAndRadius e CreateFromCamera.
4. Chame TrySetSceneAsync para exibir a visualização 3D. Você também pode especificar uma animação opcional fornecendo uma constante da enumeração MapAnimationKind para ser usada quando a visualização for alterada.

Este exemplo mostra como exibir uma visualização 3D.

private async void display3DLocation()
{
   if (MapControl1.Is3DSupported)
   {
      // Set the aerial 3D view.
      MapControl1.Style = MapStyle.Aerial3DWithRoads;

      // Specify the location.
      BasicGeoposition hwGeoposition = new BasicGeoposition() { Latitude = 43.773251, Longitude = 11.255474};
      Geopoint hwPoint = new Geopoint(hwGeoposition);

      // Create the map scene.
      MapScene hwScene = MapScene.CreateFromLocationAndRadius(hwPoint,
                                                                           80, /* show this many meters around */
                                                                           0, /* looking at it to the North*/
                                                                           60 /* degrees pitch */);
      // Set the 3D view with animation.
      await MapControl1.TrySetSceneAsync(hwScene,MapAnimationKind.Bow);
   }
   else
   {
      // If 3D views are not supported, display dialog.
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "3D is not supported",
         Content = "\n3D views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();
   }
}

Obter informações sobre localizações

Obtenha informações sobre locais no mapa chamando os seguintes métodos do MapControl.

• método TryGetLocationFromOffset - Obter a localização geográfica que corresponde ao ponto especificado na janela de visualização do controlo do mapa.
• GetOffsetFromLocation método - Obtenha o ponto na janela de visualização do controle Map que corresponde à localização geográfica especificada.
• Método IsLocationInView - Determine se a localização geográfica especificada está atualmente visível no visor do controle Map.
• Método FindMapElementsAtOffset - Obtenha os elementos no mapa localizados no ponto especificado no visor do controle Map.

Lidar com a interação e as alterações

Manipule gestos de entrada do usuário no mapa manipulando os seguintes eventos do MapControl. Obtenha informações sobre a localização geográfica no mapa e a posição física no visor onde o gesto ocorreu verificando os valores das propriedades Location e Position do MapInputEventArgs.

• MapaTocado
• MapaDuploTocados
• MapHolding

Determine se o mapa está a carregar ou completamente carregado, manipulando o evento LoadingStatusChanged do controlo.

Manipule as alterações que acontecem quando o usuário ou o aplicativo altera as configurações do mapa manipulando os seguintes eventos do MapControl.

• CenterChanged
• CabeçalhoAlterado
• TomAlterado
• NívelDeZoomAlterado

Recomendações de boas práticas

• Use amplo espaço na tela (ou a tela inteira) para exibir o mapa, para que os usuários não precisem mover e aplicar zoom excessivo para visualizar informações geográficas.

• Se o mapa for usado apenas para apresentar uma visão estática e informativa, usar um mapa menor pode ser mais apropriado. Se você optar por um mapa menor e estático, baseie suas dimensões na usabilidade — pequena o suficiente para conservar espaço suficiente na tela, mas grande o suficiente para permanecer legível.

• Incorpore os pontos de interesse na cena do mapa usando elementos do mapa; qualquer informação adicional pode ser exibida como interface do usuário transitória que sobrepõe a cena do mapa.

Tópicos relacionados

• Centro de Programadores do Bing Maps
• Exemplo de mapa UWP
• Obter localização atual
• Diretrizes de design para aplicativos com reconhecimento de localização
• MapControl