Xamarin.Forms Pin Peta
Kontrol memungkinkan Xamarin.FormsMap lokasi ditandai dengan Pin objek. Pin adalah penanda peta yang membuka jendela informasi saat diketuk:
Pin Saat objek ditambahkan ke Map.Pins koleksi, pin dirender di peta.
Kelas Pin memiliki properti berikut:
Address, dari jenisstring, yang biasanya mewakili alamat untuk lokasi pin. Namun, itu bisa menjadi konten apa punstring, bukan hanya alamat.Label, dari jenisstring, yang biasanya mewakili judul pin.Position, dari jenisPosition, yang mewakili garis lintang dan bujur pin.Type, dari jenisPinType, yang mewakili jenis pin.
Properti ini didukung oleh BindableProperty objek, yang berarti Pin dapat menjadi target pengikatan data. Untuk informasi selengkapnya tentang objek pengikatan Pin data, lihat Menampilkan kumpulan pin.
Selain itu, Pin kelas menentukan MarkerClicked dan InfoWindowClicked peristiwa. Peristiwa MarkerClicked ditembakkan saat pin diketuk, dan InfoWindowClicked peristiwa ditembakkan saat jendela informasi diketuk. Objek PinClickedEventArgs yang menyertai kedua peristiwa memiliki satu HideInfoWindow properti, dari jenis bool.
Menampilkan pin
Pin Dapat ditambahkan ke Map dalam 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>
XAML ini membuat Map objek yang menunjukkan wilayah yang ditentukan oleh MapSpan objek. Objek MapSpan berpusat pada garis lintang dan garis bujur yang diwakili oleh Position objek, yang membentang 0,01 garis lintang dan derajat garis bujur. Objek Pin ditambahkan ke Map.Pins koleksi, dan digambar pada Map lokasi yang ditentukan oleh propertinya Position . Untuk informasi tentang Position struktur, lihat Posisi dan Jarak Peta. Untuk informasi tentang meneruskan argumen di XAML ke objek yang tidak memiliki konstruktor default, lihat Meneruskan Argumen di XAML.
Kode C# yang setara adalah:
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);
Peringatan
Kegagalan untuk mengatur Pin.Label properti akan mengakibatkan ArgumentException dilemparkan ketika Pin ditambahkan ke Map.
Contoh kode ini menghasilkan satu pin yang dirender di peta:
Berinteraksi dengan pin
Secara default, saat Pin jendela informasinya diketuk ditampilkan:
Mengetuk di tempat lain di peta menutup jendela informasi.
Kelas Pin mendefinisikan MarkerClicked peristiwa, yang diaktifkan saat Pin diketuk. Tidak perlu menangani kejadian ini untuk menampilkan jendela informasi. Sebagai gantinya, peristiwa ini harus ditangani ketika ada persyaratan untuk diberi tahu bahwa pin tertentu telah diketuk.
Kelas Pin juga menentukan InfoWindowClicked peristiwa yang diaktifkan saat jendela informasi diketuk. Kejadian ini harus ditangani ketika ada persyaratan untuk diberi tahu bahwa jendela informasi tertentu telah diketuk.
Kode berikut menunjukkan contoh penanganan peristiwa ini:
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");
};
Objek PinClickedEventArgs yang menyertai kedua peristiwa memiliki satu HideInfoWindow properti, dari jenis bool. Ketika properti ini diatur ke true dalam penanganan aktivitas, jendela informasi akan disembunyikan.
Jenis pin
Pin objek menyertakan Type properti, jenis PinType, yang mewakili jenis pin. Enumerasi PinType menentukan anggota berikut:
Generic, mewakili pin generik.Place, mewakili pin untuk suatu tempat.SavedPin, mewakili pin untuk lokasi yang disimpan.SearchResult, mewakili pin untuk hasil pencarian.
Namun, mengatur Pin.Type properti ke anggota mana pun PinType tidak mengubah tampilan pin yang dirender. Sebagai gantinya, Anda harus membuat perender kustom untuk menyesuaikan tampilan pin. Untuk informasi selengkapnya, lihat Menyesuaikan pin peta.
Menampilkan koleksi pin
Kelas Map menentukan properti berikut:
ItemsSource, dari jenisIEnumerable, yang menentukan kumpulanIEnumerableitem yang akan ditampilkan.ItemTemplate, dari jenisDataTemplate, yang menentukanDataTemplateuntuk diterapkan ke setiap item dalam kumpulan item yang ditampilkan.ItemTemplateSelector, dari jenisDataTemplateSelector, yang menentukanDataTemplateSelectoryang akan digunakan untuk memilihDataTemplateitem saat runtime.
Penting
Properti ItemTemplate lebih diutamakan ketika ItemTemplate properti dan ItemTemplateSelector diatur.
Map dapat diisi dengan pin dengan menggunakan pengikatan data untuk mengikat propertinya ItemsSource ke IEnumerable koleksi:
<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>
Data ItemsSource properti mengikat ke Locations properti viewmodel yang terhubung, yang mengembalikan ObservableCollection objek Location , yang merupakan jenis kustom. Setiap Location objek menentukan Address dan Description properti, jenis string, dan Position properti, dari jenis Position.
Tampilan setiap item dalam IEnumerable koleksi ditentukan dengan mengatur ItemTemplate properti ke DataTemplate yang berisi Pin objek yang mengikat data ke properti yang sesuai.
Cuplikan layar berikut menunjukkan Map tampilan Pin koleksi menggunakan pengikatan data:
Pilih tampilan item saat runtime
Tampilan setiap item dalam IEnumerable koleksi dapat dipilih pada runtime, berdasarkan nilai item, dengan mengatur ItemTemplateSelector properti ke 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>
Contoh berikut menunjukkan MapItemTemplateSelector kelas:
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;
}
}
Kelas MapItemTemplateSelector menentukan DefaultTemplate dan XamarinTemplateDataTemplate properti yang diatur ke templat data yang berbeda. Metode OnSelectTemplate mengembalikan XamarinTemplate, yang menampilkan "Xamarin" sebagai label ketika Pin diketuk, ketika item memiliki alamat yang berisi "San Francisco". Ketika item tidak memiliki alamat yang berisi "San Francisco", OnSelectTemplate metode mengembalikan DefaultTemplate.
Catatan
Kasus penggunaan untuk fungsionalitas ini mengikat properti objek sub-kelas Pin ke properti yang berbeda, berdasarkan Pin subjenis.
Untuk informasi selengkapnya tentang pemilih templat data, lihat Membuat Xamarin.Forms DataTemplateSelector.