[Xamarin.Forms] 地図を表示する(Xamarin.Forms.Maps編)

今回は、Xamarin.Formsで地図を表示する方法を見ていきたいと思います。

使用した環境は Visual Studio for Mac Preview版で、参考にしたサイトは http://www.buildinsider.net/mobile/xamarintips/0039 です。

はじめにプロジェクトの作成をします。

VS for Macでは、[Multiplatform]-[アプリ]を選択し、一覧から「Blank Forms App」を選択します。

続いてApp NameとOrganization Identifierを入力します。

App Nameにはアプリケーション名を、Organization Identifierは、一般的にドメインを逆に入力した文字列を入力します。私の場合は hiros-dot.net というドメインを持っているので「net.hiros-dot」と入力しています。

続いて、プロジェクト名、ソリューション名、ファイル一式を格納する場所を入力します。

とりあえず以上でプロジェクトの作成は完了です。

次にXamrin.Formsで使用可能な地図表示ライブラリ(Xamarin.Forms.Maps)をNuGetから取得します。

メニューの[プロジェクト]-[NuGetパッケージの追加]を選択します。

「パッケージを追加」というダイアログが表示されるので、右上の検索窓で「Xamarin.Forms.Maps」と入力して[Enter]キーを押します。

一覧で「Xamarin.Forms.Maps」にチェックを付けて、右下の[パッケージを追加]ボタンをクリックします。

パッケージの追加が完了したら、参照フォルダを展開してみて下さい。

追加した、Xamarin.Forms.Mapsが追加されていることを確認できます。

さて、いよいよ本題へと移ります。

画面に表示するページを作成します。

「iOS」も「Droid」も付いていないプロジェクトの下にMapPageという名前の新規クラスファイル(MapPage.cs)を作成します。

このMapPageはContentPageクラスを継承して作成します。

using System;

// 以下追加
using Xamarin.Forms;
using Xamarin.Forms.Maps;
namespace MapSample
{
    public class MapPage : ContentPage
    {
        public MapPage()
        {
            var map = new Map(
                MapSpan.FromCenterAndRadius(
                    new Position(35.6329, 139.8803),
                    Distance.FromMiles(0.0))) {
                IsShowingUser = true,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
	    Content = new StackLayout
            {
                Children = { map }
            };
        }
    }
}

参考にしたサイトのコードをそのまま拝借し、new Position と記載している箇所の引数の値を変更しています。この例ではディズニーランドを指しています。

続いて、App.xaml.cs ファイルを以下のように編集します。

using Xamarin.Forms;

namespace MapSample
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MapPage(); 
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

App() コンストラクタ内では、先ほど作成したMapPageのインスタンスをMainPageに代入するようにしています。

以上で実行すると、以下のように地図が表示されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です