如何自定义 MKAnnotationView 的标注气泡？

Question

我目前正在使用 mapkit 并且卡住了。

我有一个正在使用的自定义注释视图，我想使用 image 属性在地图上用我自己的图标显示点。我有这个工作正常。但我还想做的是覆盖默认标注视图（触摸注释图标时显示的标题/副标题的气泡）。我希望能够控制标注本身：mapkit 仅提供对左右辅助标注视图的访问，但无法为标注气泡提供自定义视图，或将其设为零大小或其他任何内容。

我的想法是覆盖我的MKMapViewDelegate 中的selectAnnotation/deselectAnnotation，然后通过调用我的自定义注释视图来绘制我自己的自定义视图。这有效，但仅当在我的自定义注释视图类中将 canShowCallout 设置为 YES 时。如果我将此设置为NO（这是我想要的，因此不会绘制默认标注气泡），则不会调用这些方法。因此，如果没有显示默认标注气泡视图，我无法知道用户是触摸了我在地图上的点（选择了它）还是触摸了不属于我的注释视图的点（选择了它）。

我尝试走一条不同的路，自己处理地图中的所有触摸事件，但我似乎无法正常工作。我阅读了与在地图视图中捕获触摸事件相关的其他帖子，但它们并不是我想要的。有没有办法在绘制之前深入地图视图以删除标注气泡？我很茫然。

有什么建议吗？我错过了什么明显的东西吗？

Answer 1

detailCalloutAccessoryView

在过去这很痛苦，但 Apple 已经解决了，只需查看 MKAnnotationView 上的文档即可

view = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
view.canShowCallout = true
view.detailCalloutAccessoryView = UIImageView(image: UIImage(named: "zebra"))

真的，就是这样。接受任何 UIView。

Answer 2

我遇到了同样的问题。在这个博客http://spitzkoff.com/craig/?p=81 上有很多关于这个主题的博文。

在这里仅使用 MKMapViewDelegate 对您没有帮助，子类化 MKMapView 并尝试扩展现有功能也对我不起作用。

我最终做的是创建我自己的CustomCalloutView，并在我的MKMapView 之上。你可以用任何你想要的方式来设置这个视图的样式。

我的CustomCalloutView有一个类似这个的方法：

- (void) openForAnnotation: (id)anAnnotation { self.annotation = anAnnotation; // remove from view [self removeFromSuperview]; titleLabel.text = self.annotation.title; [self updateSubviews]; [self updateSpeechBubble]; [self.mapView addSubview: self]; }

它接受一个MKAnnotation 对象并设置它自己的标题，然后它调用另外两个非常丑陋的方法来调整标注内容的宽度和大小，然后在它周围的正确位置绘制对话气泡。

最后将视图作为子视图添加到 mapView。这个解决方案的问题是当地图视图滚动时很难将标注保持在正确的位置。我只是将标注隐藏在区域更改的地图视图委托方法中以解决此问题。

解决所有这些问题需要一些时间，但现在标注的行为几乎与官方标注一样，但我有自己的风格。

Answer 3

我只是想出了一个办法，这里的思路是

  // Detect the touch point of the AnnotationView ( i mean the red or green pin )
  // Based on that draw a UIView and add it to subview.
- (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated
{
    CGPoint newPoint = [self.mapView convertCoordinate:selectedCoordinate toPointToView:self.view];
//    NSLog(@"regionWillChangeAnimated newPoint %f,%f",newPoint.x,newPoint.y);
    [testview  setCenter:CGPointMake(newPoint.x+5,newPoint.y-((testview.frame.size.height/2)+35))];
    [testview setHidden:YES];
}

- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
    CGPoint newPoint = [self.mapView convertCoordinate:selectedCoordinate toPointToView:self.view];
//    NSLog(@"regionDidChangeAnimated newPoint %f,%f",newPoint.x,newPoint.y);
    [testview  setCenter:CGPointMake(newPoint.x,newPoint.y-((testview.frame.size.height/2)+35))];
    [testview setHidden:NO];
}

- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view 
{  
    NSLog(@"Select");
    showCallout = YES;
    CGPoint point = [self.mapView convertPoint:view.frame.origin fromView:view.superview];
    [testview setHidden:NO];
    [testview  setCenter:CGPointMake(point.x+5,point.y-(testview.frame.size.height/2))];
    selectedCoordinate = view.annotation.coordinate;
    [self animateIn];
}

- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view 
{
    NSLog(@"deSelect");
    if(!showCallout)
    {
        [testview setHidden:YES];
    }
}

这里 - testview 是大小为 320x100 的 UIView - showCallout 是 BOOL - [self animateIn]; 是像 UIAlertView 这样查看动画的函数。

Answer 4

发现这对我来说是最好的解决方案。 您必须使用一些创造力来进行自己的自定义

在您的MKAnnotationView 子类中，您可以使用

- (void)didAddSubview:(UIView *)subview{
    int image = 0;
    int labelcount = 0;
    if ([[[subview class] description] isEqualToString:@"UICalloutView"]) {
        for (UIView *subsubView in subview.subviews) {
            if ([subsubView class] == [UIImageView class]) {
                UIImageView *imageView = ((UIImageView *)subsubView);
                switch (image) {
                    case 0:
                        [imageView setImage:[UIImage imageNamed:@"map_left"]];
                        break;
                    case 1:
                        [imageView setImage:[UIImage imageNamed:@"map_right"]];
                        break;
                    case 3:
                        [imageView setImage:[UIImage imageNamed:@"map_arrow"]];
                        break;
                    default:
                        [imageView setImage:[UIImage imageNamed:@"map_mid"]];
                        break;
                }
                image++;
            }else if ([subsubView class] == [UILabel class]) {
                UILabel *labelView = ((UILabel *)subsubView);
                switch (labelcount) {
                    case 0:
                        labelView.textColor = [UIColor blackColor];
                        break;
                    case 1:
                        labelView.textColor = [UIColor lightGrayColor];
                        break;

                    default:
                        break;
                }
                labelView.shadowOffset = CGSizeMake(0, 0);
                [labelView sizeToFit];
                labelcount++;
            }
        }
    }
}

如果subview 是UICalloutView，那么您可以随意使用它，以及其中的内容。

Answer 5

还有一个更简单的解决方案。

创建一个自定义 UIView（用于您的标注）。

然后创建MKAnnotationView的子类并覆盖setSelected如下：

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    if(selected)
    {
        //Add your custom view to self...
    }
    else
    {
        //Remove your custom view...
    }
}

繁荣，工作完成。

Answer 6

我推出了出色的 SMCalloutView 的分支，它通过为标注提供自定义视图并允许灵活的宽度/高度非常轻松地解决了这个问题。仍然有一些怪癖需要解决，但到目前为止它非常实用：

https://github.com/u10int/calloutview

Answer 7

可以使用leftCalloutView，设置annotation.text为@" "

请在下面找到示例代码：

pinView = (MKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:defaultPinID];
if(pinView == nil){
    pinView = [[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:defaultPinID] autorelease];       
}
CGSize sizeText = [annotation.title sizeWithFont:[UIFont fontWithName:@"HelveticaNeue" size:12] constrainedToSize:CGSizeMake(150, CGRectGetHeight(pinView.frame))                                 lineBreakMode:UILineBreakModeTailTruncation];
pinView.canShowCallout = YES;    
UILabel *lblTitolo = [[UILabel alloc] initWithFrame:CGRectMake(2,2,150,sizeText.height)];
lblTitolo.text = [NSString stringWithString:ann.title];
lblTitolo.font = [UIFont fontWithName:@"HelveticaNeue" size:12];
lblTitolo.lineBreakMode = UILineBreakModeTailTruncation;
lblTitolo.numberOfLines = 0;
pinView.leftCalloutAccessoryView = lblTitolo;
[lblTitolo release];
annotation.title = @" ";            

Answer 8

继续@TappCandy 的出色简单答案，如果您想以与默认设置相同的方式为气泡设置动画，我制作了此动画方法：

- (void)animateIn
{   
    float myBubbleWidth = 247;
    float myBubbleHeight = 59;

    calloutView.frame = CGRectMake(-myBubbleWidth*0.005+8, -myBubbleHeight*0.01-2, myBubbleWidth*0.01, myBubbleHeight*0.01);
    [self addSubview:calloutView];

    [UIView animateWithDuration:0.12 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^(void) {
        calloutView.frame = CGRectMake(-myBubbleWidth*0.55+8, -myBubbleHeight*1.1-2, myBubbleWidth*1.1, myBubbleHeight*1.1);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.1 animations:^(void) {
            calloutView.frame = CGRectMake(-myBubbleWidth*0.475+8, -myBubbleHeight*0.95-2, myBubbleWidth*0.95, myBubbleHeight*0.95);
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.075 animations:^(void) {
                calloutView.frame = CGRectMake(-round(myBubbleWidth/2-8), -myBubbleHeight-2, myBubbleWidth, myBubbleHeight);
            }];
        }];
    }];
}

它看起来相当复杂，但只要你的标注气泡的点被设计为中心底部，你应该能够用你自己的大小替换 myBubbleWidth 和 myBubbleHeight 以使其工作。请记住确保您的子视图将其 autoResizeMask 属性设置为 63（即“全部”），以便它们在动画中正确缩放。

:-乔

Answer 9

基本上要解决这个问题，需要： a) 防止出现默认标注气泡。 b) 找出点击了哪个注释。

我能够通过以下方式实现这些目标： a) 将 canShowCallout 设置为 NO b) 子类化、MKPinAnnotationView 并覆盖 touchesBegan 和 touchesEnd 方法。

注意：您需要处理 MKAnnotationView 而不是 MKMapView 的触摸事件