ios 自定义 MKAnnotation 标注视图？

Customize MKAnnotation Callout View?

提问by confile

I have a MKPointAnnotation:

我有一个MKPointAnnotation：

let ann = MKPointAnnotation()
self.ann.coordinate = annLoc
self.ann.title = "Customize me"
self.ann.subtitle = "???"
self.mapView.addAnnotation(ann)

It looks like this:

它看起来像这样：

How can I customize this callout view to create my own view instead of the predefined one?

如何自定义此标注视图以创建我自己的视图而不是预定义的视图？

回答by Rob

It should first be noted that the simplest changes to the callout are enabled by simply adjusting the properties of the system provided callout, but customizing the right and left accessories (via rightCalloutAccessoryViewand leftCalloutAccessoryView). You can do that configuration in viewForAnnotation.

首先应该注意的是，通过简单地调整系统提供的标注的属性，但自定义左右附件（通过rightCalloutAccessoryView和leftCalloutAccessoryView），可以实现对标注的最简单更改。您可以在viewForAnnotation.

Since iOS 9, we have access to the detailCalloutAccessoryViewwhich, replaces the subtitle of the callout with a potentially visually rich view, while still enjoying the automatic rendition of the callout bubble (using auto layout makes this easier).

从 iOS 9 开始，我们可以访问detailCalloutAccessoryViewwhich，用潜在的视觉丰富的视图替换标注的副标题，同时仍然享受标注气泡的自动再现（使用自动布局使这更容易）。

For example, here is a callout that used a MKSnapshotterto supply the image for an image view in the detail callout accessory as demonstrated in WWDC 2015 video What's New in MapKit:

例如，这里有一个标注，它使用MKSnapshotter为细节标注附件中的图像视图提供图像，如 WWDC 2015 视频MapKit 中的新增功能所示：

You can achieve this with something like:

您可以通过以下方式实现此目的：

class SnapshotAnnotationView: MKPinAnnotationView {
    override var annotation: MKAnnotation? { didSet { configureDetailView() } }

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }
}

private extension SnapshotAnnotationView {
    func configure() {
        canShowCallout = true
        configureDetailView()
    }

    func configureDetailView() {
        guard let annotation = annotation else { return }

        let rect = CGRect(origin: .zero, size: CGSize(width: 300, height: 200))

        let snapshotView = UIView()
        snapshotView.translatesAutoresizingMaskIntoConstraints = false

        let options = MKMapSnapshotter.Options()
        options.size = rect.size
        options.mapType = .satelliteFlyover
        options.camera = MKMapCamera(lookingAtCenter: annotation.coordinate, fromDistance: 250, pitch: 65, heading: 0)

        let snapshotter = MKMapSnapshotter(options: options)
        snapshotter.start { snapshot, error in
            guard let snapshot = snapshot, error == nil else {
                print(error ?? "Unknown error")
                return
            }

            let imageView = UIImageView(frame: rect)
            imageView.image = snapshot.image
            snapshotView.addSubview(imageView)
        }

        detailCalloutAccessoryView = snapshotView
        NSLayoutConstraint.activate([
            snapshotView.widthAnchor.constraint(equalToConstant: rect.width),
            snapshotView.heightAnchor.constraint(equalToConstant: rect.height)
        ])
    }
}

Of course, you would then register that annotation view with your map, and no mapView(_:viewFor:)would be needed at all:

当然，您随后会在地图中注册该注释视图，而根本mapView(_:viewFor:)不需要：

mapView.register(SnapshotAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)

If you're looking for a more radical redesign of the callout or need to support iOS versions prior to 9, it takes more work. The process entails (a) disabling the default callout; and (b) adding your own view when the user taps on the existing annotation view (i.e. the visual pin on the map).

如果您正在寻找对标注进行更彻底的重新设计或需要支持 9 之前的 iOS 版本，则需要做更多的工作。该过程需要 (a) 禁用默认标注；(b) 当用户点击现有注释视图（即地图上的视觉图钉）时添加您自己的视图。

The complexity then comes in the design of the callout, where you have to draw everything you want visible. E.g. if you want to draw a bubble to yield the popover feel of the call out, you have to do that yourself. But with some familiarity with how to draw shapes, images, text, etc., you should be able to render a callout that achieves the desired UX:

复杂性来自标注的设计，您必须在其中绘制您想要可见的所有内容。例如，如果你想画一个气泡来产生呼唤的弹出感觉，你必须自己做。但是在熟悉如何绘制形状、图像、文本等之后，您应该能够渲染实现所需 UX 的标注：

Just add the view as a subview of the annotation view itself, and adjust its constraints accordingly:

只需将视图添加为注释视图本身的子视图，并相应地调整其约束：

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    let calloutView = ...
    calloutView.translatesAutoresizingMaskIntoConstraints = false
    calloutView.backgroundColor = UIColor.lightGray
    view.addSubview(calloutView)

    NSLayoutConstraint.activate([
        calloutView.bottomAnchor.constraint(equalTo: view.topAnchor, constant: 0),
        calloutView.widthAnchor.constraint(equalToConstant: 60),
        calloutView.heightAnchor.constraint(equalToConstant: 30),
        calloutView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: view.calloutOffset.x)
    ])
}

See https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwiftfor an example of creating your own callout view. This only adds two labels, but it illustrates the fact that you can draw the bubble any shape you want, use constraints to dictate the size of the callout, etc.

有关创建自己的标注视图的示例，请参阅https://github.com/robertmryan/CustomMapViewAnnotationCalloutSwift。这仅添加了两个标签，但它说明了这样一个事实：您可以根据需要绘制任何形状的气泡，使用约束来规定标注的大小等。

回答by Yagnesh Dobariya

Create Cocoa file with classtype MKAnnotationView

创建类类型为 MKAnnotationView 的 Cocoa 文件

CustomeAnnotationView.h file

CustomeAnnotationView.h 文件

@interface CustomeAnnotationView : MKAnnotationView
@property (strong, nonatomic) UIButton *buttonCustomeCallOut;
- (void)setSelected:(BOOL)selected animated:(BOOL)animated;
@end

CustomeAnnotationView.m file

CustomeAnnotationView.m 文件

@implementation CustomeAnnotationView

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}


- (void)setSelected:(BOOL)selected animated:(BOOL)animated{

    [super setSelected:selected animated:animated];

    if(selected)
    {



            self.buttonCustomeCallOut = [UIButton buttonWithType:UIButtonTypeCustom];//iconShare//iconShareBlue

            [self.buttonCustomeCallOut addTarget:self action:@selector(buttonHandlerCallOut:) forControlEvents:UIControlEventTouchDown];
        [self.buttonCustomeCallOut setBackgroundColor:[UIColor blueColor]];

            [self.buttonCustomeCallOut setFrame:CGRectMake(-40,-80, 100, 100)];



            [self addSubview:self.buttonCustomeCallOut];

        [self.buttonCustomeCallOut setUserInteractionEnabled:YES];
    }
    else
    {
        //Remove your custom view...
        [self.buttonCustomeCallOut setUserInteractionEnabled:NO];
        [self.buttonCustomeCallOut removeFromSuperview];

        self.buttonCustomeCallOut=nil;
    }
}
-(void)buttonHandlerCallOut:(UIButton*)sender{
    NSLog(@"Annotation Clicked");
}

- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event
{
    UIView* v = [super hitTest:point withEvent:event];
    if (v != nil)
    {
        [self.superview bringSubviewToFront:self];
    }
    return v;
}

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event
{
    CGRect rec = self.bounds;
    BOOL isIn = CGRectContainsPoint(rec, point);
    if(!isIn)
    {
        for (UIView *v in self.subviews)
        {
            isIn = CGRectContainsPoint(v.frame, point);
            if(isIn)
                break;
        }
    }
    return isIn;
}
@end

place this code where u want to create custome call out

将此代码放置在您要创建客户呼叫的位置

- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation {
    static NSString *identifier = @"CustAnnotation";

        CustomeAnnotationView *annotationView = (CustomeAnnotationView *) [self.mapView dequeueReusableAnnotationViewWithIdentifier:identifier];
        if (annotationView == nil) {
            annotationView = [[CustomeAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
        }

        annotationView.enabled = YES;
        annotationView.canShowCallout = NO;
        annotationView.centerOffset = CGPointMake(0,-10);//-18

        return annotationView;
}

回答by Samrat Pramanik

No need to make MKAnnotationView Custom class just create an empty view .xib and design .xib as your requirement. Write your business login in UIView swift class.

无需制作 MKAnnotationView 自定义类，只需创建一个空视图 .xib 并根据您的要求设计 .xib。在 UIView swift 类中编写您的业务登录。

Add the view on

添加视图

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

...

...

}

}

method like annotationView?.detailCalloutAccessoryView = customView

像 annotationView?.detailCalloutAccessoryView = customView 这样的方法

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    let annotationIdentifier = "AnnotationIdentifier"
    var annotationView: MKAnnotationView?
    if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) {
        annotationView = dequeuedAnnotationView
        annotationView?.annotation = annotation
    } else {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
    }
    if let annotation = annotation as? HPAnnotation {
       annotationView?.canShowCallout = true
       let customView = Bundle.main.loadNibNamed("HPAnnotationView", owner: self, options: nil)?.first as! HPAnnotationView
       customView.labelName.text = annotation.annotationTitle
       annotationView?.detailCalloutAccessoryView = customView
    }
    return annotationView
 }

If you want dynamic value show on callout view then first make MKAnnotation custom class where you can pass objects as you need.

如果您想在标注视图上显示动态值，那么首先创建 MKAnnotation 自定义类，您可以在其中根据需要传递对象。

import MapKit
import AddressBook
import UIKit

class HPAnnotation: NSObject, MKAnnotation {

   let title: String?
   let annotationTitle: String
   init(title: String, annotationTitle: String = "") {
      self.title = title
      self.annotationTitle = annotationTitle
   }

   var subtitle: String? {
     return details
   }

}

}

and pass value when creating annotation

并在创建注释时传递值

 for index in 0..<searchPeopleArray.count {
    let annotation = HPAnnotation(title: "", annotationTitle: "")
    mapView.addAnnotation(annotation)
}

N.B: Here HPAnnotationView is my custom view class and xib name. HPAnnotation is my custom MKAnnotation.

注意：这里 HPAnnotationView 是我的自定义视图类和 xib 名称。HPAnnotation 是我的自定义 MKAnnotation。