ios 一步一步學會自訂地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)

 ios 一步一步學會自訂地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖) 高德地圖 google地圖 百度地圖 吹出框 自訂

前言

在ios上邊使用地圖庫的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是內建的google地圖，只提供了這四個屬性，如果想添加更多的view，只能自訂。可是，類庫只能看到.h檔案，.m都看不到，這讓新手比較蛋疼，龐大的地圖類庫一時半會摸不著頭腦，從頭再學還需要時間，本文就教大家快速製作一個屬於自己的 CalloutView。等你一步一步調通後，再回過頭來使用系統內建的方法設定callout，就會領悟這個過程。

本文

Xcode版本：4.6.1

SDK版本：6.0 

百度地圖版本：1.2.2（關於地圖不必糾結，無論是百度還是高德還是google都是基於系統的MapKit，都是一樣的）

demo模式：非ARC，使用storyboard。

demo資源：

http://download.csdn.net/detail/mad1989/5252037

Step1

建立demo，並添加百度地圖的靜態類庫，helloword能顯示mapview

關於這一步我專門寫了教程，這裡就不再贅述，同樣，關於如何使用內建的BMKPointAnnotation添加一個marker，我也不再說了，如果連這個你都不會，那麼先去官網看一下基本教程。

Step2

實現三個委託方法：

這個方法類似tableview添加cell，都是建立annotation

[cpp] view plain copy #pragma mark   #pragma mark - BMKMapview delegate   -(BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation;  

這個方法在點擊地圖marker時所觸發（並顯示callout）
[cpp] view plain copy -(void)mapView:(BMKMapView *)mapView didSelectAnnotationView:(BMKAnnotationView *)view;  

這個方法在點擊地圖任意位置，相當於隱藏callout

[cpp] view plain copy -(void)mapView:(BMKMapView *)mapView didDeselectAnnotationView:(BMKAnnotationView *)view;  

原理：地圖上的marker是在viewForAnnoation裡建立的，同時也會隱含的為我們建立一個CalloutView，就是內建的吹出框，只是我們看不到源碼。其實這個吹出框(CalloutView)也是一個annotation，也會在viewForAnnotation裡被建立，他的座標應該和這個點的marker座標一樣，只要明白了這一點，就行了，marker和吹出框是兩個不同的annotation，他們有同樣的coordinate。

Step3

自訂一個Annotation，為了簡單方便，我就直接繼承了mapview內建的BMKPointAnnotation，這是一個經典的圖釘marker。

(百度地圖，高德地圖,google地圖)">
(百度地圖，高德地圖,google地圖)">

在這裡我添加了一個Dictionary屬性，目的是為了自訂的CalloutView吹出框顯示內容賦值，一會就明白了。

Step4

添加自訂Annotation到mapview

[cpp] view plain copy //添加自訂Annotation    CLLocationCoordinate2D center = {39.91669,116.39716};      CustomPointAnnotation *pointAnnotation = [[CustomPointAnnotation alloc] init];   pointAnnotation.title = @"我是中國人";//因為繼承了BMKPointAnnotation，所以這些title,subtitle都可以設定   pointAnnotation.subtitle = @"我愛自己的祖國";      pointAnnotation.coordinate = center;   [mymapview addAnnotation:pointAnnotation];   [pointAnnotation release];  
在viewForanntion裡，由於我對marker沒太大要求，直接使用了BMKPinAnnotationView(圖釘),簡單設定image屬性為自己需要的表徵圖，如下所示：

(百度地圖，高德地圖,google地圖)">
(百度地圖，高德地圖,google地圖)">

展示一個效果圖：

(百度地圖，高德地圖,google地圖)">

(百度地圖，高德地圖,google地圖)">

顯然CalloutView只能設定title和subtitle，無法滿足我們的要求，那麼繼續下一步。

Step5

建立一個（自訂的CalloutView）的Annotation,相當於顯示calloutView的annotation。

[注意] 繼承自NSObject<BMKAnnotation>

CalloutMapAnnotation.h

[cpp] view plain copy #import <Foundation/Foundation.h>   #import "BMapKit.h"      @interface CalloutMapAnnotation : NSObject<BMKAnnotation>         @property (nonatomic) CLLocationDegrees latitude;   @property (nonatomic) CLLocationDegrees longitude;         @property(retain,nonatomic) NSDictionary *locationInfo;//callout吹出框要顯示的各資訊            - (id)initWithLatitude:(CLLocationDegrees)lat andLongitude:(CLLocationDegrees)lon;