Partager via


Xamarin.Forms Contrôle de carte

Le contrôle Map est une vue multiplateforme permettant d’afficher et d’annoter des cartes. Il utilise le contrôle de carte natif pour chaque plateforme, offrant une expérience de cartes rapide et familière pour les utilisateurs :

Capture d’écran du contrôle de carte, sur iOS et Android

La Map classe définit les propriétés suivantes qui contrôlent l’apparence et le comportement de la carte :

  • IsShowingUser, de type bool, indique si la carte affiche l’emplacement actuel de l’utilisateur.
  • ItemsSource, de type IEnumerable, qui spécifie la collection d’éléments IEnumerable à afficher.
  • ItemTemplate, de type DataTemplate, qui spécifie l’application DataTemplate à chaque élément de la collection d’éléments affichés.
  • ItemTemplateSelector, de type DataTemplateSelector, qui spécifie celui DataTemplateSelector qui sera utilisé pour choisir un DataTemplate élément au moment de l’exécution.
  • HasScrollEnabled, de type bool, détermine si la carte est autorisée à faire défiler.
  • HasZoomEnabled, de type bool, détermine si la carte est autorisée à effectuer un zoom.
  • MapElements, de type IList<MapElement>, représente la liste des éléments sur la carte, tels que les polygones et les polylignes.
  • MapType, de type MapType, indique le style d’affichage de la carte.
  • MoveToLastRegionOnLayoutChange, de type bool, contrôle si la région de carte affichée passe de sa région actuelle à sa région définie précédemment lorsqu’une modification de disposition se produit.
  • Pins, de type IList<Pin>, représente la liste des broches sur la carte.
  • TrafficEnabled, de type bool, indique si les données de trafic sont superposées sur la carte.
  • VisibleRegion, de type MapSpan, retourne la région actuellement affichée de la carte.

Ces propriétés, à l’exception des MapElementspropriétés, PinsVisibleRegion sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données.

La Map classe définit également un MapClicked événement déclenché lorsque la carte est tapée. L’objet MapClickedEventArgs qui accompagne l’événement a une propriété unique nommée Position, de type Position. Lorsque l’événement est déclenché, la Position propriété est définie sur l’emplacement de la carte qui a été appuyé. Pour plus d’informations sur le struct, consultez Position et distance de la Position carte.

Pour plus d’informations sur les propriétés et ItemTemplateSelectorItemTemplateles ItemsSourcepropriétés, consultez Afficher une collection d’épingles.

Afficher une carte

Un Map peut être affiché en l’ajoutant à une mise en page ou à une page :

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
    <maps:Map x:Name="map" />
</ContentPage>

Remarque

Une définition d’espace de noms supplémentaire xmlns est requise pour référencer les Xamarin.Formscontrôles .Cartes. Dans l’exemple précédent, l’espace Xamarin.Forms.Maps de noms est référencé via le maps mot clé.

Le code C# équivalent est :

using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

Cet exemple appelle le constructeur par défaut Map , qui centre la carte sur Rome :

Capture d’écran du contrôle de carte avec emplacement par défaut, sur iOS et Android

Vous pouvez également passer un MapSpan argument à un Map constructeur pour définir le point central et le niveau de zoom de la carte lorsqu’il est chargé. Pour plus d’informations, consultez Afficher un emplacement spécifique sur une carte.

Types de mappages

La Map.MapType propriété peut être définie sur un MapType membre d’énumération pour définir le style d’affichage de la carte. L’énumération MapType définit les membres suivants :

  • Street spécifie qu’une carte de rue s’affiche.
  • Satellite spécifie qu’une carte contenant des images satellites s’affiche.
  • Hybrid spécifie qu’une carte combinant les données de rue et de satellite s’affiche.

Par défaut, une Map carte de rue s’affiche si la MapType propriété n’est pas définie. Vous pouvez également définir la MapType propriété sur l’un MapType des membres d’énumération :

<maps:Map MapType="Satellite" />

Le code C# équivalent est :

Map map = new Map
{
    MapType = MapType.Satellite
};

Les captures d’écran suivantes montrent une Map fois la MapType propriété définie sur Street:

Capture d’écran du contrôle de carte avec le type de carte de rue, sur iOS et Android

Les captures d’écran suivantes montrent une Map fois la MapType propriété définie sur Satellite:

Capture d’écran du contrôle de carte avec le type de carte satellite, sur iOS et Android

Les captures d’écran suivantes montrent une Map fois la MapType propriété définie sur Hybrid:

Capture d’écran du contrôle de carte avec le type de carte hybride, sur iOS et Android

Afficher un emplacement spécifique sur une carte

La région d’une carte à afficher lorsqu’une carte est chargée peut être définie en passant un MapSpan argument au Map constructeur :

<maps:Map>
    <x:Arguments>
        <maps:MapSpan>
            <x:Arguments>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>36.9628066</x:Double>
                        <x:Double>-122.0194722</x:Double>
                    </x:Arguments>
                </maps:Position>
                <x:Double>0.01</x:Double>
                <x:Double>0.01</x:Double>
            </x:Arguments>
        </maps:MapSpan>
    </x:Arguments>
</maps:Map>

Le code C# équivalent est :

Position position = new Position(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(position, 0.01, 0.01);
Map map = new Map(mapSpan);

Cet exemple crée un Map objet qui affiche la région spécifiée par l’objet MapSpan . L’objet MapSpan est centré sur la latitude et la longitude représentées par un Position objet, et s’étend sur 0,01 latitude et 0,01 degrés de longitude. Pour plus d’informations sur le struct, consultez Position et distance de la Position carte. Pour plus d’informations sur le passage d’arguments en XAML, consultez Passage d’arguments en XAML.

Le résultat est que lorsque la carte est affichée, elle est centrée sur un emplacement spécifique et s’étend sur un nombre spécifique de degrés de latitude et de longitude :

Capture d’écran du contrôle de carte avec emplacement spécifié, sur iOS et Android

Créer un objet MapSpan

Il existe un certain nombre d’approches pour la création MapSpan d’objets. Une approche courante consiste à fournir les arguments requis au MapSpan constructeur. Il s’agit d’une latitude et d’une longitude représentées par un Position objet, et double des valeurs qui représentent les degrés de latitude et de longitude qui sont répartis par le MapSpan. Pour plus d’informations sur le struct, consultez Position et distance de la Position carte.

Il existe également trois méthodes dans la MapSpan classe qui retournent de nouveaux MapSpan objets :

  1. ClampLatituderetourne une MapSpan valeur ayant la même LongitudeDegrees valeur que l’instance de classe de la méthode, et un rayon défini par ses arguments et south ses north arguments.
  2. FromCenterAndRadiusretourne une MapSpan valeur définie par ses arguments et Distance ses Position arguments.
  3. WithZoom retourne un MapSpan avec le même centre que l’instance de classe de la méthode, mais avec un rayon multiplié par son double argument.

Pour plus d’informations sur le struct, consultez Position et distance de la Distance carte.

Une fois qu’un MapSpan a été créé, les propriétés suivantes sont accessibles pour récupérer des données à ce sujet :

  • Center, qui représente le Position centre géographique du MapSpan.
  • LatitudeDegrees, qui représente les degrés de latitude qui sont répartis par le MapSpan.
  • LongitudeDegrees, qui représente les degrés de longitude qui sont répartis par le MapSpan.
  • Radius, qui représente le MapSpan rayon.

Déplacer la carte

La Map.MoveToRegion méthode peut être appelée pour modifier la position et le niveau de zoom d’une carte. Cette méthode accepte un MapSpan argument qui définit la région de la carte à afficher et son niveau de zoom.

Le code suivant montre un exemple de déplacement de la région affichée sur une carte :

MapSpan mapSpan = MapSpan.FromCenterAndRadius(position, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

Faire un zoom sur la carte

Le niveau de zoom d’un Map peut être modifié sans modifier son emplacement. Pour ce faire, utilisez l’interface utilisateur de la carte ou programmatiquement en appelant la MoveToRegion méthode avec un MapSpan argument qui utilise l’emplacement actuel comme Position argument :

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

Dans cet exemple, la MoveToRegion méthode est appelée avec un MapSpan argument qui spécifie l’emplacement actuel de la carte, via la Map.VisibleRegion propriété et le niveau de zoom sous forme de degrés de latitude et de longitude. Le résultat global est que le niveau de zoom de la carte est modifié, mais son emplacement n’est pas. Une autre approche pour implémenter le zoom sur une carte consiste à utiliser la MapSpan.WithZoom méthode pour contrôler le facteur de zoom.

Important

Effectuer un zoom avant sur une carte, que ce soit via l’interface utilisateur de la carte ou programmatiquement, nécessite que la Map.HasZoomEnabled propriété soit true. Pour plus d’informations sur cette propriété, consultez Désactiver le zoom.

Personnaliser le comportement de la carte

Le comportement d’un peut Map être personnalisé en définissant certaines de ses propriétés et en gérant l’événement MapClicked .

Remarque

Vous pouvez obtenir une personnalisation supplémentaire du comportement de carte en créant un renderer personnalisé de carte. Pour plus d’informations, consultez Personnalisation d’une Xamarin.Forms carte.

Afficher les données du trafic

La Map classe définit une TrafficEnabled propriété de type bool. Par défaut, cette propriété indique falseque les données de trafic ne seront pas superposées sur la carte. Lorsque cette propriété est définie truesur , les données de trafic sont superposées sur la carte. L’exemple suivant montre comment définir cette propriété :

<maps:Map TrafficEnabled="true" />

Le code C# équivalent est :

Map map = new Map
{
    TrafficEnabled = true
};

Désactiver le défilement

La Map classe définit une HasScrollEnabled propriété de type bool. Par défaut, cette propriété est true, ce qui indique que la carte est autorisée à faire défiler. Lorsque cette propriété est définie falsesur , la carte ne défile pas. L’exemple suivant montre comment définir cette propriété :

<maps:Map HasScrollEnabled="false" />

Le code C# équivalent est :

Map map = new Map
{
    HasScrollEnabled = false
};

Désactiver le zoom

La Map classe définit une HasZoomEnabled propriété de type bool. Par défaut, cette propriété indique trueque le zoom peut être effectué sur la carte. Lorsque cette propriété est définie falsesur , la carte ne peut pas être zoomée. L’exemple suivant montre comment définir cette propriété :

<maps:Map HasZoomEnabled="false" />

Le code C# équivalent est :

Map map = new Map
{
    HasZoomEnabled = false
};

Afficher l’emplacement de l’utilisateur

La Map classe définit une IsShowingUser propriété de type bool. Par défaut, cette propriété indique falseque la carte n’affiche pas l’emplacement actuel de l’utilisateur. Lorsque cette propriété est définie truesur , la carte affiche l’emplacement actuel de l’utilisateur. L’exemple suivant montre comment définir cette propriété :

<maps:Map IsShowingUser="true" />

Le code C# équivalent est :

Map map = new Map
{
    IsShowingUser = true
};

Important

Sur iOS, Android et le plateforme Windows universelle, l’accès à l’emplacement de l’utilisateur nécessite des autorisations d’emplacement pour avoir été accordées à l’application. Pour plus d’informations, consultez Configuration de la plateforme.

Gérer la région de carte lors de la modification de la disposition

La Map classe définit une MoveToLastRegionOnLayoutChange propriété de type bool. Par défaut, cette propriété indique trueque la région de carte affichée passe de sa région actuelle à sa région définie précédemment lorsqu’une modification de disposition se produit, par exemple lors de la rotation de l’appareil. Lorsque cette propriété est définie falsesur , la zone de carte affichée reste centrée lorsqu’une modification de disposition se produit. L’exemple suivant montre comment définir cette propriété :

<maps:Map MoveToLastRegionOnLayoutChange="false" />

Le code C# équivalent est :

Map map = new Map
{
    MoveToLastRegionOnLayoutChange = false
};

Mappage des clics

La Map classe définit un MapClicked événement déclenché lorsque la carte est tapée. L’objet MapClickedEventArgs qui accompagne l’événement a une propriété unique nommée Position, de type Position. Lorsque l’événement est déclenché, la Position propriété est définie sur l’emplacement de la carte qui a été appuyé. Pour plus d’informations sur le struct, consultez Position et distance de la Position carte.

L’exemple de code suivant montre un gestionnaire d’événements pour l’événement MapClicked :

void OnMapClicked(object sender, MapClickedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine($"MapClick: {e.Position.Latitude}, {e.Position.Longitude}");
}

Dans cet exemple, le OnMapClicked gestionnaire d’événements génère la latitude et la longitude qui représente l’emplacement mappé. Le gestionnaire d’événements peut être inscrit auprès de l’événement MapClicked comme suit :

<maps:Map MapClicked="OnMapClicked" />

Le code C# équivalent est :

Map map = new Map();
map.MapClicked += OnMapClicked;