Wyświetl mapy z widokami 2D, 3D i widokiem ulicznym

Pobierz przykładową mapę , aby wypróbować niektóre funkcje opisane w tym przewodniku.

Wyświetlanie mapy w karcie zastępczej

Możesz wyświetlić użytkownikom mapę w lekkim oknie podręcznym powyżej, poniżej lub obok elementu interfejsu użytkownika, albo tam, gdzie użytkownik dotyka aplikacji. Mapa może wyświetlać miasto lub adres, które odnosi się do informacji w aplikacji.

Ta karta miejsc pokazuje miasto Seattle.

Oto kod, który sprawia, że Seattle wyświetla się na karcie lokalizacji poniżej przycisku.

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);
}

Na tej karcie jest wyświetlana lokalizacja Space Needle w Seattle.

Oto kod, który sprawia, że Space Needle pojawia się na kartce poniżej przycisku.

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);
}

Wyświetlanie mapy w kontrolce

Użyj kontrolki mapy, aby wyświetlić rozbudowane i dostosowywalne dane mapy w aplikacji. Kontrolka mapy może wyświetlać mapy dróg, widoki lotnicze, widoki 3D, trasy, wyniki wyszukiwania i ruch drogowy. Na mapie można wyświetlić lokalizację użytkownika, wskazówki i punkty orientacyjne. Mapa może również wyświetlać widoki 3D z lotu ptaka, widoki przy ulicy, ruch, tranzyt i lokalne firmy.

Użyj kontrolki mapy, jeśli chcesz utworzyć mapę w aplikacji, która umożliwia użytkownikom wyświetlanie informacji geograficznych specyficznych dla aplikacji lub ogólnych. Posiadanie kontrolki mapy w aplikacji oznacza, że użytkownicy nie muszą przechodzić poza aplikację, aby uzyskać te informacje.

Dodawanie kontrolki mapy do aplikacji

Wyświetl mapę na stronie XAML, dodając MapControl. Aby użyć MapControl, należy zadeklarować przestrzeń nazw Windows.UI.Xaml.Controls.Maps na stronie XAML lub w kodzie. Jeśli przeciągniesz kontrolkę z przybornika, ta deklaracja przestrzeni nazw zostanie dodana automatycznie. Jeśli ręcznie dodasz MapControl do strony XAML, musisz ręcznie dodać deklarację przestrzeni nazw w górnej części strony.

Poniższy przykład przedstawia podstawową kontrolkę mapy i konfiguruje mapę tak, aby wyświetlała kontrolki powiększania i pochylenia oprócz akceptowania danych wejściowych dotykowych.

<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>

Jeśli dodasz kontrolkę mapy w kodzie, musisz ręcznie zadeklarować przestrzeń nazw w górnej części pliku kodu.

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);

Pobieranie i ustawianie klucza uwierzytelniania map

Aby można było użyć usług MapControl i usług mapowania, należy określić klucz uwierzytelniania map jako wartość właściwości MapServiceToken. W poprzednich przykładach zastąp EnterYourAuthenticationKeyHere kluczem uzyskanym z Centrum deweloperów Bing Maps . Tekst Ostrzeżenie: MapServiceToken nie określono będzie nadal wyświetlany poniżej kontrolki, dopóki nie określisz klucza uwierzytelniania map. Aby uzyskać więcej informacji na temat pobierania i ustawiania klucza uwierzytelniania map, zobacz Żądanie klucza uwierzytelniania map.

Ustawianie lokalizacji mapy

Wskaż mapę na dowolną lokalizację lub użyj bieżącej lokalizacji użytkownika.

Ustawianie lokalizacji początkowej mapy

Ustaw lokalizację do wyświetlenia na mapie, określając właściwość Center kontrolki MapControl w swoim kodzie lub poprzez powiązanie tej właściwości w znacznikach XAML. Poniższy przykład przedstawia mapę z miastem Seattle jako centrum.

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;
}

Ustawianie bieżącej lokalizacji mapy

Aby aplikacja mogła uzyskać dostęp do lokalizacji użytkownika, aplikacja musi wywołać metodę RequestAccessAsync. W tym czasie aplikacja musi znajdować się na pierwszym planie, a RequestAccessAsync musi być wywoływana z wątku interfejsu użytkownika. Dopóki użytkownik nie przyzna aplikacji uprawnienia do swojej lokalizacji, aplikacja nie będzie mogła uzyskać dostępu do danych lokalizacji.

Pobierz bieżącą lokalizację urządzenia (jeśli lokalizacja jest dostępna) przy użyciu metody GetGeopositionAsync klasy Geolocator. Aby uzyskać odpowiedni geopoint, użyj właściwości Point geolokalizacji. Aby uzyskać więcej informacji, zobacz Uzyskaj bieżącą lokalizację.

// 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;
}

Podczas wyświetlania lokalizacji urządzenia na mapie rozważ wyświetlenie grafiki i ustawienie poziomu powiększenia na podstawie dokładności danych lokalizacji. Aby uzyskać więcej informacji, zobacz wytyczne dotyczące aplikacji obsługujących lokalizację.

Zmienianie lokalizacji mapy

Aby zmienić lokalizację wyświetlaną na mapie 2D, wywołaj jedno z przeciążeń metody TrySetViewAsync. Użyj tej metody, aby określić nowe wartości dla Center, ZoomLevel, Headingi Pitch. Możesz również wskazać opcjonalną animację do zastosowania, gdy widok się zmienia, podając stałą z wyliczenia MapAnimationKind.

Aby zmienić lokalizację mapy 3D, zamiast tego użyj metody TrySetSceneAsync. Aby uzyskać więcej informacji, zobacz Wyświetlanie widoków lotniczych 3D.

Wywołaj metodę TrySetViewBoundsAsync, aby wyświetlić zawartość GeoboundingBox na mapie. Użyj tej metody, na przykład, aby wyświetlić trasę lub część trasy na mapie. Aby uzyskać więcej informacji, zobacz Wyświetlanie tras i wskazówek na mapie.

Zmienianie wyglądu mapy

Aby dostosować wygląd i działanie mapy, ustaw właściwość StyleSheet kontrolki mapy na dowolny z istniejących obiektów MapStyleSheet.

myMap.StyleSheet = MapStyleSheet.RoadDark();

mapy w stylu ciemnym

Możesz również użyć formatu JSON, aby zdefiniować style niestandardowe, a następnie użyć tego kodu JSON do utworzenia obiektu 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""
            }
        }
    }
");

Aby uzyskać pełną dokumentację wpisu JSON, zobacz Dokumentacja arkusza stylów mapy.

Możesz zacząć od istniejącego arkusza, a następnie użyć formatu JSON, aby zastąpić dowolne elementy. W tym przykładzie zaczyna się od istniejącego stylu i używa formatu JSON, aby zmienić tylko kolor obszarów wody.

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

MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();

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

Ustawianie orientacji i perspektywy

Powiększ, pomniejszaj, obracaj i przechylaj kamerę mapy, aby uzyskać odpowiedni kąt. Wypróbuj te właściwości.

• Ustaw centrum mapy na punkt geograficzny, ustawiając właściwość .
• Ustaw poziom powiększenia mapy, ustawiając właściwość ZoomLevel na wartość z zakresu od 1 do 20.
• Aby ustawić rotacji mapy, skonfiguruj właściwość Heading, gdzie 0 lub 360 stopni oznacza Północ, 90 oznacza Wschód, 180 oznacza Południe, a 270 oznacza Zachód.
• Ustaw przechylenie mapy poprzez ustawienie właściwości DesiredPitch na wartość z zakresu od 0 do 65 stopni.

Pokaż i ukryj funkcje mapy

Pokaż lub ukryj funkcje mapy, takie jak drogi i punkty orientacyjne, ustawiając wartości następujących właściwości MapControl.

• Wyświetl budynków i zabytków na mapie, włączając lub wyłączając obiekt LandmarksVisible.

  Uwaga / Notatka

  Możesz pokazać lub ukryć budynki, ale nie można uniemożliwić im wyświetlania 3 wymiarów.

• Wyświetl funkcje dla pieszych, takie jak publiczne schody na mapie, poprzez włączenie lub wyłączenie właściwości PedestrianFeaturesVisible.

• Wyświetl ruch na mapie, włączając lub wyłączając właściwość TrafficFlowVisible.

• Określ, czy znak wodny jest wyświetlany na mapie, ustawiając właściwość WatermarkMode na jedną z wartości MapWatermarkMode.

• Wyświetl trasy jazdy lub chodzenia na mapie, dodając MapRouteView do kolekcji tras kontrolki Mapa. Aby uzyskać więcej informacji i przykład, zobacz Wyświetlanie tras i wskazówek na mapie.

Aby uzyskać informacje na temat sposobu wyświetlania pinezek, kształtów i kontrolek XAML w MapControl, zobacz temat Wyświetlanie punktów orientacyjnych (POI) na mapie.

Wyświetlanie widoków przy ulicy

Widok streetside to perspektywa na poziomie ulicy lokalizacji, która pojawia się na górze kontrolki mapy.

Rozważ doświadczenie "wewnątrz" widoku Streetside jako oddzielne od mapy pierwotnie wyświetlanej w kontrolce mapy. Na przykład zmiana lokalizacji w widoku Streetside nie zmienia lokalizacji ani wyglądu mapy "pod" widokiem Streetside. Po zamknięciu widoku Streetside (klikając X w prawym górnym rogu kontrolki), oryginalna mapa pozostaje niezmieniona.

Aby wyświetlić widok przy ulicy

1. Ustal, czy widoki Streetside są obsługiwane na urządzeniu, sprawdzając IsStreetsideSupported.
2. Jeśli obsługiwany jest widok Streetside, utwórz StreetsidePanorama w pobliżu określonej lokalizacji, wywołując FindNearbyAsync.
3. Ustal, czy w pobliżu znaleziono panoramę, sprawdzając, czy StreetsidePanorama nie jest nullem.
4. W przypadku znalezienia pobliskiej panoramy, utwórz StreetsideExperience dla właściwości CustomExperience w kontrolce mapy.

W tym przykładzie pokazano, jak wyświetlić widok Streetside podobny do poprzedniego obrazu.

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();            
   }
}

Wyświetlanie widoków 3D z lotu ptaka

Określ perspektywę 3D mapy przy użyciu klasy MapScene. Scena mapy reprezentuje widok 3D wyświetlany na mapie. Klasa MapCamera reprezentuje położenie aparatu, które wyświetliłoby taki widok.

Aby sprawić, że budynki i inne elementy na powierzchni mapy pojawiły się w 3D, ustaw właściwość Style kontrolki mapy na MapStyle.Aerial3DWithRoads. Przykład widoku 3D w stylu Aerial3DWithRoads.

Aby wyświetlić widok 3D

1. Ustal, czy widoki 3D są obsługiwane na urządzeniu, sprawdzając Is3DSupported.
2. Jeśli widoki 3D są obsługiwane, ustaw właściwość Style kontrolki mapy na MapStyle.Aerial3DWithRoads.
3. Utwórz obiekt MapScene przy użyciu jednej z wielu metod CreateFrom, takich jak CreateFromLocationAndRadius i CreateFromCamera.
4. Wywołaj TrySetSceneAsync, aby wyświetlić widok 3D. Możesz również wskazać opcjonalną animację do zastosowania, gdy widok się zmienia, podając stałą z wyliczenia MapAnimationKind.

W tym przykładzie pokazano, jak wyświetlić widok 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();
   }
}

Uzyskiwanie informacji o lokalizacjach

Uzyskaj informacje o lokalizacjach na mapie, wywołując następujące metody MapControl.

• metoda TryGetLocationFromOffset — uzyskaj lokalizację geograficzną odpowiadającą określonemu punktowi w obszarze widoku kontrolki mapy.
• metoda GetOffsetFromLocation — pobierz punkt na widoku kontrolki Mapy, odpowiadający określonej lokalizacji geograficznej.
• metoda IsLocationInView — sprawdza, czy wskazana lokalizacja geograficzna jest obecnie widoczna w oknie kontrolki Mapa.
• metoda FindMapElementsAtOffset — pobierz elementy na mapie znajdujące się w określonym punkcie w widoku kontrolki Mapa.

Obsługa interakcji i zmian

Obsługa gestów wejściowych użytkownika na mapie poprzez obsługę następujących zdarzeń MapControl. Uzyskaj informacje o lokalizacji geograficznej na mapie i fizycznej pozycji w polu widzenia, gdzie wystąpił gest, sprawdzając wartości właściwości Location i Position obiektu MapInputEventArgs.

• MapTapped
• PodwójneStukanieNaMapie
• MapHolding

Sprawdź, czy mapa jest w trakcie ładowania, czy już została całkowicie załadowana, obsługując zdarzenie LoadingStatusChanged kontrolki.

Obsługa zmian, które mają miejsce, gdy użytkownik lub aplikacja zmienia ustawienia mapy, obsługując następujące zdarzenia MapControl.

• CenterChanged
• HeadingChanged (Zmiana nagłówka)
• Zmieniono ton
• PoziomPowiększeniaZmieniony

Zalecenia dotyczące najlepszych rozwiązań

• Użyj dużej ilości miejsca na ekranie (lub całego ekranu), aby wyświetlić mapę, aby użytkownicy nie musieli nadmiernie przesuwać i powiększać, aby wyświetlić informacje geograficzne.

• Jeśli mapa jest używana tylko do prezentowania statycznego, informacyjnego widoku, użycie mniejszej mapy może być bardziej odpowiednie. Jeśli używasz mniejszej, statycznej mapy, bazuj jej wymiary na użyteczności — wystarczająco małe, aby zaoszczędzić wystarczająco dużo miejsca na ekranie, ale wystarczająco duże, aby pozostać czytelne.

• Osadź punkty orientacyjne w scenie mapy przy użyciu elementów mapy; wszelkie dodatkowe informacje mogą być wyświetlane jako przejściowy interfejs użytkownika nakładający się na scenę mapy.

Tematy pokrewne

• Centrum deweloperów map Bing
• przykład mapy platformy UWP
• Pobierz bieżącą lokalizację
• wskazówki dotyczące projektowania dla aplikacji obsługujących lokalizację
• MapControl