Anzeigen von Karten mit 2D-, 3D- und Streetside-Ansichten
Sie können eine Karte in einem licht verworfenen Fenster namens Kartenplatzkarte oder in einem vollständigen Kartensteuerelement anzeigen.
Laden Sie das Kartenbeispiel herunter , um einige der in diesem Handbuch beschriebenen Features auszuprobieren.
Karte in einer Platzkarte anzeigen
Sie können Benutzern eine Karte innerhalb eines leichten Popupfensters oberhalb, unterhalb oder seitlich eines UI-Elements oder eines Bereichs einer App anzeigen, in dem der Benutzer berührt. Die Karte kann eine Stadt oder Adresse anzeigen, die sich auf Informationen in Ihrer App bezieht.
Diese Platzkarte zeigt die Stadt Seattle.
Hier ist der Code, durch den Seattle in einer Platzkarte unterhalb einer Schaltfläche angezeigt wird.
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);
}
Diese Platzkarte zeigt den Standort der Space Needle in Seattle an.
Hier ist der Code, durch den die Leerzeichennadel in einer Platzkarte unterhalb einer Schaltfläche angezeigt wird.
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);
}
Anzeigen der Karte in einem Steuerelement
Verwenden Sie ein Kartensteuerelement, um umfangreiche und anpassbare Kartendaten in Ihrer App anzuzeigen. Ein Kartensteuerelement kann Straßenkarten, Luftbilder, 3D, Ansichten, Wegbeschreibungen, Suchergebnisse und Verkehr anzeigen. In einer Karte können Sie die Position des Benutzers, Wegbeschreibungen und interessante Orte anzeigen. Zudem kann eine Karte 3D-Luftbilder, Streetside-Ansichten, den Verkehr, öffentliche Verkehrsmittel und lokale Unternehmen enthalten.
Verwenden Sie ein Kartensteuerelement, wenn Sie in Ihrer App eine Karte benötigen, auf der Benutzer App-spezifische oder allgemeine geografische Informationen anzeigen können. Wenn die App ein Kartensteuerelement enthält, müssen Benutzer die App für diese Informationen nicht verlassen.
Hinweis
Wenn es Ihnen nichts ausmacht, dass Benutzer außerhalb Ihrer App wechseln, sollten Sie die Windows-Karten-App verwenden, um diese Informationen bereitzustellen. Ihre App kann die Windows-Karten-App starten, um bestimmte Karten, Wegbeschreibungen und Suchergebnisse anzuzeigen. Weitere Informationen finden Sie unter Starten der Windows-Karten-App.
Hinzufügen eines Kartensteuerelements zu Ihrer App
Zeigen Sie eine Karte auf einer XAML-Seite durch Hinzufügen eines MapControl an. Um MapControl zu verwenden, müssen Sie den Namespace Windows.UI.Xaml.Controls.Maps in der XAML-Seite oder im Code deklarieren. Wenn Sie das Steuerelement der Toolbox entnehmen, wird die Namespacedeklaration automatisch hinzugefügt. Wenn Sie MapControl manuell zur XAML-Seite hinzufügen, müssen Sie die Namespacedeklaration oben auf der Seite manuell hinzufügen.
Das folgende Beispiel zeigt ein einfaches Kartensteuerelement. Außerdem wird die Karte so konfiguriert, dass Toucheingaben möglich sind und gleichzeitig die Steuerelemente für Zoom und Neigung angezeigt werden.
<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>
Wenn Sie das Kartensteuerelement im Code hinzufügen, müssen Sie den Namespace oben in der Codedatei manuell deklarieren.
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);
Abrufen und Festlegen eines Kartenauthentifizierungsschlüssels
Bevor Sie MapControl und Kartendienste verwenden können, müssen Sie den Kartenauthentifizierungsschlüssel als Wert für die MapServiceToken-Eigenschaft angeben. Ersetzen Sie in den vorherigen Beispielen EnterYourAuthenticationKeyHere durch den Schlüssel, den Sie über das Bing Maps Developer Center abgerufen haben. Bis Sie den Kartenauthentifizierungsschlüssel angeben, wird unterhalb des Steuerelements weiterhin der Text Warnung: MapServiceToken wurde nicht angegeben angezeigt. Weitere Informationen zum Abrufen und Festlegen eines Kartenauthentifizierungsschlüssels finden Sie unter Anfordern eines Kartenauthentifizierungsschlüssels.
Festlegen des Standorts einer Karte
Zeigen Sie die Karte auf einen beliebigen Speicherort, oder verwenden Sie den aktuellen Standort des Benutzers.
Festlegen einer Ausgangsposition für die Karte
Legen Sie die Position fest, die auf der Karte angezeigt werden soll, indem Sie die Center-Eigenschaft von MapControl im Code angeben oder die Eigenschaft im XAML-Markup binden. Im folgenden Beispiel wird eine Karte mit Seattle in der Mitte angezeigt.
Hinweis
Da eine Zeichenfolge nicht in einen Geopoint konvertiert werden kann, können Sie keinen Wert für die Center-Eigenschaft im XAML-Markup angeben, es sei denn, Sie verwenden datenbindung. (Diese Einschränkung gilt auch für die angefügte Eigenschaft MapControl.Location.
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;
}
Festlegen der aktuellen Kartenposition
Bevor die App auf die Position des Benutzers zugreifen kann, muss die App die RequestAccessAsync-Methode aufrufen. Zu diesem Zeitpunkt muss sich Ihre App im Vordergrund befinden, und RequestAccessAsync muss vom UI-Thread aufgerufen werden. Solange der Benutzer Ihrer App keinen Zugriff auf seine Position gewährt hat, kann Ihre App nicht auf Positionsdaten zugreifen.
Rufen Sie mit der GetGeopositionAsync-Methode der Klasse Geolocator die aktuelle Position des Geräts ab (wenn die Position verfügbar ist). Zum Abrufen des entsprechenden Geopoint verwenden Sie die Point-Eigenschaft der Geoposition-Geokoordinate. Weitere Informationen finden Sie unter Abrufen des aktuellen Speicherorts.
// 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;
}
Beim Anzeigen der Geräteposition auf einer Karte sollten Sie für das Anzeigen von Grafiken und Festlegen des Zoomfaktors die Genauigkeit der Positionsdaten berücksichtigen. Weitere Informationen finden Sie unter Richtlinien für standortbasierte Apps.
Ändern der Kartenposition
Rufen Sie zum Ändern der Position, die in einer 2D-Karte angezeigt wird, eine der Überladungen der TrySetViewAsync-Methode auf. Verwenden Sie diese Methode, um neue Werte für Center, ZoomLevel, Heading und Pitch anzugeben. Darüber hinaus können Sie eine optionale Animation angeben, die beim Ändern der Ansicht angezeigt werden soll, indem Sie eine Konstante aus der Enumeration MapAnimationKind angeben.
Verwenden Sie zum Ändern des Standorts einer 3D-Karte stattdessen die TrySetSceneAsync-Methode. Weitere Informationen finden Sie unter Anzeigen von Luftbild-3D-Ansichten.
Rufen Sie die TrySetViewBoundsAsync-Methode zum Anzeigen der Inhalte eines GeoboundingBox auf der Karte auf. Diese Methode verwenden Sie beispielsweise, um eine Route oder einen Abschnitt einer Route auf der Karte anzuzeigen. Weitere Informationen finden Sie unter Anzeigen von Routen und Wegbeschreibungen auf einer Karte.
Ändern der Darstellung einer Karte
Um das Erscheinungsbild der Karte anzupassen, legen Sie die StyleSheet-Eigenschaft des Kartensteuerelements auf eines der vorhandenen MapStyleSheet-Objekte fest.
myMap.StyleSheet = MapStyleSheet.RoadDark();
Sie können JSON auch verwenden, um benutzerdefinierte Stile zu definieren und dann mit diesem JSON-Code ein MapStyleSheet-Objekt zu erstellen.
Stylesheet-JSON kann interaktiv mit der Anwendung Map Stylesheet Editor erstellt werden.
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""
}
}
}
");
Die vollständige JSON-Eintragsreferenz finden Sie unter Referenz zum Kartenstilblatt.
Sie können mit einem vorhandenen Blatt beginnen und dann JSON verwenden, um alle gewünschten Elemente zu überschreiben. Dieses Beispiel beginnt mit einem vorhandenen Stil und verwendet JSON, um nur die Farbe von Wasserbereichen zu ändern.
MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""elements"": {
""water"": {
""fillColor"": ""#DDDDDD""
}
}
}
");
MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();
myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });
Hinweis
Stile, die Sie im zweiten Stylesheet definieren, überschreiben die Stile im ersten.
Festlegen von Ausrichtung und Perspektive
Vergrößern, Verkleineren, Drehen und Kippen der Kamera der Karte, um genau den richtigen Winkel für den gewünschten Effekt zu erhalten. Probieren Sie diese Eigenschaften aus.
- Legen Sie das Zentrum der Karte auf einen geografischen Punkt fest, indem Sie die Eigenschaft Center festlegen.
- Legen Sie die Zoomstufe der Karte fest, indem Sie die Eigenschaft ZoomLevel auf einen Wert zwischen 1 und 20 Grad festlegen.
- Legen Sie die Rotation der Karte fest, indem Sie die Eigenschaft Heading festlegen, wobei 0 oder 360 Grad = Nord, 90 = Ost, 180 = Süd und 270 =West ist.
- Legen Sie die Neigung der Karte fest, indem Sie die Eigenschaft DesiredPitch auf einen Wert zwischen 0 und 65 Grad festlegen.
Ein- und Ausblenden von Kartenfeatures
Anzeigen oder Ausblenden von Kartenfeatures wie Straßen und Sehenswürdigkeiten, indem Sie die Werte der folgenden Eigenschaften des MapControl-Steuerelements festlegen.
Zeigen Sie Gebäude und Sehenswürdigkeiten auf der Karte an, indem Sie die Eigenschaft LandmarksVisible aktivieren oder deaktivieren.
Hinweis
Sie können Gebäude ein- oder ausblenden, aber nicht verhindern, dass sie 3 Dimensionen angezeigt werden.
Zeigen Sie Features für Fußgänger auf der Karte an, wie öffentliche Treppen, indem Sie die Eigenschaft PedestrianFeaturesVisible aktivieren oder deaktivieren.
Zeigen Sie den Verkehr auf der Seite an, indem Sie die Eigenschaft TrafficFlowVisible aktivieren oder deaktivieren.
Geben Sie an, ob das Wasserzeichen auf der Karte angezeigt wird, indem Sie die Eigenschaft WatermarkMode auf eine der MapWatermarkMode-Konstanten festlegen.
Zeigen Sie eine Auto- oder Fußgängerroute auf der Karte an, indem Sie MapRouteView zur Sammlung Routes des Kartensteuerelements hinzufügen. Weitere Informationen und ein Beispiel finden Sie unter Anzeigen von Routen und Wegbeschreibungen auf einer Karte.
Informationen zum Anzeigen von Ortsmarken, Formen und XAML-Steuerelementen in MapControl finden Sie unter Anzeigen von interessanten Orten (POI) auf einer Karte.
Anzeigen von Streetside-Ansichten
Bei einer Streetside-Ansicht handelt es sich um die Straßenansicht eines Standorts, die über dem Kartensteuerelement angezeigt wird.
Betrachten Sie die Vorgänge „innerhalb“ der Streetside-Ansicht getrennt von der ursprünglich im Kartensteuerelement angezeigten Karte. Wenn z. B. der Standort in der Streetside-Ansicht geändert wird, führt dies nicht zu einer Änderung der Position oder der Darstellung der Karte "unter" der Streetside-Ansicht. Nach dem Schließen der Streetside-Ansicht (durch Klicken auf X oben rechts im Steuerelement) bleibt die ursprüngliche Karte unverändert.
So zeigen Sie eine Streetside-Ansicht an
- Ermitteln Sie, ob Straßenansichten auf dem Gerät unterstützt werden, indem Sie IsStreetsideSupported überprüfen.
- Wenn Streetside-Ansichten unterstützt werden, erstellen Sie in der Nähe der angegebenen Position StreetsidePanorama, indem Sie FindNearbyAsync aufrufen.
- Bestimmen Sie, ob ein Panorama in der Nähe gefunden wurde, indem Sie überprüfen, ob StreetsidePanorama ungleich NULL ist.
- Wenn ein Panorama in der Nähe gefunden wurde, erstellen Sie eine StreetsideExperience für die CustomExperience-Eigenschaft des Kartensteuerelements.
In diesem Beispiel wird gezeigt, wie Sie eine Streetside-Ansicht ähnlich wie in der Abbildung oben anzeigen.
Hinweis
Die Übersichtskarte wird nicht angezeigt, wenn das Kartensteuerelement zu klein ist.
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();
}
}
Anzeigen von 3D-Luftbildern
Mithilfe der Klasse MapScene können Sie eine 3D-Perspektive der Karte angeben. Die Kartenszene stellt die 3D-Ansicht dar, die in der Karte angezeigt wird. Die Klasse MapCamera stellt die Position der Kamera dar, mit der eine solche Ansicht angezeigt würde.
Damit Gebäude und andere Merkmale auf der Kartenoberfläche in 3D angezeigt werden, legen Sie die Style-Eigenschaft des Kartensteuerelements auf MapStyle.Aerial3DWithRoads fest. Dies ist ein Beispiel für eine 3D-Ansicht mit dem Stil Aerial3DWithRoads.
So zeigen Sie eine 3D-Ansicht an
- Ermitteln Sie, ob 3D-Ansichten auf dem Gerät unterstützt werden, indem Sie Is3DSupported überprüfen.
- Wenn 3D-Ansichten unterstützt werden, legen Sie die Style-Eigenschaft des Kartensteuerelements auf MapStyle.Aerial3DWithRoads fest.
- Erstellen Sie ein MapScene-Objekt mit einer der vielen CreateFrom-Methoden , z. B . CreateFromLocationAndRadius und CreateFromCamera.
- Rufen Sie TrySetSceneAsync auf, um die 3D-Ansicht anzuzeigen. Darüber hinaus können Sie eine optionale Animation angeben, die beim Ändern der Ansicht angezeigt werden soll, indem Sie eine Konstante aus der Enumeration MapAnimationKind angeben.
In diesem Beispiel wird das Anzeigen einer 3D-Ansicht gezeigt.
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();
}
}
Abrufen von Informationen zu Standorten
Rufen Sie die folgenden Methoden von MapControl auf, um Informationen zu Standorten auf der Karte abzurufen.
- TryGetLocationFromOffset-Methode : Ruft den geografischen Standort ab, der dem angegebenen Punkt im Viewport des Map-Steuerelements entspricht.
- GetOffsetFromLocation-Methode – Ruft den Punkt im Viewport des Kartensteuerelements ab, der dem angegebenen geografischen Standort entspricht.
- IsLocationInView-Methode – Bestimmt, ob der angegebene geografische Standort aktuell im Viewport des Kartensteuerelements sichtbar ist.
- FindMapElementsAtOffset-Methode – Ruft die Elemente auf der Karte ab, die sich am angegebenen Punkt im Viewport des Kartensteuerelements befinden.
Behandeln von Interaktion und Änderungen
Sie behandeln Benutzereingabegesten auf der Karte, indem Sie die folgenden Ereignisse von MapControl behandeln. Rufen Sie Informationen zum geografischen Standort auf der Karte und zur physischen Position im Viewport ab, in dem die Geste aufgetreten ist, indem Sie die Werte der Eigenschaften Location und Position der MapInputEventArgs überprüfen.
Sie stellen fest, ob die Karte geladen wird oder vollständig geladen wurde, indem Sie das LoadingStatusChanged-Ereignis des Steuerelements behandeln.
Sie behandeln Änderungen, die durch Ändern der Karteneinstellungen durch den Benutzer oder die App entstehen, indem Sie die folgenden Ereignisse von MapControl behandeln.
Empfehlungen zu bewährten Methoden
Verwenden Sie für die Anzeige der Karte ausreichend Platz auf dem Bildschirm (oder den gesamten Bildschirm), sodass Benutzer beim Anzeigen geografischer Informationen keine übermäßigen Verschiebungen oder Zoomvorgänge ausführen müssen.
Wenn die Karte nur zum Anzeigen einer statischen, informativen Ansicht dient, ist möglicherweise eine kleinere Karte ausreichend. Wenn Sie eine kleinere, statische Karte verwenden, orientieren Sie sich für die Größe an der Benutzerfreundlichkeit. Die Karte sollte klein genug sein, um genügend Platz auf dem Bildschirm zu lassen, aber groß genug, um lesbar zu bleiben.
Betten Sie die interessanten Orte mithilfe von map elements in die Kartenszene ein. Zusätzliche Informationen können als vorübergehende, die Kartenszene überlagernde Benutzeroberfläche angezeigt werden.
Zugehörige Themen
- Bing Karten Developer Center
- Beispiel für UWP-Karte
- Abrufen der aktuellen Position
- Entwurfsrichtlinien für Apps mit Positionsbestimmung
- Build 2015-Video: Nutzen von Karten und Ortung über Telefon, Tablet und PC in Ihren Windows-Apps
- Beispiel für eine UWP-App mit Verkehrsinformationen
- MapControl
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für