Xamarin.Forms Kartennadeln

Das Beispiel herunterladen

Das Xamarin.FormsMap -Steuerelement ermöglicht das Markieren von Speicherorten mit Pin -Objekten. Ein Pin ist ein Kartenmarker, der beim Tippen ein Informationsfenster öffnet:

Wenn der Map.Pins Auflistung ein Pin -Objekt hinzugefügt wird, wird der Pin auf der Karte gerendert.

Die Pin-Klasse weist die folgenden Eigenschaften auf:

• Addressvom Typ string, der in der Regel die Adresse für die Pinposition darstellt. Es kann sich jedoch um beliebige string Inhalte handeln, nicht nur um eine Adresse.
• Label, vom Typ string, der in der Regel den Pintitel darstellt.
• Positionvom Typ Position, der den Breiten- und Längengrad des Pins darstellt.
• Type, vom Typ PinType, der den Typ des Pins darstellt.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass ein Pin das Ziel von Datenbindungen sein kann. Weitere Informationen zu Datenbindungsobjekten Pin finden Sie unter Anzeigen einer Pinsammlung.

Darüber hinaus definiert die Pin -Klasse Ereignisse undInfoWindowClicked.MarkerClicked Das MarkerClicked Ereignis wird ausgelöst, wenn auf eine Pin getippt wird, und das InfoWindowClicked Ereignis wird ausgelöst, wenn das Informationsfenster angetippt wird. Das PinClickedEventArgs Objekt, das beide Ereignisse begleitet, verfügt über eine einzelne HideInfoWindow Eigenschaft vom Typ bool.

Anzeigen einer Stecknadel

Ein Pin kann in Map XAML hinzugefügt werden:

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
     <maps:Map x:Name="map"
               IsShowingUser="True"
               MoveToLastRegionOnLayoutChange="False">
         <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.Pins>
             <maps:Pin Label="Santa Cruz"
                       Address="The city with a boardwalk"
                       Type="Place">
                 <maps:Pin.Position>
                     <maps:Position>
                         <x:Arguments>
                             <x:Double>36.9628066</x:Double>
                             <x:Double>-122.0194722</x:Double>
                         </x:Arguments>
                     </maps:Position>
                 </maps:Pin.Position>
             </maps:Pin>
         </maps:Map.Pins>
     </maps:Map>
</ContentPage>

Dieser XAML-Code erstellt ein Map -Objekt, das den vom MapSpan -Objekt angegebenen Bereich anzeigt. Das MapSpan Objekt wird auf den Breiten- und Längengrad zentriert, der durch ein Position -Objekt dargestellt wird, das sich um 0,01 Breiten- und Längengrad erstreckt. Ein Pin -Objekt wird der Map.Pins Auflistung hinzugefügt und an der durch die -Eigenschaft angegebenen Position Position auf der Map gezeichnet. Informationen zur Position Struktur finden Sie unter Map Position und Entfernung. Informationen zum Übergeben von Argumenten in XAML an Objekte ohne Standardkonstruktoren finden Sie unter Übergeben von Argumenten in XAML.

Der entsprechende C#-Code lautet:

using Xamarin.Forms.Maps;
// ...
Map map = new Map
{
  // ...
};
Pin pin = new Pin
{
  Label = "Santa Cruz",
  Address = "The city with a boardwalk",
  Type = PinType.Place,
  Position = new Position(36.9628066, -122.0194722)
};
map.Pins.Add(pin);

Warnung

Wenn die Pin.Label -Eigenschaft nicht festgelegt wird, wird eine ArgumentException ausgelöst, wenn einem Pin hinzugefügt Mapwird.

Dieser Beispielcode führt dazu, dass ein einzelner Pin auf einer Karte gerendert wird:

Interagieren mit einer Stecknadel

Wenn auf ein Pin getippt wird, wird standardmäßig sein Informationsfenster angezeigt:

Wenn Sie an einer anderen Stelle auf der Karte tippen, wird das Informationsfenster geschlossen.

Die Pin -Klasse definiert ein MarkerClicked -Ereignis, das ausgelöst wird, wenn auf eine Pin getippt wird. Es ist nicht erforderlich, dieses Ereignis zu behandeln, um das Informationsfenster anzuzeigen. Stattdessen sollte dieses Ereignis behandelt werden, wenn es erforderlich ist, benachrichtigt zu werden, dass eine bestimmte Pin angetippt wurde.

Die Pin -Klasse definiert auch ein InfoWindowClicked Ereignis, das ausgelöst wird, wenn auf ein Informationsfenster getippt wird. Dieses Ereignis sollte behandelt werden, wenn eine Benachrichtigung erforderlich ist, dass ein bestimmtes Informationsfenster angetippt wurde.

Der folgende Code zeigt ein Beispiel für die Behandlung dieser Ereignisse:

using Xamarin.Forms.Maps;
// ...
Pin boardwalkPin = new Pin
{
    Position = new Position(36.9641949, -122.0177232),
    Label = "Boardwalk",
    Address = "Santa Cruz",
    Type = PinType.Place
};
boardwalkPin.MarkerClicked += async (s, args) =>
{
    args.HideInfoWindow = true;
    string pinName = ((Pin)s).Label;
    await DisplayAlert("Pin Clicked", $"{pinName} was clicked.", "Ok");
};

Pin wharfPin = new Pin
{
    Position = new Position(36.9571571, -122.0173544),
    Label = "Wharf",
    Address = "Santa Cruz",
    Type = PinType.Place
};
wharfPin.InfoWindowClicked += async (s, args) =>
{
    string pinName = ((Pin)s).Label;
    await DisplayAlert("Info Window Clicked", $"The info window was clicked for {pinName}.", "Ok");
};

Das PinClickedEventArgs Objekt, das beide Ereignisse begleitet, verfügt über eine einzelne HideInfoWindow Eigenschaft vom Typ bool. Wenn diese Eigenschaft in einem Ereignishandler auf true festgelegt ist, wird das Informationsfenster ausgeblendet.

Anheften von Typen

Pin -Objekte enthalten eine Type -Eigenschaft vom Typ PinType, die den Typ des Stifts darstellt. Die PinType-Enumeration definiert die folgenden Member:

• Generic, stellt einen generischen Pin dar.
• Place, stellt eine Stecknadel für einen Ort dar.
• SavedPin, stellt eine Stecknadel für einen gespeicherten Speicherort dar.
• SearchResult, stellt eine Stecknadel für ein Suchergebnis dar.

Das Festlegen der Pin.Type -Eigenschaft auf einen beliebigen PinType Member ändert jedoch nicht die Darstellung des gerenderten Pins. Stattdessen müssen Sie einen benutzerdefinierten Renderer erstellen, um die Pindarstellung anzupassen. Weitere Informationen finden Sie unter Anpassen einer Kartennadel.

Anzeigen einer PIN-Sammlung

Die Map-Klasse definiert die folgenden Eigenschaften:

• ItemsSourcevom Typ IEnumerable, der die Auflistung der IEnumerable anzuzeigenden Elemente angibt.
• ItemTemplatevom Typ DataTemplate, der angibt, dass DataTemplate auf jedes Element in der Auflistung der angezeigten Elemente angewendet werden soll.
• ItemTemplateSelector, vom Typ DataTemplateSelector, der den angibt, der DataTemplateSelector verwendet wird, um ein DataTemplate für ein Element zur Laufzeit auszuwählen.

Wichtig

Die ItemTemplate -Eigenschaft hat Vorrang, wenn sowohl die ItemTemplateItemTemplateSelector Eigenschaften als auch festgelegt sind.

Ein Map kann mit Pins aufgefüllt werden, indem die -Eigenschaft mithilfe der Datenbindung an eine IEnumerable Sammlung gebunden ItemsSource wird:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="WorkingWithMaps.PinItemsSourcePage">
    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Locations}">
            <maps:Map.ItemTemplate>
                <DataTemplate>
                    <maps:Pin Position="{Binding Position}"
                              Address="{Binding Address}"
                              Label="{Binding Description}" />
                </DataTemplate>
            </maps:Map.ItemTemplate>
        </maps:Map>
        ...
    </Grid>
</ContentPage>

Die ItemsSource Eigenschaftsdaten werden an die Locations -Eigenschaft des verbundenen Viewmodels gebunden, das einen ObservableCollection von Location -Objekten zurückgibt, bei dem es sich um einen benutzerdefinierten Typ handelt. Jedes Location Objekt definiert Address die Eigenschaften und Description vom Typ stringund eine Position Eigenschaft vom Typ Position.

Die Darstellung jedes Elements in der IEnumerable Auflistung wird definiert, indem die ItemTemplate -Eigenschaft auf ein DataTemplate -Objekt festgelegt wird, das ein Pin Objekt enthält, das daten an die entsprechenden Eigenschaften gebunden ist.

Die folgenden Screenshots zeigen, dass eine Map Sammlung mithilfe der Pin Datenbindung angezeigt wird:

Auswählen der Elementdarstellung zur Laufzeit

Die Darstellung jedes Elements in der IEnumerable Auflistung kann zur Laufzeit basierend auf dem Elementwert ausgewählt werden, indem die ItemTemplateSelector -Eigenschaft auf festgelegt DataTemplateSelectorwird:

<ContentPage ...
             xmlns:local="clr-namespace:WorkingWithMaps"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
    <ContentPage.Resources>
        <local:MapItemTemplateSelector x:Key="MapItemTemplateSelector">
            <local:MapItemTemplateSelector.DefaultTemplate>
                <DataTemplate>
                    <maps:Pin Position="{Binding Position}"
                              Address="{Binding Address}"
                              Label="{Binding Description}" />
                </DataTemplate>
            </local:MapItemTemplateSelector.DefaultTemplate>
            <local:MapItemTemplateSelector.XamarinTemplate>
                <DataTemplate>
                    <!-- Change the property values, or the properties that are bound to. -->
                    <maps:Pin Position="{Binding Position}"
                              Address="{Binding Address}"
                              Label="Xamarin!" />
                </DataTemplate>
            </local:MapItemTemplateSelector.XamarinTemplate>    
        </local:MapItemTemplateSelector>
    </ContentPage.Resources>

    <Grid>
        ...
        <maps:Map x:Name="map"
                  ItemsSource="{Binding Locations}"
                  ItemTemplateSelector="{StaticResource MapItemTemplateSelector}" />
        ...
    </Grid>
</ContentPage>

Das folgende Beispiel zeigt die MapItemTemplateSelector -Klasse:

public class MapItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate XamarinTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Location)item).Address.Contains("San Francisco") ? XamarinTemplate : DefaultTemplate;
    }
}

Die MapItemTemplateSelector -Klasse definiert DefaultTemplate und XamarinTemplateDataTemplate Eigenschaften, die auf unterschiedliche Datenvorlagen festgelegt sind. Die OnSelectTemplate -Methode gibt zurück XamarinTemplate, die "Xamarin" als Bezeichnung anzeigt, wenn auf ein Pin getippt wird, wenn das Element eine Adresse mit "San Francisco" enthält. Wenn das Element keine Adresse hat, die "San Francisco" enthält, gibt die OnSelectTemplate -Methode den DefaultTemplatezurück.

Hinweis

Ein Anwendungsfall für diese Funktionalität ist das Binden von Eigenschaften von Objekten unterer Klasse Pin an verschiedene Eigenschaften basierend auf dem Pin Untertyp.

Weitere Informationen zu Datenvorlagenselektoren finden Sie unter Erstellen eines DataTemplateSelector.For more information about data template selektor, see Creating a Xamarin.Forms DataTemplateSelector.

Verwandte Links

• Kartenbeispiel
• Benutzerdefinierter Kartenrenderer
• Übergeben von Argumenten in XAML
• Erstellen eines Xamarin.Forms DataTemplateSelector