MKAnnotationView自定义及标题点击事件相关技术咨询

嘿，我来帮你一步步解决这两个问题，干货拉满👇

自定义标注视图核心是创建MKAnnotationView的子类，然后把你想要的UI元素（比如图标、标题标签）加进去，最后在地图的代理方法里返回这个自定义视图就行。

步骤1：创建自定义Annotation数据类 #

先定义一个存储标注数据的类，继承MKAnnotation，方便后续传递标题、坐标等信息：

class CustomAnnotation: NSObject, MKAnnotation {
    var coordinate: CLLocationCoordinate2D
    var title: String?
    var subtitle: String?

    init(coordinate: CLLocationCoordinate2D, title: String?, subtitle: String?) {
        self.coordinate = coordinate
        self.title = title
        self.subtitle = subtitle
        super.init()
    }
}

步骤2：创建自定义MKAnnotationView子类 #

在这个类里添加你需要的UI组件（比如图标、标题标签），并完成布局：

class CustomAnnotationView: MKAnnotationView {
    // 自定义标题标签
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
        label.textColor = .white
        label.backgroundColor = UIColor.black.withAlphaComponent(0.7)
        label.textAlignment = .center
        label.layer.cornerRadius = 8
        label.clipsToBounds = true
        return label
    }()

    // 自定义图标
    private let iconImageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFit
        iv.image = UIImage(systemName: "mappin.circle.fill")
        iv.tintColor = .red
        return iv
    }()

    override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        setupSubviews()
        self.canShowCallout = true // 允许显示气泡（如果需要的话）
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // 布局子视图
    private func setupSubviews() {
        addSubview(iconImageView)
        addSubview(titleLabel)

        iconImageView.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            // 图标居中
            iconImageView.centerXAnchor.constraint(equalTo: centerXAnchor),
            iconImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            iconImageView.widthAnchor.constraint(equalToConstant: 40),
            iconImageView.heightAnchor.constraint(equalToConstant: 40),
            // 标题在图标下方
            titleLabel.topAnchor.constraint(equalTo: iconImageView.bottomAnchor, constant: 8),
            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            titleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor, constant: 4),
            titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -4),
            titleLabel.heightAnchor.constraint(equalToConstant: 24)
        ])

        // 初始化时设置标题
        updateTitle()
    }

    // 当annotation更新时同步标题
    override var annotation: MKAnnotation? {
        didSet {
            updateTitle()
        }
    }

    private func updateTitle() {
        guard let customAnnotation = annotation as? CustomAnnotation else { return }
        titleLabel.text = customAnnotation.title
    }
}

步骤3：在地图代理中返回自定义视图 #

在你的ViewController里实现mapView(_:viewForAnnotation:)方法，返回我们的自定义标注视图：

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    // 跳过用户位置的标注
    if annotation is MKUserLocation {
        return nil
    }

    let reuseID = "CustomAnnotation"
    // 复用标注视图
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseID) as? CustomAnnotationView

    if annotationView == nil {
        annotationView = CustomAnnotationView(annotation: annotation, reuseIdentifier: reuseID)
    } else {
        annotationView?.annotation = annotation
    }

    return annotationView
}

方案1：点击整个标注视图（非气泡）执行操作 #

如果想让用户点击标注的图标/标题区域就触发操作，可以给自定义视图添加点击手势：
在CustomAnnotationView的setupSubviews()方法末尾添加：

let tapGesture = UITapGestureRecognizer(target: self, action: #selector(onAnnotationTapped))
addGestureRecognizer(tapGesture)

然后添加对应的处理方法：

@objc private func onAnnotationTapped() {
    // 通过通知或代理把点击事件传递给ViewController
    if let annotation = self.annotation {
        NotificationCenter.default.post(name: NSNotification.Name("AnnotationTapped"), object: annotation)
    }
}

最后在ViewController里监听通知：

override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(self, selector: #selector(handleAnnotationTap(_:)), name: NSNotification.Name("AnnotationTapped"), object: nil)
}

@objc private func handleAnnotationTap(_ notification: Notification) {
    if let annotation = notification.object as? CustomAnnotation {
        print("点击了标注：\(annotation.title ?? "")")
        // 这里写你的业务逻辑，比如跳转页面、弹窗等
    }
}

方案2：点击气泡触发操作（解决callout方法未触发问题） #

你说mapView(_:annotationView:calloutAccessoryControlTapped:)没触发，大概率是因为没给气泡添加可点击的附属控件。这个方法只有点击气泡里的附属按钮（比如右侧的详情按钮）时才会触发。

解决步骤：

1. 在CustomAnnotationView的init方法里添加附属按钮：

// 添加右侧详情按钮
let detailBtn = UIButton(type: .detailDisclosure)
self.rightCalloutAccessoryView = detailBtn

2. 现在实现代理方法，点击按钮就会触发了：

func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
    if let annotation = view.annotation as? CustomAnnotation {
        print("点击了气泡按钮：\(annotation.title ?? "")")
        // 执行你的操作
    }
}

额外：点击整个气泡触发操作

如果想让用户点击气泡任意区域都有反应，可以用mapView(_:didSelectAnnotationView:)方法，这个方法在标注被选中（气泡弹出）时触发：

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    if let annotation = view.annotation as? CustomAnnotation {
        print("选中了标注，气泡弹出：\(annotation.title ?? "")")
        // 这里写你的操作逻辑
    }
}

内容的提问来源于stack exchange，提问作者Jumana Alhaddad