iOS MKMapView 的自定义注释

Question

首先，我使用 kingpin 来显示一组注释。一切正常。

我的问题是：如何为注释创建自定义视图？我不是指替换 MKPinAnnotationView 的图像。

            if (annotationView == nil) {
            annotationView = [[MKPinAnnotationView alloc]initWithAnnotation:annotation reuseIdentifier:@"cluster"];
            annotationView.canShowCallout = YES;
            annotationView.image = [UIImage imageNamed:@"map_cluster"];
        }

有了这个，我只能用图像替换默认图钉。但这不是我需要的全部。

http://imgur.com/nhUIvdx

我来自 Android 背景，我通过将布局扩展为集群（也就是 iOS 中的注释）解决了这个问题。在这个 XML 布局中，我放置了一个容器（白框）、一张图片和一个计数器。结果如下图所示：

http://imgur.com/QoAQQES

如何在 iOS 中执行此操作？在此先感谢您的任何建议！

Answer 1

您可以在此处找到如何创建自定义注释：

有什么问题可以问我:)

Answer 2

很晚的回复，但我想其他人仍然会感兴趣

在 MKAnnotationView 子类中：

首先，定义一些维度：

#define ckImageHeight 65
#define ckImageWidth  55
#define kBorder 5

然后定义注释视图的框架：

self.frame = CGRectMake(0, 0, ckImageWidth, ckImageHeight);

如果您希望背景是图像而不仅仅是颜色：

self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"map_checkin"]];

然后为图片做一个占位符

CGRect checkInPictureRect = CGRectMake(kBorder, kBorder, ckImageWidth - 9 , ckImageWidth - 9);
UIView *checkInPictureView = [[UIView alloc]initWithFrame:checkInPictureRect];

那么好戏开始了：

// Crop image
UIImage *croppedImage = [ImageHelper centerCropImage:image];

// Resize image
CGSize checkInPictureSize = CGSizeMake(checkInPictureRect.size.width*1.5, checkInPictureRect.size.height*1.5);
UIGraphicsBeginImageContext(checkInPictureSize);
[croppedImage drawInRect:CGRectMake(0, 0, checkInPictureRect.size.width*1.5, checkInPictureRect.size.height*1.5)];
UIImage* resizedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIImageView *imageView = [[UIImageView alloc] initWithImage:resizedImage];
                            imageView.frame = checkInPictureView.bounds;
                            [checkInPictureView addSubview:imageView];
                            [self addSubview:checkInPictureView];

// Counter
UIView *counterView = [[UIView alloc]initWithFrame:CGRectMake(45, -2, 15, 15)];
counterView.opaque = YES;
(checkIn.isNow) ? [counterView setBackgroundColor:[UIColor enloopBlue]] : [counterView setBackgroundColor:[UIColor enloopGreen]];
counterView.layer.cornerRadius = 8;

self.counterLabel = [[UILabel alloc] init];
self.counterLabel.frame = CGRectMake(4, 2, 10, 10);

if (self.count >= 10) {
    counterView.frame = CGRectMake(45, -2, 18, 18);
    self.counterLabel.frame = CGRectMake(3, 3, 12, 12);
}

[self.counterLabel setTextColor:[UIColor whiteColor]];
[self.counterLabel setFont:[UIFont fontWithName: @"Trebuchet MS" size: 11.0f]];
[self.counterLabel setText:[[NSString alloc] initWithFormat:@"%lu", (unsigned long)self.count]];
[counterView addSubview:self.counterLabel];
[counterView bringSubviewToFront:self.counterLabel];
[self addSubview:counterView];

至于 centerCropImage 助手，没什么特别的：

+ (UIImage *)centerCropImage:(UIImage *)image {
    // Use smallest side length as crop square length
    CGFloat squareLength = MIN(image.size.width, image.size.height);
    // Center the crop area
    CGRect clippedRect = CGRectMake((image.size.width - squareLength) / 2, (image.size.height - squareLength) / 2, squareLength, squareLength);

    CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], clippedRect);
    UIImage * croppedImage = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);
    return croppedImage;
}

我知道有很多地方需要改进，但在此之前我希望它能帮助其他人。 :)

iOS MKMapView 的自定义注释

iOS Custom annotations for MKMapView

ios

mkmapview

mapkit

mkannotation

mkannotationview