【iOSアプリ開発】SampleMapKit作成！地図を使ったアプリを作る為に

今回はMapKitを使ったサンプルの作成手順をご紹介いたします。

以前のブログ記事、iOSアプリ開発の強い味方、cocoapodsを使いこなそう！で紹介したライブラリ、JPSThumbnailAnnotationを使う前提として地図を表示するためにMapKitというフレームワークを使用し、地図を表示させる必要があります。

※JPSThumbnailAnnotationを使うとこんな見た目のサムネイル付きピンが作れます。

今回、MapKitを使った地図アプリを作成後、上記の記事を読んで頂きライブラリを追加後に、是非ピンのカスタマイズを行ってみてください。

それではMapKitを使ったサンプルの手順になります。

 

前提

SingleViewApplicationを選択して作成したプロジェクトであること

 

1.プロジェクトにMapKitフレームワークを追加

左のツリー表示から青いプロジェクトファイルを選択
Linked Frameworks and Librariesにて『+』ボタンをクリック
現れたウィンドウ上の検索パネルで「MapKit」と検索し、Addボタンで追加

 

 

2.ViewController.h に 2点追加

• #import <MapKit/MapKit.h>
• <MKMapViewDelegate>

こんな形になります。

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface ViewController :UIViewController<MKMapViewDelegate>

@end

 

3-1.ViewDidLoadにMapKitオブジェクト作成

- (void)viewDidLoad
{
    [super viewDidLoad];


    //MapViewオブジェクトを生成
    MKMapView *mapView = [[MKMapView alloc] init];

    mapView.delegate = self;

    //大きさ、位置を決定
    mapView.frame = CGRectMake(0, 20, 320, 460);

    //表示するためにViewに追加
    [self.view addSubview:mapView];


}

 

3-2.ViewDidLoad内で追加したMapKitオブジェクトの中心座標を設定

- (void)viewDidLoad
{
    [super viewDidLoad];

    //MapViewオブジェクトを生成
    MKMapView *mapView = [[MKMapView alloc] init];

    mapView.delegate = self;

    //大きさ、位置を決定
    mapView.frame = CGRectMake(0, 20, 320, 460);


    //表示位置を設定　　↓追加ここから☆☆☆
    CLLocationCoordinate2D co;

    //アヤラの位置を設定
    co.latitude = 10.317347;    //緯度
    co.longitude = 123.905759;   //経度

    [mapView setCenterCoordinate:co];

    //追加ここまで↑ ☆☆☆

    //表示するためにViewに追加
    [self.view addSubview:mapView];


}

 

3-3.ViewDidLoad内で追加したMapKitオブジェクトの地図縮尺を設定

- (void)viewDidLoad
{
    [super viewDidLoad];

//MapViewオブジェクトを生成
MKMapView *mapView = [[MKMapView alloc] init];

mapView.delegate = self;

//大きさ、位置を決定
mapView.frame = CGRectMake(0, 20, 320, 460);


//表示位置を設定
CLLocationCoordinate2D co;

//アヤラの位置を設定
co.latitude = 10.317347;    //緯度
co.longitude = 123.905759;   //経度

[mapView setCenterCoordinate:co];

//縮尺を指定 ↓追加ここから☆☆☆
MKCoordinateRegion cr = mapView.region;

cr.span.latitudeDelta = 0.8;
cr.span.longitudeDelta = 0.8;

cr.center = co;

[mapView setRegion:cr];

//追加ここまで ↑☆☆☆

//表示するためにViewに追加
[self.view addSubview:mapView];
}

 

3-4.ViewDidLoad内で追加したMapKitオブジェクトの表示タイプを設定（ピンも1つたてておく）

- (void)viewDidLoad
{
    [super viewDidLoad];

//MapViewオブジェクトを生成
MKMapView *mapView = [[MKMapView alloc] init];

mapView.delegate = self;


//大きさ、位置を決定
mapView.frame = CGRectMake(0, 20, 320, 460);


//表示位置を設定
CLLocationCoordinate2D co;

//アヤラの位置を設定
co.latitude = 10.317347;    //緯度
co.longitude = 123.905759;   //経度

[mapView setCenterCoordinate:co];

//縮尺を指定
MKCoordinateRegion cr = mapView.region;

cr.span.latitudeDelta = 0.8;
cr.span.longitudeDelta = 0.8;

cr.center = co;

[mapView setRegion:cr];


//地図の表示種類設定
mapView.mapType = MKMapTypeStandard;   //追加☆☆☆

//ピンを立てる↓☆☆☆
//アヤラ
MKPointAnnotation *pin = [[MKPointAnnotation alloc] init];
pin.coordinate = CLLocationCoordinate2DMake(co.latitude, co.longitude);
pin.title = @"アヤラ";
pin.subtitle = @"biggest Shopping Mall in Cebu.";

[mapView addAnnotation:pin];

//ここまで↑☆☆☆

//表示するためにViewに追加
[self.view addSubview:mapView];

}