MapControl

Le MapControl affiche une carte symbolique et interactive de la Terre alimentée par Azure Maps. Vous pouvez afficher des emplacements, ajouter des broches et des couches personnalisées et permettre aux utilisateurs d’interagir avec la carte à l’aide de contrôles panoramique, zoom, rotation et pitch.

MapControl nécessite un compte Azure Maps. Suivez les instructions de Gestion de votre compte Azure Maps pour créer un compte et obtenir un jeton de carte de service.

Est-ce le contrôle approprié ?

Utilisez un MapControl lorsque vous souhaitez afficher des données géographiques dans votre application, par exemple :

  • Affichage d’un emplacement sur une carte avec une épingle.
  • Affichage d’une collection de points d’intérêt.
  • Fournir une expérience de carte interactive avec zoom et panoramique.

Créer un MapControl

Icône galerie WinUI 3 L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

Ajoutez un MapControl à votre page et définissez l'MapServiceToken sur votre clé de Azure Maps.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Définir l’emplacement de la carte

Définissez les propriétés Center et ZoomLevel pour contrôler ce que la carte affiche.

using Windows.Devices.Geolocation;

var position = new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 };
myMap.Center = new Geopoint(position);
myMap.ZoomLevel = 12;
<!-- Set initial center and zoom in XAML is not supported; set in code-behind -->
<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Ajouter des broches à la carte

Utilisez MapIcon pour afficher des punaises sur la carte. Ajoutez des icônes à un MapElementsLayer, puis ajoutez la couche à la collection Layers de la carte.

using Windows.Devices.Geolocation;
using Microsoft.UI.Xaml.Controls;
using System.Collections.Generic;

var position = new BasicGeoposition
{
    Latitude = 47.6062,
    Longitude = -122.3321
};

var icon = new MapIcon
{
    Location = new Geopoint(position),
};

var layer = new MapElementsLayer
{
    MapElements = new List<MapElement> { icon }
};

myMap.Layers.Add(layer);

Afficher ou masquer des contrôles interactifs

La propriété InteractiveControlsVisible contrôle si la carte affiche des contrôles de superposition intégrés pour le zoom, la rotation, le tangage et le style de carte.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            InteractiveControlsVisible="True"
            Height="400" />

Gérer les clics sur les éléments de carte

Abonnez-vous à l’événement MapElementClick pour répondre lorsque l’utilisateur clique sur un élément de carte tel qu’une épingle.

myMap.MapElementClick += (sender, args) =>
{
    foreach (var element in args.MapElements)
    {
        if (element is MapIcon clickedIcon)
        {
            // Handle the clicked icon
        }
    }
};

Gérer les erreurs de service de carte

Abonnez-vous à l’événement MapServiceErrorOccurred pour détecter les problèmes de communication avec le service map, tels qu’un MapServiceToken non valide ou manquant.

myMap.MapServiceErrorOccurred += (sender, args) =>
{
    // Log or display the error
    System.Diagnostics.Debug.WriteLine("Map service error occurred.");
};