啥都不說先看效果圖demo

IMG_0270.PNG

先來說說如何自定義大頭針以及點(diǎn)擊大頭針時(shí)彈出的泡泡view

一 : 自定義大頭針

• 新建CustomAnnotationView 繼承自MAAnnotationView
• 添加屬性
• 重寫- (id)initWithAnnotation:(id<MAAnnotation>)annotation reuseIdentifier:(NSString *)reuseIdentifier
• 重寫- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 解決泡泡view超出父控件事件響應(yīng)問題
• 重寫- (void)setSelected:(BOOL)selected animated:(BOOL)animated

二 : 自定義泡泡View

• 新建自定義氣泡類 CustomCalloutView，繼承 UIView。
• 在 CustomCalloutView.h 中定義數(shù)據(jù)屬性，包含：圖片、商戶名和商戶地址。(隨便你怎么搞,在這里我就搞了一個(gè)xib)

Snip20170620_1.png

• 在上面新建的CustomAnnotationView.h中定義自定義氣泡屬性

#import "CustomCalloutView.h"

@interface CustomAnnotationView : MAAnnotationView

@property (nonatomic, readonly) CustomCalloutView *calloutView;

@end

• 重寫選中方法- (void)setSelected:(BOOL)selected animated:(BOOL)animated。選中時(shí)新建并添加calloutView，傳入數(shù)據(jù)；非選中時(shí)刪除calloutView。

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    if (self.selected == selected)
    {
        return;
    }
    
    if (selected)
    {
        if (self.calloutView == nil)
        {
            /* Construct custom callout. */
            
            self.calloutView = [CustomCalloutView calloutView];
            self.calloutView.frame = CGRectMake(0, 0, kCalloutWidth, kCalloutHeight);
            self.calloutView.center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f + self.calloutOffset.x,
                                                  -CGRectGetHeight(self.calloutView.bounds) / 2.f + self.calloutOffset.y);
        }
        
        [self addSubview:self.calloutView];
    }
    else
    {
        [self.calloutView removeFromSuperview];
    }
    
    [super setSelected:selected animated:animated];
}

• 修改ViewController.m，在MAMapViewDelegate的回調(diào)方法mapView:viewForAnnotation中的修改annotationView的類型

#pragma mark - MAMapViewDelegate

- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id<MAAnnotation>)annotation
{
    if ([annotation isKindOfClass:[MAPointAnnotation class]])
    {
        static NSString *customReuseIndetifier = @"customReuseIndetifier";
        
        CustomAnnotationView *annotationView = (CustomAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:customReuseIndetifier];
        
        if (annotationView == nil)
        {
            annotationView = [[CustomAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:customReuseIndetifier];
            // must set to NO, so we can show the custom callout view.
            annotationView.canShowCallout = NO;
            annotationView.draggable = YES;
            annotationView.calloutOffset = CGPointMake(0, -5);
        }
        
        return annotationView;
    }
    
    return nil;
}

• 用于調(diào)整泡泡view顯示不全問題

- (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view
{
    /* Adjust the map center in order to show the callout view completely. */
    if ([view isKindOfClass:[CustomAnnotationView class]]) {
        CustomAnnotationView *cusView = (CustomAnnotationView *)view;
        CGRect frame = [cusView convertRect:cusView.calloutView.frame toView:self.mapView];
        
        frame = UIEdgeInsetsInsetRect(frame, UIEdgeInsetsMake(kCalloutViewMargin, kCalloutViewMargin, kCalloutViewMargin, kCalloutViewMargin));
        
        if (!CGRectContainsRect(self.mapView.frame, frame))
        {
            /* Calculate the offset to make the callout view show up. */
            CGSize offset = [self offsetToContainRect:frame inRect:self.mapView.frame];
            
            CGPoint theCenter = self.mapView.center;
            theCenter = CGPointMake(theCenter.x - offset.width, theCenter.y - offset.height);
            
            CLLocationCoordinate2D coordinate = [self.mapView convertPoint:theCenter toCoordinateFromView:self.mapView];
            
            [self.mapView setCenterCoordinate:coordinate animated:YES];
        }
        
    }
}