Bagikan melalui

MapControl

MapControl menampilkan peta simbolis interaktif Bumi yang didukung oleh Azure Maps. Anda dapat menampilkan lokasi, menambahkan pin dan lapisan kustom, dan memungkinkan pengguna berinteraksi dengan peta menggunakan kontrol pan, zoom, rotasi, dan pitch.

MapControl memerlukan akun Azure Maps. Ikuti instruksi di Kelola akun Azure Maps Anda untuk membuat akun dan mendapatkan token layanan peta.

Apakah ini kontrol yang tepat?

Gunakan MapControl saat Anda ingin menampilkan data geografis di aplikasi Anda, seperti:

  • Menampilkan lokasi di peta dengan pin.
  • Menampilkan kumpulan tempat menarik.
  • Memberikan pengalaman peta interaktif dengan zoom dan pan.

Membuat MapControl

Buka aplikasi Galeri WinUI 3 dan lihat MapControl beraksi

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Tambahkan MapControl ke halaman Anda dan atur MapServiceToken ke kunci Azure Maps Anda.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Mengatur lokasi peta

Atur properti Tengah dan ZoomLevel untuk mengontrol apa yang ditampilkan peta.

using Windows.Devices.Geolocation;

var position = new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 };
myMap.Center = new Geopoint(position);
myMap.ZoomLevel = 12;

<!-- Set initial center and zoom in XAML is not supported; set in code-behind -->
<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            Height="400" />

Menambahkan pin ke peta

Gunakan MapIcon untuk menampilkan pushpin di peta. Tambahkan ikon ke MapElementsLayer, lalu tambahkan lapisan ke koleksi Lapisan peta.

using Windows.Devices.Geolocation;
using Microsoft.UI.Xaml.Controls;
using System.Collections.Generic;

var position = new BasicGeoposition
{
    Latitude = 47.6062,
    Longitude = -122.3321
};

var icon = new MapIcon
{
    Location = new Geopoint(position),
};

var layer = new MapElementsLayer
{
    MapElements = new List<MapElement> { icon }
};

myMap.Layers.Add(layer);

Perlihatkan atau sembunyikan kontrol interaktif

Properti InteractiveControlsVisible mengontrol apakah peta menampilkan kontrol overlay bawaan untuk zoom, rotasi, pitch, dan gaya peta.

<MapControl x:Name="myMap"
            MapServiceToken="YOUR_AZURE_MAPS_TOKEN"
            InteractiveControlsVisible="True"
            Height="400" />

Menangani klik elemen peta

Berlangganan ke peristiwa MapElementClick untuk merespons saat pengguna mengklik elemen peta seperti pin.

myMap.MapElementClick += (sender, args) =>
{
    foreach (var element in args.MapElements)
    {
        if (element is MapIcon clickedIcon)
        {
            // Handle the clicked icon
        }
    }
};

Menangani kesalahan layanan peta

Berlangganan ke peristiwa MapServiceErrorOccurred untuk mendeteksi masalah berkomunikasi dengan layanan peta, seperti MapServiceToken yang tidak valid atau hilang.

myMap.MapServiceErrorOccurred += (sender, args) =>
{
    // Log or display the error
    System.Diagnostics.Debug.WriteLine("Map service error occurred.");
};
  • Last updated on