今回は、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に代入するようにしています。
以上で実行すると、以下のように地図が表示されます。
コメント