Share via

Xamarin.Forms マップ コントロール

  • [アーティクル]

Map コントロールは、マップを表示および注釈付けするためのクロスプラットフォーム ビューです。 プラットフォームごとにネイティブ マップ コントロールが使われ、ユーザーが使い慣れた地図エクスペリエンスが高速で提供されます。

iOS および Android 上のマップ コントロールのスクリーンショット

Map クラスでは、マップの表示と動作を制御する次のプロパティを定義します。

  • bool 型の IsShowingUser は、マップにユーザーの現在の場所が表示されているかどうかを示します。
  • ItemsSource: IEnumerable 型。表示する IEnumerable 項目のコレクションを指定します。
  • ItemTemplate: DataTemplate 型。表示される項目のコレクション内の各項目に適用する DataTemplate を指定します。
  • ItemTemplateSelector: DataTemplateSelector型。実行時に項目の DataTemplate を選ぶために使われる DataTemplateSelector を指定します。
  • bool 型の HasScrollEnabled は、マップのスクロールを許可するかどうかを決定します。
  • bool 型の HasZoomEnabled は、マップのズームを許可するかどうかを決定します。
  • IList<MapElement> 型の MapElements は、マップ上の要素 (多角形やポリラインなど) の一覧を表します。
  • MapType 型の MapType は、マップの表示スタイルを示します。
  • MoveToLastRegionOnLayoutChange: bool 型。レイアウトの変更が発生するときに、表示される地図の領域を現在の領域から前に設定されていた領域に移動するかどうかを制御します。
  • IList<Pin> 型の Pins は、マップ上のピンの一覧を表します。
  • bool 型の TrafficEnabled は、トラフィック データがマップ上にオーバーレイされているかどうかを示します。
  • MapSpan 型の VisibleRegion は、マップの現在表示されている領域を返します。

これらのプロパティは、MapElements、Pins、VisibleRegion などのプロパティを除いて、BindableProperty オブジェクトに基づいています。つまり、これらは、データ バインディングの対象にすることができます。

Map クラスは、マップをタップしたときに発生する MapClicked イベントも定義します。 イベントに付随する MapClickedEventArgs オブジェクトには、Position 型の Position という単一のプロパティがあります。 イベントが発生すると、Position プロパティはタップされたマップの場所に設定されます。 Position 構造体については、マップの位置と距離に関する記事をご覧ください。

ItemsSource、ItemTemplate、ItemTemplateSelector プロパティの詳細については、「ピン コレクションの表示」をご覧ください。

地図の表示

Map は、レイアウトまたはページに追加することで表示できます。

<ContentPage ...
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps">
    <maps:Map x:Name="map" />
</ContentPage>

Note

Xamarin.Forms.Maps コントロールを参照するには、xmlns 名前空間の定義を追加する必要があります。 前の例の Xamarin.Forms.Maps 名前空間は、maps キーワードを通して参照されています。

同等の C# コードを次に示します。

using Xamarin.Forms;
using Xamarin.Forms.Maps;

namespace WorkingWithMaps
{
    public class MapTypesPageCode : ContentPage
    {
        public MapTypesPageCode()
        {
            Map map = new Map();
            Content = map;
        }
    }
}

この例で呼び出す既定の Map コンストラクターは、ローマが地図の中心になるようにします。

既定の場所を使用した iOS および Android 上のマップ コントロールのスクリーンショット

または、Map コンストラクターに MapSpan 引数を渡して、マップの読み込み時に中心点とズーム レベルを設定することもできます。 詳細については、「マップに特定の場所を表示する」をご覧ください。

マップの種類

Map.MapType プロパティを MapType 列挙メンバーに設定して、マップの表示スタイルを定義できます。 MapType 列挙型には、次のメンバーが定義されています。

  • Street は、ストリート マップが表示されることを指定します。
  • Satellite は、衛星画像を含むマップを表示することを指定します。
  • Hybrid は、道路データと衛星データを組み合わせたマップを表示することを指定します。

既定では、MapType プロパティが未定義の場合、Map にはストリート マップが表示されます。 あるいは、MapType プロパティは、MapType 列挙型メンバーのいずれかに設定することもできます。

<maps:Map MapType="Satellite" />

同等の C# コードを次に示します。

Map map = new Map
{
    MapType = MapType.Satellite
};

次のスクリーンショットでは、MapType プロパティが Street に設定されている場合の Map を示します。

ストリート マップの種類を使用した iOS および Android 上のマップ コントロールのスクリーンショット

次のスクリーンショットでは、MapType プロパティが Satellite に設定されている場合の Map を示します。

サテライト マップの種類を使用した iOS および Android 上のマップ コントロールのスクリーンショット

次のスクリーンショットでは、MapType プロパティが Hybrid に設定されている場合の Map を示します。

ハイブリッド マップの種類を使用した iOS および Android 上のマップ コントロールのスクリーンショット

マップ上の特定の場所を表示する

マップが読み込まれるときに表示するマップの領域は、Map コンストラクターに MapSpan 引数を渡して設定できます。

<maps:Map>
    <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>

同等の C# コードを次に示します。

Position position = new Position(36.9628066, -122.0194722);
MapSpan mapSpan = new MapSpan(position, 0.01, 0.01);
Map map = new Map(mapSpan);

この例では、MapSpan オブジェクトで指定された領域を表示する Map オブジェクトを作成しています。 MapSpan オブジェクトは、Position オブジェクトで表される緯度と経度を中心とし、緯度 0.01 度および経度 0.01 度の範囲に及びます。 Position 構造体については、マップの位置と距離に関する記事をご覧ください。 XAML で引数を渡す方法については、「XAML での引数の受け渡し」をご覧ください。

結果として、このマップが表示されると、特定の場所をマップの中心として、緯度と経度の特定の度数に及ぶ範囲が表示されます。

指定された場所を使用した iOS および Android 上のマップ コントロールのスクリーンショット

MapSpan オブジェクトを作成する

MapSpan オブジェクトを作成するには、いくつかの方法があります。 一般的な方法は、必要な引数を MapSpan コンストラクターに渡すことです。 これらは、Position オブジェクトで表される緯度と経度、MapSpan の範囲を示す緯度と経度を表す double 値です。 Position 構造体については、マップの位置と距離に関する記事をご覧ください。

または、新しい MapSpan オブジェクトを返す 3 つのメソッドが MapSpan クラスにあります。

  1. ClampLatitude: メソッドのクラス インスタンスと同じ LongitudeDegrees と、メソッドの north および south 引数で定義された半径を持つ MapSpan を返します。
  2. FromCenterAndRadius: メソッドの Position および Distance 引数で定義された MapSpan を返します。
  3. WithZoom: メソッドのクラス インスタンスと同じ中心点と、メソッドのクラス インスタンスの半径に double 引数を乗算した半径を持つ MapSpan を返します。

Distance 構造体については、マップの位置と距離に関する記事をご覧ください。

MapSpan が作成されたら、次のプロパティにアクセスして、そのオブジェクトに関する次のデータを取得できます。

  • Center: MapSpan の地理的中心の Position を表します。
  • LatitudeDegrees: MapSpan によって囲まれる緯度の角度を表します。
  • LongitudeDegrees: MapSpan によって囲まれる経度の角度を表します。
  • Radius: MapSpan の半径を表します。

マップを移動する

Map.MoveToRegion メソッドを呼び出すと、マップの位置とズーム レベルを変更できます。 このメソッドは、表示するマップの領域とそのズーム レベルを定義する MapSpan 引数を受け取ります。

次のコードは、マップに表示されている領域を移動する例を示しています。

MapSpan mapSpan = MapSpan.FromCenterAndRadius(position, Distance.FromKilometers(0.444));
map.MoveToRegion(mapSpan);

マップをズームする

位置を変更せずに Map のズーム レベルを変更できます。 それには、マップ UI を使用するか、現在の場所を Position 引数とする MapSpan 引数を渡して MoveToRegion メソッドをプログラムで呼び出します。

double zoomLevel = 0.5;
double latlongDegrees = 360 / (Math.Pow(2, zoomLevel));
if (map.VisibleRegion != null)
{
    map.MoveToRegion(new MapSpan(map.VisibleRegion.Center, latlongDegrees, latlongDegrees));
}

この例では、Map.VisibleRegion プロパティを使用してマップの現在位置を指定しズーム レベルを緯度と経度で指定する MapSpan 引数を渡して、MoveToRegion メソッドを呼び出しています。 結果として、マップのズーム レベルは変更されますが、その位置は変更されません。 マップにズームを実装するもう 1 つの方法は、MapSpan.WithZoom メソッドを使用して拡大/縮小率を制御することです。

重要

マップ UI またはプログラムでマップをズームするには、Map.HasZoomEnabled プロパティが true である必要があります。 このプロパティの詳細については、「ズームを無効にする」をご覧ください。

マップの動作をカスタマイズする

Map は、その一部のプロパティを設定したり、MapClicked イベントを処理したりして、動作をカスタマイズできます。

Note

マップのカスタム レンダラーを作成すると、地図の動作をさらにカスタマイズできます。 詳しくは、Xamarin.Forms のマップのカスタマイズに関する記事をご覧ください。

トラフィック データを表示する

Map クラスには、bool 型の TrafficEnabled プロパティが定義されています。 既定では、このプロパティは false になっており、交通データがマップ上にオーバーレイされないことを示しています。 このプロパティを true に設定すると、地図上に交通データが重ね合わされます。 次に示すのは、このプロパティの設定の例です。

<maps:Map TrafficEnabled="true" />

同等の C# コードを次に示します。

Map map = new Map
{
    TrafficEnabled = true
};

スクロールを無効にする

Map クラスには、bool 型の HasScrollEnabled プロパティが定義されています。 既定では、このプロパティは true になっており、マップをスクロールできることを示しています。 このプロパティを false に設定すると、地図はスクロールしません。 次に示すのは、このプロパティの設定の例です。

<maps:Map HasScrollEnabled="false" />

同等の C# コードを次に示します。

Map map = new Map
{
    HasScrollEnabled = false
};

ズームを無効にする

Map クラスは、bool 型の HasZoomEnabled プロパティを定義します。 既定では、このプロパティは true で、マップ上でズームを実行できることを示します。 このプロパティを false に設定すると、地図を拡大できなくなります。 次に示すのは、このプロパティの設定の例です。

<maps:Map HasZoomEnabled="false" />

同等の C# コードを次に示します。

Map map = new Map
{
    HasZoomEnabled = false
};

ユーザーの場所を表示する

Map クラスは、bool 型の IsShowingUser プロパティを定義します。 既定では、このプロパティは false で、マップにユーザーの現在地が表示されていないことを示します。 このプロパティを true に設定すると、地図にユーザーの現在の場所が示されます。 次に示すのは、このプロパティの設定の例です。

<maps:Map IsShowingUser="true" />

同等の C# コードを次に示します。

Map map = new Map
{
    IsShowingUser = true
};

重要

iOS、Android、ユニバーサル Windows プラットフォームでは、ユーザーの場所にアクセスするには、場所のアクセス許可がアプリケーションに付与されている必要があります。 詳細については、「プラットフォームの構成」をご覧ください。

レイアウトの変更時に地図の領域を維持する

Map クラスには、bool 型の MoveToLastRegionOnLayoutChange プロパティが定義されています。 このプロパティの既定値は true であり、デバイスを回転したときなど、レイアウトの変更が発生したときに、表示される地図の領域が現在の領域から以前に設定されていた領域に移動することを示します。 このプロパティを false に設定すると、レイアウトの変更が発生しても、表示されている地図の領域が中央に維持されます。 次に示すのは、このプロパティの設定の例です。

<maps:Map MoveToLastRegionOnLayoutChange="false" />

同等の C# コードを次に示します。

Map map = new Map
{
    MoveToLastRegionOnLayoutChange = false
};

マップのクリック

Map クラスは、マップをタップしたときに発生する MapClicked イベントを定義します。 イベントに付随する MapClickedEventArgs オブジェクトには、Position 型の Position という単一のプロパティがあります。 イベントが発生すると、Position プロパティはタップされたマップの場所に設定されます。 Position 構造体については、マップの位置と距離に関する記事をご覧ください。

次のコード例は、MapClicked イベントのイベント ハンドラーを示しています。

void OnMapClicked(object sender, MapClickedEventArgs e)
{
    System.Diagnostics.Debug.WriteLine($"MapClick: {e.Position.Latitude}, {e.Position.Longitude}");
}

この例では、OnMapClicked イベントハンドラーは、タップされたマップの場所を表す緯度と経度を出力します。 次のように、イベント ハンドラーを MapClicked イベントに登録できます。

<maps:Map MapClicked="OnMapClicked" />

同等の C# コードを次に示します。

Map map = new Map();
map.MapClicked += OnMapClicked;