[iPhone程式]iPhone開發心得05-Mapkit之在地圖上加入座標點，使用MKAnnotation和MKAnnotationView

☉目標：在前一個範例中建立的Google Map上，加上座標點(POIs)，當點選座標點會觸發對應的event。

☉限制：必須將iPhone的作業系統更新到OS 3.0版本，開發使用的SDK也要是SDK 3.0才有內建Mapkit Framework。

☉效果畫面：





☉步驟說明：

在地圖上每一個座標點，都是一個MKAnnotationView，也就是UI。而每一個MKAnnotationView都需要有對應的資料MKAnnotation，這是Protocal，也就是儲存每個座標點所需要用到的資料的地方。因此，我們要先建立一個使用MKAnnotation的類別。

依照iPhone開發者文件的說明。這個Protocal需要宣告三個屬性和一個初始化方法。三個屬性分別是coordinate、title、subtitle，和一個方法initWithCoords。

下面是MKAnnotation類別的程式碼 POI.h

#import
#import
#import

@interface POI : NSObject  {

CLLocationCoordinate2D coordinate;
NSString *subtitle;
NSString *title;
}

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

-(id) initWithCoords:(CLLocationCoordinate2D) coords;

@end

下面是MKAnnotation類別的程式碼 POI.m

#import "POI.h"

@implementation POI

@synthesize coordinate,subtitle,title;

- (id) initWithCoords:(CLLocationCoordinate2D) coords{

self = [super init];

if (self != nil) {

coordinate = coords;

}

return self;

}

- (void) dealloc

{
[title release];
[subtitle release];
[super dealloc];
}

@end

宣告了符合MKAnnotation Protocal的類別後，我們就要在Google Map上建立座標點。在iPhone上顯示Google Map的程式可以參考使用MKMapView實作Google
Map。

接下來，

Step(1)：我宣告了一個函式createMapPoint用來建立座標點。在這裡用到了我們在前面宣告的類別POI(這是一個符合MKAnnotation Protocal的類別)，我們Create一個POI，接著將座標點所需的經緯度、標題、子標題等訊息都放進去。接著呼叫

[mapView addAnnotation:poi];

把我們所建立的POI加入地圖(MKMapView)的Annotation集合中。放入集合的只是座標點的資料，這個時候還沒有真正建立座標點。

以下是函式createMapPoint的程式碼：

#import "POI.h"

-(void*) createMapPoint:(MKMapView *)mapView coordinateX:(double)coorX coordinateY:(double)coorY
Title:(NSString*)title Subtitle:(NSString*)subtitle{

if(mapView!=nil){

//set POI lat and lng
CLLocationCoordinate2D p1;
POI *poi;

if(coorX && coorY){

p1.latitude=coorX;
p1.longitude = coorY;
poi = [[POI alloc] initWithCoords:p1];

if(title!=NULL)
poi.title=title;

if(subtitle!=NULL)
poi.subtitle=subtitle;

[mapView addAnnotation:poi];
[poi release];

}

}
return NULL;
}

Step(2)：參考MKMapView的說明文件可以看到viewForAnnotation這個方法，這是MKMapView實際建立座標點的地方。MKMapView類別在render地圖的時候會依照Annotation集合的資料建立座標點。

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation{

//方法一：using default pin as a PlaceMarker to display on map
MKPinAnnotationView *newAnnotation = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"annotation1"];
newAnnotation.pinColor = MKPinAnnotationColorGreen;
newAnnotation.animatesDrop = YES;
//canShowCallout: to display the callout view by touch the pin
newAnnotation.canShowCallout=YES;

UIButton *button = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
[button addTarget:self action:@selector(checkButtonTapped:event:) forControlEvents:UIControlEventTouchUpInside];
newAnnotation.rightCalloutAccessoryView=button;

return newAnnotation;

//方法二：using the image as a PlaceMarker to display on map
/*
MKAnnotationView *newAnnotation=[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"annotation1"];
newAnnotation.image = [UIImage imageNamed:@"icon.png"];
newAnnotation.canShowCallout=YES;
return newAnnotation;
*/
}

Annotation集合中有幾筆資料vieForAnnotation方法就會被執行幾次。因此每次viewForAnnotation被執行，我們都要建立一個MKAnnotationView物件的實體，並且return這個實體。 MKMapView接收到MKAnnotationView的實體就會將它顯示在地圖上，這就是我們想要顯示在地圖上的座標點。在上面程式碼中使用了MKPinAnnotationView這個物件是繼承自MKAnnotationView，作用就是在地圖上顯示一個大頭釘。你可以用

annotationView.pinColor = MKPinAnnotationColorGreen;

設定大頭釘的顏色，不過只有紅色、紫色、綠色，三種顏色(似乎有點稀少XD)。

newAnnotation.canShowCallout=YES;

設定在點選大頭釘的時候氣泡視窗是否會談出來。第10行到第12行動態建立了一個DetailDisclousue類型的按鈕，替這個按鈕設置了一個UIControlEventTouchUpInside事件，並將它放入氣泡視窗的AccessoryView中。最後，將建立好的座標點回傳給MapView。 被註解的方法二是直接使用MKAnnotationView建立座標點，並且設置她的image屬性，因此座標點不一定是大頭釘，可以有更多的變化與花樣。

- (void)checkButtonTapped:(id)sender event:(id)event{

UIAlertView *tmp= [[UIAlertView alloc] initWithTitle:@"訊息！" message:@"Callout測試" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[tmp show];
[tmp release];
}

上面是UIControlEventTouchUpInside事件所執行的事件處理常式。當點選DetailDisclousue按鈕後，就會跳出一個alert，表示這個event有正確無誤的被處理。

從這個範例，我們可以看到MKAnnotation和MKAnnotationView之間的關係。

張貼者： finalevil 於 下午10:26


以電子郵件傳送這篇文章BlogThis！分享至
Twitter分享至
Facebook

標籤： 01:程式設計

2 意見:

Anonymous 提到...
你好,想請問一下可以加入多個坐標點, 以及觸發相對應的event?謝謝^^

2009年5月18日下午10:54






loK 提到...
嘿，大大您好。

不好意思詢問一下，

是否可以使用loop之類的多增加幾個大頭針的點？該如何著手更改呢?

謝謝>"<

2009年12月20日下午11:55

張貼意見