マップコントロール (MapControl)

MapControl は、Azure Maps を利用した地球のシンボリックな対話型マップを表示します。 位置を表示したり、ピンとカスタム レイヤーを追加したり、ユーザーがパン、ズーム、回転、ピッチ コントロールを使用してマップを操作したりできます。

MapControl には、Azure Maps アカウントが必要です。 Azure Maps アカウントの管理の手順に従ってアカウントを作成し、マップ サービス トークンを取得します。

これは適切なコントロールですか?

次のような地理的データをアプリに表示する場合は、MapControl を使用します。

  • マップ上の場所をピン留めして表示する。
  • 関心のあるポイントのコレクションを表示します。
  • ズームとパンを使用して対話型のマップ エクスペリエンスを提供します。

MapControl を作成する

WinUI 3 ギャラリー アプリを開き、MapControl の動作を確認する

WinUI 3 ギャラリー アイコン WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソース コードを参照します。

MapControl をページに追加し、Azure Maps キーに MapServiceToken を設定します。

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

マップの場所を設定する

[中心] プロパティと [ZoomLevel] プロパティを設定して、マップの表示を制御します。

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

マップにピンを追加する

MapIcon を使用して、マップ上にプッシュピンを表示します。 MapElementsLayer にアイコンを追加し、そのレイヤーをマップの Layers コレクションに追加します。

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

対話型コントロールの表示と非表示を切り替える

InteractiveControlsVisible プロパティは、マップにズーム、回転、ピッチ、マップ スタイルの組み込みのオーバーレイ コントロールを表示するかどうかを制御します。

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

マップ要素のクリックを処理する

MapElementClick イベントをサブスクライブして、ユーザーがピンなどのマップ要素をクリックしたときに応答します。

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

マップ サービスのエラーを処理する

MapServiceErrorOccurred イベントをサブスクライブして、マップ サービスと通信している問題 (無効な MapServiceToken や不足している MapServiceToken など) を検出します。

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