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 kumpulanIEnumerable
item yang akan ditampilkan.ItemTemplate
, dari jenisDataTemplate
, yang menentukanDataTemplate
untuk diterapkan ke setiap item dalam kumpulan item yang ditampilkan.ItemTemplateSelector
, dari jenisDataTemplateSelector
, yang menentukanDataTemplateSelector
yang akan digunakan untuk memilihDataTemplate
item 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 XamarinTemplate
DataTemplate
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.