Xamarin逆引きTips

Xamarin逆引きTips

Xamarin.iOSで地図を表示するには?(MapKit使用)

2014年9月3日

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って地図を表示する方法を解説。また、地図の種類の変更、ジェスチャの有効/無効の切り替えなども説明する。

奥山 裕紳(@amay077
  • このエントリーをはてなブックマークに追加

 Xamarin.iOSで地図を扱う方法を解説する。まずはiOS標準の地図ライブラリ「MapKit」を使って地図を表示する方法を解説する。

1. プロジェクトを作成する

 メニューバーの[ファイル]-[新規]-[ソリューション]から表示したダイアログで、[C#]-[iOS]-[iPhone]-[Single View Application)]を選択し、ソリューション名を「MapKitSample」として[OK]ボタンを押す。

2. StoryboardでMap Viewを貼り付ける

 MainStoryboard.storyboardファイルを開いて、Toolboxから「Map Kit View」をViewControllerへドラッグ&ドロップして貼り付け、Viewの全体になるように位置と大きさを調整する。そしてプロパティ(Property)で[Name]を「mapView」とする(図1)。

図1 MKMapViewを貼り付けたStoryboard

 これだけで地図の表示が可能だ。ここまでのプログラムを実行すると、図2のようになる。

図2 プログラムの実行結果(地図の表示)
図2 プログラムの実行結果(地図の表示)

3. 地図の位置を変更する

 地図を指定の位置に移動させるには、以下のような方法がある。

  • 中心位置(緯度経度)を指定
  • 範囲(中心の緯度経度と幅、高さ)を指定
  • カメラ(緯度経度、視点の場所、視点の高さ)を指定

 それぞれを試すために、まずは画面にボタンを3つ、以下のように追加する。

図3 ボタンを貼り付けたStoryboard

中心位置(緯度経度)を指定

 MapKitSampleViewController.csファイルを、以下のように修正する。

C#
using MonoTouch.CoreLocation;
……省略……

public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();
    
    buttonCenter.TouchUpInside += (sender, e) => 
    {
      mapView.SetCenterCoordinate(
        new CLLocationCoordinate2D(35.68d, 139.76d), // 東京駅付近
        true); 
    };
  }

  ……省略……
}
中心位置(緯度経度)を指定するコード(MapKitSampleViewController.cs)

 MKMapViewオブジェクトのSetCenterCoordinateメソッドが、指定した緯度経度に移動するメソッドだ。第1引数が緯度経度を示すCLLocationCoordinate2Dクラス(MonoTouch.CoreLocation名前空間)のオブジェクト、第2引数は移動時にアニメーションを行うかどうかの指定だ。

範囲(中心の緯度経度と幅、高さ)を指定

 MapKitSampleViewController.csファイルを、以下のように修正する。

C#
using MonoTouch.MapKit;
……省略……

public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……
    
    buttonRegion.TouchUpInside += (sender, e) => 
    {
      mapView.SetRegion(
        new MKCoordinateRegion(
          new CLLocationCoordinate2D(35.46d, 139.62d), // 横浜駅付近
          new MKCoordinateSpan(0.01d, 0.01d)), 
        true);
    };
  }

  ……省略……
}
範囲(中心の緯度経度と幅、高さ)を指定するコード(MapKitSampleViewController.cs)

 範囲指定には MKMapView.SetRegionメソッドを使う。引数は範囲を示すMKCoordinateRegionオブジェクト(MonoTouch.MapKit名前空間)であり、そのコンストラクターの第1引数は範囲の中心の緯度経度、第2引数は範囲の幅と高さを「度」で指定するMKCoordinateSpanオブジェクト(MonoTouch.MapKit名前空間)だ。赤道上での0.01度はおよそ1.1kmであるが、緯度によって距離は変わるので目安程度に捉えてほしい。

カメラ(緯度経度、視点の場所、視点の高さ)を指定

 MapKitSampleViewController.csファイルを、以下のように修正する。

C#
public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……
    
    buttonCamera.TouchUpInside += (sender, e) => 
    {
      mapView.SetCamera(
        MKMapCamera.CameraLookingAtCenterCoordinate(
          new CLLocationCoordinate2D(35.71, 139.81), // 東京スカイツリー付近
          new CLLocationCoordinate2D(35.70, 139.82), // 押上駅付近
          10d), // カメラの高さ(m)
        true);
    };
  }

  ……省略……
}
カメラ(緯度経度、視点の場所、視点の高さ)を指定するコード(MapKitSampleViewController.cs)

 カメラによる移動には MKMapView.SetCameraメソッドを使う。引数は範囲を示すMKMapCameraオブジェクト(MonoTouch.MapKit名前空間)であり、そのファクトリメソッドCameraLookingAtCenterCoordinateで、「中心位置」「カメラの位置」「カメラの高度」を指定する。この例では「東京スカイツリー」を、「押上駅」の「10m上空」から見下ろす、という設定だ。

 ここまでのプログラムを実行すると、それぞれ以下の画面のようになる。

図4 プログラムの実行結果(それぞれ中心位置、範囲、カメラによる移動結果)

4. 地図の種類の変更、ジェスチャの有効/無効の切り替えなど

 その他の一般的な機能をまとめて紹介する。まずはMapKitSampleViewController.csファイルを、以下のように追加する。

C#
public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……
    
    mapView.MapType = MKMapType.Satellite; // 衛星画像 <-1

    mapView.ShowsUserLocation = true; // 現在位置を表示する <-2
    mapView.ShowsBuildings = false; // 建物を3D表示しない <-3

    mapView.ScrollEnabled = false; // ジェスチャでのスクロールを許可しない <-4
    mapView.ZoomEnabled = false; // ジェスチャでのズームを許可しない <-5
    mapView.RotateEnabled = false; // ジェスチャでの回転を許可しない <-6
    mapView.PitchEnabled = false; // ジェスチャでの視点変更を許可しない <-7
  }

  ……省略……
}
地図の種類の変更、ジェスチャの有効/無効の切り替えなど(MapKitSampleViewController.cs)

地図の種類の変更

 1は、表示する地図の種類を「衛星画像(MKMapType.Satellite)」に変更するコードだ。他に「通常(MKMapType.Standard)」や「通常+衛星画像(MKMapType.Hybrid)」が使用できる。

現在位置の表示切り替え

 2は、現在位置を表示するためのコードだ。trueを設定すると、GPSにより取得した現在の位置を、コーディングを行わなくても地図上に表示できる。

建物を3D表示に切り替え

 3は、建物を3Dで表示しないようにするコードだ。前出の東京スカイツリーなどは既定では3Dで表示されるが、これをfalseにすると2Dの表示になる。

ジェスチャ操作の有効無効切り替え

 4567はそれぞれ、ジェスチャでのスクロール、ズーム、回転、視点変更を無効にするためのコードだ。

 地図の種類を「衛星画像」、現在位置を「表示する」としたプログラムを実行すると、図5のようになる。

図5 プログラムの実行結果(衛星画像、現在位置を表示)
図5 プログラムの実行結果(衛星画像、現在位置を表示)

 現在位置を表示するためにGPSを使用するので、アプリケーションの起動時に「位置情報の利用許可を求めるダイアログ」が表示される。上図はiOSシミュレータで実行したものなので、現在位置はAppleの本社の位置が示される。

まとめ

 Xamarin.iOSでのMapKitの基本的な使い方を解説した。iOSネイティブのMapKitのAPIは、ほぼそのままXamarin.iOSで使える。ネイティブのMapKitのAPIリファレンスと、Xamarin.iOSのMapKitのAPIリファレンスを比べながら開発するとより分かりやすいだろう。

 次回以降は、MapKitで図形を描く方法や、マーカーを使用する方法について解説する予定だ。

※以下では、本稿の前後を合わせて5回分(第15回~第19回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

15. Xamarin.iOSで画面遷移先にデータを渡すには?(Storyboard使用)

Xamarin.iOSでStoryboardにより画面遷移を行う際に、遷移元から遷移先にデータを渡す方法を解説する。

16. Xamarin.iOSでの画面遷移で「戻る」を実現するには?(Storyboard、Unwind Segue使用)

画面遷移で戻る処理を実装する方法として、Xamarin StudioのiOSデザイナーで「Unwind Segue」を使う方法を説明する。

17. 【現在、表示中】≫ Xamarin.iOSで地図を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って地図を表示する方法を解説。また、地図の種類の変更、ジェスチャの有効/無効の切り替えなども説明する。

18. Xamarin.iOSで地図に図形を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、ライン、ポリゴン、円などの図形を地図上に表示する方法を解説する。

19. Xamarin.iOSで地図にマーカーを表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、マーカーを追加/削除するには? また、マーカー選択時の処理や、吹き出し表示、吹き出しタップ時の処理の、基本的な実装方法を説明する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社