MapKit を使用してい以下のことをやってみます。

  • アイコン画像でピンを立てる
  • ピンをタップするとバルーンを表示する
  • バルーンのアクセサリをタップ可能にする

アノテーションクラス

ピンを立てるにはアノテーションというプロトコルを使用します。このプロトコルを持ったクラス MyAnnotation を作成します。バルーンには左右に View とタイトルとサブタイトルを表示することができます。左右に表示する View は後で説明する MKAnnotationView に設定しますが、タイトルとサブタイトルは MKAnnotation プロトコルを持つクラスに設定します。

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

@interface MyAnnotation : NSObject <MKAnnotation> {
	CLLocationCoordinate2D coordinate;
	NSString* subtitle;
	NSString* title;
}

@property (nonatomic, readonly) CLLocationCoordinate2D coordinate;
@property (nonatomic, retain) NSString* subtitle;
@property (nonatomic, retain) NSString* title;

- (id) initWithCoordinate:(CLLocationCoordinate2D) coordinate;

@end

@implementation MyAnnotation

@synthesize coordinate, subtitle, title;

- (id) initWithCoordinate:(CLLocationCoordinate2D)c {
	coordinate = c;
	return self;
}

@end

アノテーションをマップに追加

MyAnnotation クラスを使用してマップにアノテーションを追加します。ここでは東京タワーの緯度、経度、タイトル、サブタイトルを指定しています。

MyAnnotation *annotation;
CLLocationCoordinate2D location;
location.latitude  = 35.65533333;
location.longitude = 139.7486111;
annotation =[[MyAnnotation alloc] initWithCoordinate:location];
annotation.title = @"東京タワー";
annotation.subtitle = @"高さは333mだよ";
[mapView addAnnotation:annotation];
[annotation release];

アノテーションをマップに表示

addAnnotation: でアノテーションを追加すると mapView: viewForAnnotation: が呼び出されます。アノテーションを表示する MKAnnotationVIew 作成します。UITableViewCell のようにリユースされます。また、現在地を表示する青い丸印もアノテーションです。そのまま処理すると現在地も指定した画像で処理されます。青い丸印のまま表示するには nil を返します。

-(MKAnnotationView*)mapView:(MKMapView*)_mapView viewForAnnotation:(id )annotation {
	// 現在地表示なら nil を返す
	if (annotation == mapView.userLocation) {
		return nil;
	}

	MKAnnotationView *annotationView;
	NSString* identifier = @"Pin";
	annotationView = (MKAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:identifier];
	if(nil == annotationView) {
		annotationView = [[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier] autorelease];
	}
	annotationView.image = [UIImage imageNamed:@"location.png"];
	annotationView.canShowCallout = YES;
	annotationView.rightCalloutAccessoryView = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];

	annotationView.annotation = annotation;

	return annotationView;
}

rightCalloutAccessoryView でバルーン右側のアクセサリを指定しています。canShowCallout を YES にするとアノテーションをタップすることによりバルーンを表示させることができます。実際に実行した結果は下記のようになります。

スクリーンショット(2010-03-25 3-25木 10.34.00)

アノテーションのバルーンのアクセサリをタップ可能にする

さらにバルーンのアクセサリー部分をタップしたときに何か処理をするには、MKMapViewDelegate の mapView: annotationView calloutAccessoryControlTapped: を使用します。

- (void) mapView:(MKMapView*)_mapView annotationView:(MKAnnotationView*)annotationView calloutAccessoryControlTapped:(UIControl*)control {
    // タップしたときの処理
    // annotationView.annotation でどのアノテーションか判定可能
}

関連する投稿