如何实现类似Photos应用的自定义MKMarkerAnnotationView？

我完全懂你想要的效果——就是像Photos应用那样，把用户的圆形头像直接作为地图标记本身，而不是藏在呼出视图里对吧？网上确实很少有针对这个场景的直接教程，不过我们可以通过两种思路来实现，我给你具体的代码示例：

方法1：改造MKMarkerAnnotationView（保留气泡样式+内部头像） #

如果你想保留MKMarkerAnnotationView自带的气泡外观，只是把内部的默认图标替换成圆形头像，可以利用它的glyphImage属性。首先我们需要一个辅助方法把头像处理成圆形：

func makeCircularProfileImage(from image: UIImage?) -> UIImage? {
    guard let originalImage = image else { return nil }
    // 按需调整头像尺寸，这里设为40x40
    let imageSize = CGSize(width: 40, height: 40)
    UIGraphicsBeginImageContextWithOptions(imageSize, false, 0.0)
    let circlePath = UIBezierPath(ovalIn: CGRect(origin: .zero, size: imageSize))
    circlePath.addClip()
    originalImage.draw(in: CGRect(origin: .zero, size: imageSize))
    let circularImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return circularImage
}

然后修改你的mapView(_:viewFor:)方法：

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    // 跳过系统的用户位置标记
    if annotation is MKUserLocation {
        return nil
    }
    
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") as? MKMarkerAnnotationView
    if annotationView == nil {
        annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "pin")
        annotationView?.canShowCallout = true
        
        // 生成圆形头像并设置为marker的内部图标
        if let profileImage = UIImage(named: "profileImage"), let circularImage = makeCircularProfileImage(from: profileImage) {
            annotationView?.glyphImage = circularImage
        }
        
        // 可选：调整marker外观，比如修改气泡底色、去掉默认染色
        annotationView?.markerTintColor = .systemGray5
        annotationView?.glyphTintColor = .clear // 避免头像被marker的色调覆盖
    } else {
        annotationView?.annotation = annotation
    }
    return annotationView
}

方法2：完全自定义AnnotationView（直接用头像当标记） #

如果想要彻底替换掉默认的气泡标记，直接把圆形头像作为标记本身，那就用基础的MKAnnotationView来实现：

同样先用上边的makeCircularProfileImage方法，然后修改代理方法：

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    if annotation is MKUserLocation {
        return nil
    }
    
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "profilePin")
    if annotationView == nil {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "profilePin")
        annotationView?.canShowCallout = true
        // 呼出视图里可以继续保留头像（可选）
        annotationView?.leftCalloutAccessoryView = UIImageView(image: UIImage(named: "profileImage"))
        
        // 设置圆形头像作为标记本身
        if let profileImage = UIImage(named: "profileImage"), let circularImage = makeCircularProfileImage(from: profileImage) {
            annotationView?.image = circularImage
            // 调整点击偏移，让点击位置更贴合头像中心
            annotationView?.centerOffset = CGPoint(x: 0, y: -circularImage.size.height/2)
        }
    } else {
        annotationView?.annotation = annotation
        // 如果每个标记对应不同用户，这里要重新设置对应的头像，避免复用错误
    }
    return annotationView
}

额外注意点 #

• 头像复用：如果你的地图上有多个不同用户的标记，一定要在复用annotationView的时候重新设置对应的头像，不要只在初始化时设置，否则会出现头像混乱的问题。
• 性能优化：如果有大量标记，建议提前缓存处理好的圆形头像，避免每次调用都重新绘制。
• 尺寸适配：可以根据地图的缩放级别动态调整头像大小，让标记在不同缩放比例下都显示合适。

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