Xamarin.iOS の注釈とオーバーレイ

このチュートリアルでビルドするアプリケーションを以下に示します。

まず、新しい iOS の空のプロジェクトを作成し、それに関連する名前を付けましょう。 まず、MapView を表示するコードをビュー コントローラーに追加し、MapDelegate の新しいクラスとカスタム注釈を作成します。 以下の手順でビルドします。

ViewController

1. ViewController に次の名前空間を追加します。

   using MapKit;
   using CoreLocation;
   using UIKit
   using CoreGraphics
   

2. MapDelegate インスタンスと共に、MKMapView インスタンス変数をクラスに追加します。 MapDelegate は後ほど作成します。

   public partial class ViewController : UIViewController
   {
       MKMapView map;
       MapDelegate mapDelegate;
       ...
   

3. コントローラーの LoadView メソッドで、MKMapView を追加し、それをコントローラーの View プロパティに設定します。

   public override void LoadView ()
   {
       map = new MKMapView (UIScreen.MainScreen.Bounds);
       View = map;
   }
   

   次に、"ViewDidLoad" メソッドでマップを初期化するコードを追加します。

4. ViewDidLoad で、マップの種類を設定し、ユーザーの場所を表示し、ズームとパンを許可するコードを追加します。

   // change map type, show user ___location and allow zooming and panning
   map.MapType = MKMapType.Standard;
   map.ShowsUserLocation = true;
   map.ZoomEnabled = true;
   map.ScrollEnabled = true;
   
   

5. 次に、マップを中央に配置し、その領域を設定するコードを追加します。

   double lat = 30.2652233534254;
   double lon = -97.73815460962083;
   CLLocationCoordinate2D mapCenter = new CLLocationCoordinate2D (lat, lon);
   MKCoordinateRegion mapRegion = MKCoordinateRegion.FromDistance (mapCenter, 100, 100);
   map.CenterCoordinate = mapCenter;
   map.Region = mapRegion;
   
   

6. MapDelegate の新しいインスタンスを作成し、それを MKMapView の Delegate に割り当てます。 ここでも、MapDelegate は後ほど実装します。

   mapDelegate = new MapDelegate ();
   map.Delegate = mapDelegate;
   

7. iOS 8 の時点では、ユーザーに場所を使用するための承認を要求する必要があるため、これをサンプルに追加しましょう。 まず、CLLocationManager クラス レベルの変数を定義します。

   CLLocationManager locationManager = new CLLocationManager();
   

8. ViewDidLoad メソッドでは、アプリケーションを実行しているデバイスで iOS 8 が使用されているかどうかを確認したいと考えています。そうである場合は、アプリの使用中に承認を要求します。

   if (UIDevice.CurrentDevice.CheckSystemVersion(8,0)){
       locationManager.RequestWhenInUseAuthorization ();
   }
   

9. 最後に、Info.plist ファイルを編集して、場所を要求する理由をユーザーに知らせる必要があります。 Info.plist の [ソース] メニューで、次のキー:

   NSLocationWhenInUseUsageDescription

   および文字列:

   Maps Walkthrough Docs Sample。

ConferenceAnnotation.cs – カスタム注釈のクラス

1. ここでは、ConferenceAnnotation という注釈にカスタム クラスを使用します。 次のクラスをプロジェクトに追加します。

   using System;
   using CoreLocation;
   using MapKit;
   
   namespace MapsWalkthrough
   {
       public class ConferenceAnnotation : MKAnnotation
       {
           string title;
           CLLocationCoordinate2D coord;
   
           public ConferenceAnnotation (string title,
           CLLocationCoordinate2D coord)
           {
               this.title = title;
               this.coord = coord;
           }
   
           public override string Title {
               get {
                   return title;
               }
           }
   
           public override CLLocationCoordinate2D Coordinate {
               get {
                   return coord;
               }
           }
       }
   }
   

ViewController - 注釈とオーバーレイの追加

1. ConferenceAnnotation を配置すると、マップに追加できます。 ViewController の ViewDidLoad メソッドに戻り、マップの中心座標に注釈を追加します。

   map.AddAnnotations (new ConferenceAnnotation ("Evolve Conference", mapCenter));
   

2. また、ホテルのオーバーレイが必要です。 次のコードを追加し、指定されたホテルの座標を使用して MKPolygon を作成し、AddOverlay を呼び出してマップに追加します。

   // add an overlay of the hotel
   MKPolygon hotelOverlay = MKPolygon.FromCoordinates(
       new CLLocationCoordinate2D[]{
       new CLLocationCoordinate2D(30.2649977168594, -97.73863627705),
       new CLLocationCoordinate2D(30.2648461170005, -97.7381627734755),
       new CLLocationCoordinate2D(30.2648355402574, -97.7381750192576),
       new CLLocationCoordinate2D(30.2647791309417, -97.7379872505988),
       new CLLocationCoordinate2D(30.2654525150319, -97.7377341711021),
       new CLLocationCoordinate2D(30.2654807195004, -97.7377994819399),
       new CLLocationCoordinate2D(30.2655089239607, -97.7377994819399),
       new CLLocationCoordinate2D(30.2656428950368, -97.738346460207),
       new CLLocationCoordinate2D(30.2650364981811, -97.7385709662122),
       new CLLocationCoordinate2D(30.2650470749025, -97.7386199493406)
   });
   
   map.AddOverlay (hotelOverlay);
   

これで、ViewDidLoad のコードは完成です。 次に、注釈およびオーバーレイ ビューの作成をそれぞれ処理するために、MapDelegate クラスを実装する必要があります。

MapDelegate

1. MKMapViewDelegate から継承する MapDelegate というクラスを作成し、注釈の再利用識別子として使用するために annotationId を含めます。

   class MapDelegate : MKMapViewDelegate
   {
       static string annotationId = "ConferenceAnnotation";
       ...
   }
   

   ここには注釈が 1 つしかないため、再利用コードは厳密には必要ありませんが、それを含めることをお勧めします。

2. このチュートリアルに含まれている conference.png 画像を使用して、ConferenceAnnotation のビューを返す GetViewForAnnotation メソッドを実装します。

   public override MKAnnotationView GetViewForAnnotation (MKMapView mapView, NSObject annotation)
   {
       MKAnnotationView annotationView = null;
   
       if (annotation is MKUserLocation)
           return null;
   
       if (annotation is ConferenceAnnotation) {
   
           // show conference annotation
           annotationView = mapView.DequeueReusableAnnotation (annotationId);
   
           if (annotationView == null)
               annotationView = new MKAnnotationView (annotation, annotationId);
   
           annotationView.Image = UIImage.FromFile ("images/conference.png");
           annotationView.CanShowCallout = true;
       }
   
       return annotationView;
   }
   

3. ユーザーが注釈をタップしたときに、オースティン市を示す画像が表示されるようにしたいと考えています。 画像とそれを表示するためのビューについては、次の変数を MapDelegate に追加します。

   UIImageView venueView;
   UIImage venueImage;
   

4. 次に、注釈がタップされたときに画像を表示するには、次のように DidSelectAnnotation メソッドを実装します。

   public override void DidSelectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // show an image view when the conference annotation view is selected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView = new UIImageView ();
           venueView.ContentMode = UIViewContentMode.ScaleAspectFit;
           venueImage = UIImage.FromFile ("image/venue.png");
           venueView.Image = venueImage;
           view.AddSubview (venueView);
   
           UIView.Animate (0.4, () => {
           venueView.Frame = new CGRect (-75, -75, 200, 200); });
       }
   }
   

5. ユーザーがマップ上の他の場所をタップして注釈の選択を解除したときに画像を非表示にするには、次のように DidDeselectAnnotationView メソッドを実装します。

   public override void DidDeselectAnnotationView (MKMapView mapView, MKAnnotationView view)
   {
       // remove the image view when the conference annotation is deselected
       if (view.Annotation is ConferenceAnnotation) {
   
           venueView.RemoveFromSuperview ();
           venueView.Dispose ();
           venueView = null;
       }
   }
   

   これで、注釈のコードが配置されました。 あとは、MapDelegate にコードを追加して、ホテル オーバーレイのビューを作成するだけです。

6. MapDelegate に次の GetViewForOverlay の実装を追加します。

   public override MKOverlayView GetViewForOverlay (MKMapView mapView, NSObject overlay)
   {
       // return a view for the polygon
       MKPolygon polygon = overlay as MKPolygon;
       MKPolygonView polygonView = new MKPolygonView (polygon);
       polygonView.FillColor = UIColor.Blue;
       polygonView.StrokeColor = UIColor.Red;
       return polygonView;
   }
   

アプリケーションを実行します。 これで、カスタム注釈とオーバーレイを含む対話型マップが作成されました。 注釈をタップすると、次に示すように、オースティンの画像が表示されます。

まとめ

この記事では、マップに注釈を追加する方法と、指定された多角形のオーバーレイを追加する方法について説明しました。 また、マップ上で画像をアニメーション化するために、注釈にタッチ サポートを追加する方法についても説明しました。

関連リンク

• iOS のマップ