Menampilkan tempat menarik pada peta

Catatan

Layanan MapControl dan peta memerlukan kunci autentikasi peta yang disebut MapServiceToken. Untuk informasi selengkapnya tentang mendapatkan dan mengatur kunci autentikasi peta, lihat Meminta kunci autentikasi peta.

Tambahkan tempat menarik (POI) ke peta menggunakan pushpin, gambar, bentuk, dan elemen UI XAML. POI adalah titik tertentu di peta yang mewakili sesuatu yang menarik. Misalnya, lokasi bisnis, kota, atau teman.

Untuk mempelajari selengkapnya tentang menampilkan POI di aplikasi Anda, unduh sampel berikut dari repositori Windows-universal-samples di GitHub: sampel peta Platform Windows Universal (UWP).

Tampilkan pushpin, gambar, dan bentuk pada peta dengan menambahkan objek MapIcon, MapBillboard, MapPolygon, dan MapPolyline ke koleksi MapElements objek MapElementsLayer . Kemudian, tambahkan objek lapisan tersebut ke koleksi Lapisan kontrol peta.

Catatan

Dalam rilis sebelumnya, panduan ini menunjukkan kepada Anda cara menambahkan elemen peta ke koleksi MapElements . Meskipun Anda masih dapat menggunakan pendekatan ini, Anda akan melewatkan beberapa keuntungan dari model lapisan peta baru. Untuk mempelajari selengkapnya, lihat bagian Bekerja dengan lapisan dari panduan ini.

Anda juga dapat menampilkan elemen antarmuka pengguna XAML seperti Tombol,HyperlinkButton, atau TextBlock di peta dengan menambahkannya ke MapItemsControl atau sebagai Anak dari MapControl.

Jika Anda memiliki sejumlah besar elemen untuk ditempatkan di peta, pertimbangkan untuk melapisi gambar petak peta. Untuk menampilkan jalan di peta, lihat Menampilkan rute dan petunjuk arah

Menambahkan pushpin

Tampilkan gambar seperti pushpin, dengan teks opsional, di peta dengan menggunakan kelas MapIcon . Anda dapat menerima gambar default atau memberikan gambar kustom dengan menggunakan properti Gambar . Gambar berikut menampilkan gambar default untuk MapIcon tanpa nilai yang ditentukan untuk properti Judul , dengan judul pendek, dengan judul panjang, dan dengan judul yang sangat panjang.

Contoh berikut menunjukkan peta kota Seattle dan menambahkan MapIcon dengan gambar default dan judul opsional untuk menunjukkan lokasi Space Needle. Ini juga mempusatkan peta di atas ikon dan memperbesar tampilan. Untuk informasi umum tentang menggunakan kontrol peta, lihat Menampilkan peta dengan tampilan 2D, 3D, dan Streetside.

public void AddSpaceNeedleIcon()
{
    var MyLandmarks = new List<MapElement>();

    BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
    Geopoint snPoint = new Geopoint(snPosition);

    var spaceNeedleIcon = new MapIcon
    {
        Location = snPoint,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        ZIndex = 0,
        Title = "Space Needle"
    };

    MyLandmarks.Add(spaceNeedleIcon);

    var LandmarksLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarks
    };

    myMap.Layers.Add(LandmarksLayer);

    myMap.Center = snPoint;
    myMap.ZoomLevel = 14;

}

Contoh ini menampilkan POI berikut di peta (gambar default di tengah).

Baris kode berikut menampilkan MapIcon dengan gambar kustom yang disimpan di folder Aset proyek. Properti GambarMapIcon mengharapkan nilai jenis RandomAccessStreamReference. Jenis ini memerlukan pernyataan penggunaan untuk namespace Windows.Storage.Streams .

Catatan

Jika Anda menggunakan gambar yang sama untuk beberapa ikon peta, deklarasikan RandomAccessStreamReference di tingkat halaman atau aplikasi untuk performa terbaik.

    MapIcon1.Image =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

Ingatlah pertimbangan ini saat bekerja dengan kelas MapIcon :

• Properti Gambar mendukung ukuran gambar maksimum 2048×2048 piksel.
• Secara default, gambar ikon peta tidak dijamin ditampilkan. Ini mungkin disembunyikan ketika mengaburkan elemen atau label lain di peta. Agar tetap terlihat, atur properti CollisionBehaviorDesired ikon peta ke MapElementCollisionBehavior.RemainVisible.
• Judul opsional MapIcon tidak dijamin ditampilkan. Jika Anda tidak melihat teks, perkecil dengan mengurangi nilai properti ZoomLevel dari MapControl.
• Saat Anda menampilkan gambar MapIcon yang menunjuk ke lokasi tertentu di peta - misalnya, pushpin atau panah - pertimbangkan untuk mengatur nilai properti NormalizedAnchorPoint ke perkiraan lokasi penunjuk pada gambar. Jika Anda membiarkan nilai NormalizedAnchorPoint pada nilai defaultnya (0, 0), yang mewakili sudut kiri atas gambar, perubahan di ZoomLevel peta dapat membiarkan gambar menunjuk ke lokasi yang berbeda.
• Jika Anda tidak secara eksplisit mengatur Altitude dan AltitudeReferenceSystem, MapIcon akan ditempatkan di permukaan.

Menambahkan pushpin 3D

Anda dapat menambahkan objek tiga dimensi ke peta. Gunakan kelas MapModel3D untuk mengimpor objek 3D dari file 3D Manufacturing Format (3MF ).

Gambar ini menggunakan cangkir kopi 3D untuk menandai lokasi kedai kopi di lingkungan sekitar.

Kode berikut menambahkan cangkir kopi ke peta dengan menggunakan mengimpor file 3MF. Agar tetap sederhana, kode ini menambahkan gambar ke tengah peta, tetapi kode Anda kemungkinan akan menambahkan gambar ke lokasi tertentu.

public async void Add3DMapModel()
{
    var mugStreamReference = RandomAccessStreamReference.CreateFromUri
        (new Uri("ms-appx:///Assets/mug.3mf"));

    var myModel = await MapModel3D.CreateFrom3MFAsync(mugStreamReference,
        MapModel3DShadingOption.Smooth);

    myMap.Layers.Add(new MapElementsLayer
    {
       ZIndex = 1,
       MapElements = new List<MapElement>
       {
          new MapElement3D
          {
              Location = myMap.Center,
              Model = myModel,
          },
       },
    });
}

Menambahkan gambar

Tampilkan gambar besar yang terkait dengan lokasi peta seperti gambar restoran atau tengara. Saat pengguna memperkecil, gambar akan menyusut secara proporsional dalam ukuran untuk memungkinkan pengguna melihat lebih banyak peta. Ini sedikit berbeda dari MapIcon yang menandai lokasi tertentu, biasanya kecil, dan tetap berukuran sama seperti pengguna memperbesar dan memperkecil peta.

Kode berikut menunjukkan MapBillboard yang disajikan dalam gambar di atas.

public void AddLandmarkPhoto()
{
    // Create MapBillboard.

    RandomAccessStreamReference mapBillboardStreamReference =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/billboard.jpg"));

    var mapBillboard = new MapBillboard(myMap.ActualCamera)
    {
        Location = myMap.Center,
        NormalizedAnchorPoint = new Point(0.5, 1.0),
        Image = mapBillboardStreamReference
    };

    // Add MapBillboard to a layer on the map control.

    var MyLandmarkPhotos = new List<MapElement>();

    MyLandmarkPhotos.Add(mapBillboard);

    var LandmarksPhotoLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyLandmarkPhotos
    };

    myMap.Layers.Add(LandmarksPhotoLayer);
}

Ada tiga bagian dari kode ini yang layak diperiksa sedikit lebih dekat: Gambar, kamera referensi, dan properti NormalizedAnchorPoint .

Gambar

Contoh ini menunjukkan gambar kustom yang disimpan di folder Aset proyek. Properti Gambar dari MapBillboard mengharapkan nilai jenis RandomAccessStreamReference. Jenis ini memerlukan pernyataan penggunaan untuk namespace Windows.Storage.Streams .

Catatan

Jika Anda menggunakan gambar yang sama untuk beberapa ikon peta, deklarasikan RandomAccessStreamReference di tingkat halaman atau aplikasi untuk performa terbaik.

Kamera referensi

Karena gambar MapBillboard menskalakan masuk dan keluar saat ZoomLevel peta berubah, penting untuk menentukan di mana zoomLevel gambar muncul pada skala 1x normal. Posisi itu didefinisikan dalam kamera referensi MapBillboard, dan untuk mengaturnya, Anda harus meneruskan objek MapCamera ke konstruktor MapBillboard.

Anda dapat menentukan posisi yang Anda inginkan di Geopoint, lalu menggunakan Geopoint tersebut untuk membuat objek MapCamera . Namun, dalam contoh ini, kita hanya menggunakan objek MapCamera yang dikembalikan oleh properti ActualCamera dari kontrol peta. Ini adalah kamera internal peta. Posisi kamera saat ini menjadi posisi kamera referensi; posisi tempat gambar MapBillboard muncul pada skala 1x.

Jika aplikasi Anda memberi pengguna kemampuan untuk memperkecil tampilan di peta, gambar berkurang ukurannya karena kamera internal peta meningkat dalam ketinggian sementara gambar pada skala 1x tetap pada posisi kamera referensi.

NormalizedAnchorPoint

NormalizedAnchorPoint adalah titik gambar yang berlabuh ke properti LokasiMapBillboard. Titik 0,5,1 adalah bagian tengah bawah gambar. Karena kita telah mengatur properti LokasiMapBillboard ke tengah kontrol peta, pusat bawah gambar akan berlabuh di tengah kontrol peta. Jika Anda ingin gambar Anda muncul di tengah langsung di atas titik, atur NormalizedAnchorPoint ke 0.5,0.5.

Menambahkan bentuk

Tampilkan bentuk multi-titik pada peta dengan menggunakan kelas MapPolygon . Contoh berikut, dari sampel peta UWP, menampilkan kotak merah dengan batas biru di peta.

public void HighlightArea()
{
    // Create MapPolygon.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;

    var mapPolygon = new MapPolygon
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude+0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        ZIndex = 1,
        FillColor = Colors.Red,
        StrokeColor = Colors.Blue,
        StrokeThickness = 3,
        StrokeDashed = false,
    };

    // Add MapPolygon to a layer on the map control.
    var MyHighlights = new List<MapElement>();

    MyHighlights.Add(mapPolygon);

    var HighlightsLayer = new MapElementsLayer
    {
        ZIndex = 1,
        MapElements = MyHighlights
    };

    myMap.Layers.Add(HighlightsLayer);
}

Menambahkan baris

Tampilkan garis pada peta dengan menggunakan kelas MapPolyline . Contoh berikut, dari sampel peta UWP, menampilkan garis putus-putus di peta.

public void DrawLineOnMap()
{
    // Create Polyline.

    double centerLatitude = myMap.Center.Position.Latitude;
    double centerLongitude = myMap.Center.Position.Longitude;
    var mapPolyline = new MapPolyline
    {
        Path = new Geopath(new List<BasicGeoposition> {
                    new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },
                    new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
                }),
        StrokeColor = Colors.Black,
        StrokeThickness = 3,
        StrokeDashed = true,
    };

   // Add Polyline to a layer on the map control.

   var MyLines = new List<MapElement>();

   MyLines.Add(mapPolyline);

   var LinesLayer = new MapElementsLayer
   {
       ZIndex = 1,
       MapElements = MyLines
   };

   myMap.Layers.Add(LinesLayer);

}

Tambahkan XAML

Tampilkan elemen UI kustom pada peta menggunakan XAML. Posisikan XAML pada peta dengan menentukan lokasi dan titik jangkar XAML yang dinormalisasi.

• Atur lokasi di peta tempat XAML ditempatkan dengan memanggil SetLocation.
• Atur lokasi relatif pada XAML yang sesuai dengan lokasi yang ditentukan dengan memanggil SetNormalizedAnchorPoint.

Contoh berikut menunjukkan peta kota Seattle dan menambahkan kontrol Batas XAML untuk menunjukkan lokasi Space Needle. Ini juga mempusatkan peta di atas area dan memperbesar tampilan. Untuk informasi umum tentang menggunakan kontrol peta, lihat Menampilkan peta dengan tampilan 2D, 3D, dan Streetside.

private void displayXAMLButton_Click(object sender, RoutedEventArgs e)
{
   // Specify a known location.
   BasicGeoposition snPosition = new BasicGeoposition { Latitude = 47.620, Longitude = -122.349 };
   Geopoint snPoint = new Geopoint(snPosition);

   // Create a XAML border.
   Border border = new Border
   {
      Height = 100,
      Width = 100,
      BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue),
      BorderThickness = new Thickness(5),
   };

   // Center the map over the POI.
   MapControl1.Center = snPoint;
   MapControl1.ZoomLevel = 14;

   // Add XAML to the map.
   MapControl1.Children.Add(border);
   MapControl.SetLocation(border, snPoint);
   MapControl.SetNormalizedAnchorPoint(border, new Point(0.5, 0.5));
}

Contoh ini menampilkan batas biru di peta.

Contoh berikutnya menunjukkan cara menambahkan elemen UI XAML langsung di markup XAML halaman menggunakan pengikatan data. Seperti halnya elemen XAML lain yang menampilkan konten, Children adalah properti konten default dari MapControl dan tidak harus ditentukan secara eksplisit dalam markup XAML.

Contoh ini menunjukkan cara menampilkan dua kontrol XAML sebagai turunan implisit dari MapControl. Kontrol ini muncul di peta di lokasi terikat data.

<maps:MapControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
</maps:MapControl>

Atur lokasi ini dengan menggunakan properti di file code-behind Anda.

public Geopoint SeattleLocation { get; set; }
public Geopoint BellevueLocation { get; set; }

Contoh ini menunjukkan cara menampilkan dua kontrol XAML yang terkandung dalam MapItemsControl. Kontrol ini muncul di peta di lokasi terikat data.

<maps:MapControl>
  <maps:MapItemsControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{x:Bind SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{x:Bind BellevueLocation}"/>
  </maps:MapItemsControl>
</maps:MapControl>

Contoh ini menampilkan kumpulan elemen XAML yang terikat ke MapItemsControl.

<maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
  <maps:MapItemsControl ItemsSource="{x:Bind LandmarkOverlays}">
      <maps:MapItemsControl.ItemTemplate>
          <DataTemplate>
              <StackPanel Background="Black" Tapped ="Overlay_Tapped">
                  <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Title}"
                    maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
              </StackPanel>
          </DataTemplate>
      </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>

Properti ItemsSource dalam contoh di atas terikat ke properti jenis IList dalam file code-behind.

public sealed partial class Scenario1 : Page
{
    public IList LandmarkOverlays { get; set; }

    public MyClassConstructor()
    {
         SetLandMarkLocations();
         this.InitializeComponent();   
    }

    private void SetLandMarkLocations()
    {
        LandmarkOverlays = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        LandmarkOverlays.Add(pikePlaceIcon);

        var SeattleSpaceNeedleIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.6205, Longitude = -122.3493 }),
            Title = "Seattle Space Needle"
        };

        LandmarkOverlays.Add(SeattleSpaceNeedleIcon);
    }
}

Bekerja dengan lapisan

Contoh dalam panduan ini menambahkan elemen ke koleksi MapElementLayers . Kemudian mereka menunjukkan cara menambahkan koleksi itu ke properti Layers dari kontrol peta. Dalam rilis sebelumnya, panduan ini menunjukkan kepada Anda cara menambahkan elemen peta ke koleksi MapElements sebagai berikut:

var pikePlaceIcon = new MapIcon
{
    Location = new Geopoint(new BasicGeoposition
    { Latitude = 47.610, Longitude = -122.342 }),
    NormalizedAnchorPoint = new Point(0.5, 1.0),
    ZIndex = 0,
    Title = "Pike Place Market"
};

myMap.MapElements.Add(pikePlaceIcon);

Meskipun Anda masih dapat menggunakan pendekatan ini, Anda akan melewatkan beberapa keuntungan dari model lapisan peta baru. Dengan mengelompokkan elemen Anda ke dalam lapisan, Anda dapat memanipulasi setiap lapisan secara independen satu sama lain. Misalnya, setiap lapisan memiliki serangkaian peristiwa sendiri sehingga Anda dapat merespons peristiwa pada lapisan tertentu dan melakukan tindakan khusus untuk peristiwa tersebut.

Selain itu, Anda dapat mengikat XAML langsung ke MapLayer. Ini adalah sesuatu yang tidak dapat Anda lakukan dengan menggunakan koleksi MapElements .

Salah satu cara yang dapat Anda lakukan adalah dengan menggunakan kelas model tampilan, kode di belakang halaman XAML, dan halaman XAML.

Lihat kelas model

public class LandmarksViewModel
{
    public ObservableCollection<MapLayer> LandmarkLayer
        { get; } = new ObservableCollection<MapLayer>();

    public LandmarksViewModel()
    {
        var MyElements = new List<MapElement>();

        var pikePlaceIcon = new MapIcon
        {
            Location = new Geopoint(new BasicGeoposition
            { Latitude = 47.610, Longitude = -122.342 }),
            Title = "Pike Place Market"
        };

        MyElements.Add(pikePlaceIcon);

        var LandmarksLayer = new MapElementsLayer
        {
            ZIndex = 1,
            MapElements = MyElements
        };

        LandmarkLayer.Add(LandmarksLayer);         
    }

Kode di belakang halaman XAML

Sambungkan kelas model tampilan ke kode Anda di belakang halaman.

public LandmarksViewModel ViewModel { get; set; }

public myMapPage()
{
    this.InitializeComponent();
    this.ViewModel = new LandmarksViewModel();
}

Halaman XAML

Di halaman XAML Anda, ikat ke properti di kelas model tampilan Anda yang mengembalikan lapisan .

<maps:MapControl
    x:Name="myMap" TransitFeaturesVisible="False" Loaded="MyMap_Loaded" Grid.Row="2"
    MapServiceToken="Your token" Layers="{x:Bind ViewModel.LandmarkLayer}"/>

Topik terkait

• Pusat Pengembang Bing Maps
• Sampel peta UWP
• Panduan desain untuk peta
• Video Build 2015: Memanfaatkan Peta dan Lokasi Di Ponsel, Tablet, dan PC di Aplikasi Windows Anda
• Sampel aplikasi lalu lintas UWP
• MapIcon
• MapPolygon
• MapPolyline