Afficher des cartes avec des vues 2D, 3D et Streetside
Vous pouvez afficher une carte dans une fenêtre légère qui peut être ignorée, appelée carte de correspondance de carte, ou dans un contrôle de carte complet.
Téléchargez l’exemple de carte pour essayer certaines fonctionnalités décrites dans ce guide.
Afficher la carte dans une carte de place
Vous pouvez afficher aux utilisateurs une carte à l’intérieur d’une fenêtre contextuelle légère au-dessus, en dessous ou sur le côté d’un élément d’interface utilisateur ou d’une zone d’application où l’utilisateur touche. La carte peut afficher une ville ou une adresse qui concerne des informations dans votre application.
Cette carte de place montre la ville de Seattle.
Voici le code qui fait apparaître Seattle dans une carte de place sous un bouton.
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);
}
Cette carte de place indique l’emplacement de la Space Needle à Seattle.
Voici le code qui fait apparaître space needle dans une carte de place sous un bouton.
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);
}
Afficher la carte dans un contrôle
Utilisez un contrôle de carte pour afficher des données cartographiques riches et personnalisables dans votre application. Un contrôle de carte peut afficher des cartes routières, aériennes, 3D, des vues, des directions, des résultats de recherche et du trafic. Sur une carte, vous pouvez afficher l’emplacement, les itinéraires et les centres d’intérêt de l’utilisateur. Une carte peut également afficher des vues 3D aériennes, des vues Streetside, le trafic, les transports publics et les entreprises locales.
Utilisez un contrôle de carte si vous souhaitez insérer une carte dans votre application, qui permette aux utilisateurs d’afficher des informations géographiques propres à l’application ou générales. Si votre application contient un contrôle de carte, les utilisateurs ne devront pas sortir de votre application pour accéder à ces informations.
Notes
Si les utilisateurs ne vous dérangent pas d’aller en dehors de votre application, envisagez d’utiliser l’application Cartes Windows pour fournir ces informations. Votre application peut lancer l’application Cartes Windows pour afficher des cartes, des itinéraires et des résultats de recherche spécifiques. Pour plus d’informations, consultez Lancer l’application Cartes Windows.
Ajouter un contrôle de carte à votre application
Affichez une carte sur une page XAML en ajoutant un élément MapControl. Pour utiliser le MapControl, vous devez déclarer les espace de noms Windows.UI.Xaml.Controls.Maps dans la page XAML ou dans votre code. Si vous faites glisser le contrôle à partir de la boîte à outils, cette déclaration d’espace de noms est ajoutée automatiquement. Si vous ajoutez manuellement le MapControl à la page XAML, vous devez également ajouter manuellement la déclaration d’espace de noms en haut de la page.
L’exemple suivant affiche un contrôle de carte de base et configure la carte pour afficher les contrôles de zoom et d’inclinaison en plus de l’acceptation des entrées tactiles.
<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>
Si vous ajoutez le contrôle de carte dans votre code, vous devez déclarer manuellement l’espace de noms en haut du fichier de code.
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);
Demander et définir une clé d’authentification de cartes
Avant de pouvoir utiliser MapControl et les services de carte, vous devez spécifier la clé d’authentification map comme valeur de la propriété MapServiceToken . Dans les exemples précédents, remplacez EnterYourAuthenticationKeyHere par la clé que vous recevez du Centre de développement Bing Cartes. Le texte Avertissement : MapServiceToken non spécifié continue d’apparaître sous le contrôle jusqu’à ce que vous spécifiiez la clé d’authentification de cartes. Pour plus d’informations sur l’obtention et la définition d’une clé d’authentification de cartes, voir Demander une clé d’authentification de cartes.
Définir l’emplacement d’une carte
Pointez la carte vers n’importe quel emplacement souhaité ou utilisez l’emplacement actuel de l’utilisateur.
Définir un emplacement de départ pour la carte
Définissez l’emplacement à afficher sur la carte en spécifiant la propriété Center du MapControl dans votre code ou en liant la propriété dans votre balisage XAML. L’exemple suivant représente une carte centrée sur la ville de Seattle, aux États-Unis.
Notes
Étant donné qu’une chaîne ne peut pas être convertie en geopoint, vous ne pouvez pas spécifier de valeur pour la propriété Center dans le balisage XAML, sauf si vous utilisez la liaison de données. (Cette limitation s’applique également à la propriété jointe 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;
}
Définir l’emplacement actuel de la carte
Avant d’accéder à l’emplacement de l’utilisateur, votre application doit appeler la méthode RequestAccessAsync. À ce stade, votre application doit être au premier plan et l’élément RequestAccessAsync doit être appelé à partir du thread d’interface utilisateur. Jusqu’à ce que l’utilisateur l’y autorise, votre application ne peut pas accéder aux données d’emplacement.
Obtenez l’emplacement actuel de l’appareil (si l’emplacement est disponible) à l’aide de la méthode GetGeopositionAsync de la classe Geolocator . Pour obtenir le geopoint correspondant, utilisez la propriété Point du géocoordinate de la géoposition. Pour plus d’informations, voir Obtenir l’emplacement actuel.
// 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;
}
Lorsque vous affichez l’emplacement de votre appareil sur une carte, songez à afficher les graphiques et à définir le niveau de zoom en fonction de la précision des données d’emplacement. Pour plus d’informations, voir Recommandations sur les applications de géolocalisation.
Modifier l’emplacement de la carte
Pour modifier l’emplacement qui apparaît dans une carte 2D, appelez l’une des surcharges de la méthode TrySetViewAsync . Cette méthode permet de spécifier de nouvelles valeurs pour Center, ZoomLevel, Heading et Pitch. Vous pouvez également spécifier une animation facultative à utiliser lorsque la vue change en fournissant une constante à partir de l’énumération MapAnimationKind .
Pour modifier l’emplacement sur une carte 3D, utilisez plutôt la méthode TrySetSceneAsync. Pour plus d’informations, consultez Afficher des vues 3D aériennes.
Appelez la méthode TrySetViewBoundsAsync pour afficher le contenu d’une GeoboundingBox sur la carte. Utilisez cette méthode (par exemple) pour afficher un itinéraire ou une partie d’un itinéraire sur la carte. Pour plus d’informations, voir Afficher des itinéraires et indications sur une carte.
Modifier l’apparence d’une carte
Pour personnaliser l’apparence de la carte, définissez la propriété StyleSheet du contrôle de carte sur l’un des objets MapStyleSheet existants.
myMap.StyleSheet = MapStyleSheet.RoadDark();
Vous pouvez également utiliser JSON pour définir des styles personnalisés, puis utiliser ce JSON pour créer un objet MapStyleSheet .
Le json de feuille de style peut être créé de manière interactive à l’aide de l’application Éditeur de feuille de style de carte .
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""
}
}
}
");
Pour obtenir des informations de référence complètes sur l’entrée JSON, consultez Informations de référence sur la feuille de style map.
Vous pouvez commencer avec une feuille existante, puis utiliser JSON pour remplacer tous les éléments de votre choix. Cet exemple commence par un style existant et utilise JSON pour modifier uniquement la couleur des zones d’eau.
MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
{
""version"": ""1.0"",
""elements"": {
""water"": {
""fillColor"": ""#DDDDDD""
}
}
}
");
MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();
myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });
Notes
Les styles que vous définissez dans la deuxième feuille de style remplacent les styles de la première.
Définir l’orientation et la perspective
Effectuez un zoom avant, effectuez un zoom arrière, faites pivoter et inclinez la caméra de la carte pour obtenir juste l’angle approprié pour l’effet souhaité. Essayez ces propriétés.
- Affectez au centre de la carte un point géographique en définissant la propriété Center.
- Définissez le niveau de zooml de la carte en affectant à la propriété ZoomLevel une valeur comprise entre 1 et 20.
- Définissez la rotation de la carte en affectant une valeur à la propriété Heading (dans laquelle une valeur de 0 ou 360 degrés indique le nord ; une valeur de 90 signale l’est ; une valeur de 180 représente le sud et une valeur de 270, l’ouest).
- Définissez une inclinaison pour la carte en affectant à la propriété DesiredPitch une valeur comprise entre 0 et 65 degrés.
Afficher et masquer les fonctionnalités de carte
Affichez ou masquez les fonctionnalités de carte telles que les routes et les points de repère en définissant les valeurs des propriétés suivantes de MapControl.
Affichez des bâtiments et repères sur la carte en activant ou en désactivant la propriété LandmarksVisible.
Notes
Vous pouvez afficher ou masquer des bâtiments, mais vous ne pouvez pas les empêcher d’apparaître en 3 dimensions.
Affichez des structures piétonnes, par exemple des escaliers publics, sur la carte en activant ou en désactivant la propriété PedestrianFeaturesVisible.
Affichez le trafic sur la carte en activant ou en désactivant la propriété TrafficFlowVisible.
Indiquez si le filigrane est affiché sur la carte en définissant la propriété WatermarkMode sur l’une des constantes MapWatermarkMode.
Pour afficher une route ou une voie piétonne sur la carte, ajoutez un élément MapRouteView à la collection Routes du contrôle de carte. Pour plus d’informations et un exemple, voir Afficher des itinéraires et indications sur une carte.
Pour plus d’informations sur l’affichage de punaises, de formes et de contrôles XAML dans le MapControl, voir Afficher des centres d’intérêt sur une carte.
Afficher des vues Streetside
Une vue Streetside est une perspective au niveau rue d’un emplacement qui s’affiche au-dessus du contrôle de carte.
Considérez l’expérience « à l’intérieur » de la vue Streetside comme distincte de la carte affichée à l’origine dans le contrôle de carte. Par exemple, la modification de l’emplacement dans la vue Streetside ne change pas l’emplacement ou l’apparence de la carte « sous » la vue Streetside. Après avoir fermé la vue Streetside (en cliquant sur le X dans l’angle supérieur droit du contrôle), la carte d’origine reste inchangée.
Pour afficher une vue Streetside
- Déterminez si les vues Streetside sont prises en charge sur l’appareil en vérifiant IsStreetsideSupported.
- Si l’affichage Streetside est pris en charge, créez un StreetsidePanorama à proximité de l’emplacement spécifié en appelant FindNearbyAsync.
- Déterminez si un panorama à proximité a été trouvé en vérifiant que la valeur StreetsidePanorama n’est pas null.
- Si un panorama à proximité a été trouvé, créez une StreetsideExperience pour la propriété CustomExperience du contrôle de carte.
Cet exemple montre comment afficher une vue Streetside similaire à l’image précédente.
Notes
La carte de vue d’ensemble n’apparaît pas si le contrôle de carte est dimensionné trop petit.
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();
}
}
Afficher des vues 3D aériennes
La classe MapScene vous permet de spécifier une perspective 3D de la carte. La scène représente la vue 3D qui s’affiche dans la carte. La classe MapCamera représente la position d’un appareil photo qui afficherait une telle vue.
Pour que les bâtiments et d’autres fonctionnalités de la surface de la carte apparaissent en 3D, définissez la propriété Style du contrôle de carte sur MapStyle.Aerial3DWithRoads. Voici un exemple de vue 3D avec le style Aerial3DWithRoads.
Pour afficher une vue 3D
- Déterminez si les vues 3D sont prises en charge sur l’appareil en vérifiant Is3DSupported.
- Si les vues 3D sont prises en charge, définissez la propriété Style du contrôle de carte sur MapStyle.Aerial3DWithRoads.
- Créez un objet MapScene en utilisant l’une des nombreuses méthodes CreateFrom, telles que CreateFromLocationAndRadius et CreateFromCamera.
- Appelez TrySetSceneAsync pour afficher la vue 3D. Vous pouvez également spécifier une animation facultative à utiliser lorsque la vue change en fournissant une constante à partir de l’énumération MapAnimationKind .
Cet exemple montre comment afficher une vue 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();
}
}
Obtenir des informations sur les emplacements
Pour obtenir des informations sur les emplacements sur la carte, appelez les méthodes suivantes de MapControl.
- Méthode TryGetLocationFromOffset : obtient l’emplacement géographique qui correspond au point spécifié dans la fenêtre d’affichage du contrôle Map.
- Méthode GetOffsetFromLocation : obtient le point dans la fenêtre d’affichage du contrôle Map qui correspond à l’emplacement géographique spécifié.
- Méthode IsLocationInView : permet de déterminer si l’emplacement géographique indiqué est actuellement visible dans la fenêtre d’affichage du contrôle de carte.
- Méthode FindMapElementsAtOffset : obtient les éléments sur la carte située au point spécifié dans la fenêtre d’affichage du contrôle Map.
Gérer l’interaction et les modifications
Gérez les mouvements d’entrée utilisateur sur la carte en traitant les événements suivants de l’élément MapControl. Pour obtenir des informations sur l’emplacement géographique sur la carte et la position physique dans la fenêtre d’affichage où le mouvement s’est produit, vérifiez les valeurs des propriétés Location et Position de MapInputEventArgs.
Déterminez si la carte est chargée ou entièrement chargée en gérant l’événement LoadingStatusChanged du contrôle.
Gérez les modifications qui se produisent lorsque l’utilisateur ou l’application modifie les paramètres de la carte en gérant les événements suivants de MapControl.
Recommandations de bonnes pratiques
Utilisez un espace écran ample (ou l’écran entier) pour afficher la carte de façon à ce que les utilisateurs n’aient pas à faire défiler ou à zoomer excessivement pour afficher des informations géographiques.
Si la carte est utilisée uniquement pour présenter une vue statique et informative, l’utilisation d’une carte plus petite peut être plus appropriée. Si vous optez pour une carte statique plus petite, basez ses dimensions sur la facilité d’utilisation : elle doit être suffisamment petite pour préserver l’espace disponible à l’écran, mais suffisamment grande pour rester lisible.
Incorporez les centres d’intérêt dans la carte à l’aide de la propriété map elements. Des informations supplémentaires éventuelles peuvent être présentées dans une interface utilisateur temporairement superposée à la carte.
Rubriques connexes
- Espace partenaires Bing Cartes
- Exemple de carte UWP
- Obtenir l’emplacement actuel
- Recommandations de conception pour les applications prenant en charge la géolocalisation
- Vidéos de la build 2015 : utilisation de cartes et de localisation sur un téléphone, une tablette et un PC dans vos applications Windows
- Exemple d’application de trafic UWP
- MapControl
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour