Xamarin.Forms Pin mappa

Download Sample Scaricare l'esempio

Il Xamarin.FormsMap controllo consente alle posizioni di essere contrassegnate con Pin oggetti . Un Pin è un marcatore mappa che apre una finestra di informazioni quando viene toccato:

Screenshot of a map pin and its information window, on iOS and Android

Quando un oggetto viene aggiunto alla raccolta, viene eseguito il rendering della puntina PinMap.Pins sulla mappa.

La Pin classe ha le proprietà seguenti:

  • Address, di tipo string , che in genere rappresenta l'indirizzo per la posizione del pin. Tuttavia, può trattarsi di qualsiasi string contenuto, non solo di un indirizzo.
  • Label, di tipo string , che in genere rappresenta il titolo del segnaposto.
  • Position, di tipo Position , che rappresenta la latitudine e la longitudine del pin.
  • Type, di tipo PinType , che rappresenta il tipo di pin.

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che un può essere la destinazione dei data Pin binding. Per altre informazioni sugli oggetti Pin data binding, vedere Pin.

Inoltre, la Pin classe definisce gli eventi e MarkerClickedInfoWindowClicked . L'evento viene generato quando viene toccato un segnaposto e l'evento viene generato quando viene toccata MarkerClickedInfoWindowClicked la finestra delle informazioni. PinClickedEventArgsL'oggetto che accompagna entrambi gli eventi ha una singola proprietà di tipo HideInfoWindowbool .

Visualizzare un segnaposto

Un Pin oggetto può essere aggiunto a un oggetto in Map XAML:

<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>

Questo codice XAML crea Map un oggetto che mostra l'area specificata dall'oggetto MapSpan . L'oggetto è centrato sulla latitudine e sulla longitudine rappresentate da un oggetto , che estende MapSpanPosition 0,01 gradi di latitudine e longitudine. Un Pin oggetto viene aggiunto all'insieme e Map.Pins disegnato in corrispondenza della posizione specificata dalla Map relativa proprietà Position . Per informazioni sullo Position struct, vedere Posizione della mappa Position Per informazioni sul passaggio di argomenti in XAML a oggetti privi di costruttori predefiniti, vedere Passaggio di argomenti in XAML.

Il codice C# equivalente è il seguente:

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);

Avviso

Se non si imposta la proprietà , verrà generata Pin.Label un'eccezione quando viene aggiunto a un oggetto ArgumentExceptionPinMap .

Questo codice di esempio comporta il rendering di un singolo segnaposto su una mappa:

Screenshot of a map pin, on iOS and Android

Interagire con un segnaposto

Per impostazione predefinita, quando Pin un oggetto viene toccato viene visualizzata la relativa finestra delle informazioni:

Screenshot of a map pin and its information window, on iOS and Android

Toccando altrove sulla mappa si chiude la finestra delle informazioni.

La Pin classe definisce un evento , che viene generato quando viene MarkerClickedPin toccato un oggetto . Non è necessario gestire questo evento per visualizzare la finestra delle informazioni. Questo evento deve essere invece gestito quando è necessario ricevere una notifica che indica che è stato toccato un pin specifico.

La Pin classe definisce anche un evento generato quando viene toccata una finestra delle InfoWindowClicked informazioni. Questo evento deve essere gestito quando è necessario ricevere una notifica che indica che è stata toccata una finestra di informazioni specifica.

Il codice seguente illustra un esempio di gestione di questi eventi:

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");
};

PinClickedEventArgsL'oggetto che accompagna entrambi gli eventi ha una singola proprietà di tipo HideInfoWindowbool . Quando questa proprietà è impostata su true all'interno di un gestore eventi, la finestra delle informazioni verrà nascosta.

Tipi di pin

Pin Gli oggetti includono Type una proprietà di tipo , che rappresenta il tipo di PinType pin. L'enumerazione PinType definisce i membri seguenti:

  • Generic, rappresenta un pin generico.
  • Place, rappresenta un segnaposto per una posizione.
  • SavedPin, rappresenta un segnaposto per una posizione salvata.
  • SearchResult, rappresenta un segnaposto per un risultato della ricerca.

Tuttavia, Pin.Type l'impostazione della proprietà su qualsiasi membro non modifica PinType l'aspetto del segnaposto sottoposto a rendering. È invece necessario creare un renderer personalizzato per personalizzare l'aspetto del segnaposto. Per altre informazioni, vedere Personalizzazione di un segnaposto della mappa.

Visualizzare una raccolta di segnaposto

La Map classe definisce le proprietà seguenti:

Importante

La proprietà ha la precedenza quando vengono impostate ItemTemplateItemTemplateItemTemplateSelector entrambe le proprietà e .

Un Map oggetto può essere popolato con pin usando data binding per associare la proprietà a una ItemsSourceIEnumerable raccolta:

<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>

I dati delle proprietà vengono associati alla proprietà del modello di visualizzazione connesso, che ItemsSource restituisce un oggetto di oggetti , ovvero un tipo LocationsObservableCollectionLocation personalizzato. Ogni Location oggetto definisce le proprietà e , di tipo , e una proprietà di tipo AddressDescriptionstringPositionPosition .

L'aspetto di ogni elemento nella raccolta viene definito impostando la proprietà su un oggetto contenente un oggetto associato ai dati IEnumerableItemTemplate alle proprietà DataTemplatePin appropriate.

Gli screenshot seguenti mostrano un Map oggetto che visualizza una raccolta usando Pin data binding:

Screenshot of map with data bound pins, on iOS and Android

Scegliere l'aspetto dell'elemento in fase di esecuzione

L'aspetto di ogni elemento nella raccolta può essere scelto in fase di esecuzione, in base al valore dell'elemento, impostando IEnumerableItemTemplateSelector la proprietà su DataTemplateSelector :

<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>

Nell'esempio seguente viene illustrata la MapItemTemplateSelector classe :

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;
    }
}

La MapItemTemplateSelector classe definisce le proprietà e impostate su modelli di dati DefaultTemplateXamarinTemplateDataTemplate diversi. Il OnSelectTemplate metodo restituisce , che visualizza "Xamarin" come etichetta quando viene toccato un oggetto , quando l'elemento ha un indirizzo che XamarinTemplate contiene Pin "San Francisco". Quando l'elemento non ha un indirizzo che contiene "San Francisco", il OnSelectTemplate metodo restituisce DefaultTemplate .

Nota

Un caso d'uso per questa funzionalità è l'associazione di proprietà di oggetti sottoclassati a proprietà Pin diverse, in base al Pin sottotipo.

Per altre informazioni sui selettori dei modelli di dati, vedere Creating a Xamarin.Forms DataTemplateSelector .