SwiftUI中如何为MKMapSnapshotter添加大头针标注视图？

核心结论 #

MKMapSnapshotter本身不支持直接将标注（如大头针）嵌入快照，必须通过手动绘制的方式把标注叠加到生成的地图快照上。

手动实现步骤 #

1. 转换地理坐标为快照像素点 #

利用MKMapSnapshot提供的point(for:)方法，把CLLocationCoordinate2D类型的坐标转换成快照图片上的像素位置。

2. 准备大头针资源 #

可以使用系统自带的大头针图标（比如UIImage(systemName: "mappin")），或者自定义的大头针图片。

3. 叠加绘制大头针到快照 #

通过Core Graphics创建图形上下文，先绘制原始快照图片，再将大头针绘制到对应的像素位置（注意调整锚点，确保大头针底部对准坐标点）。

修改后的完整代码 #

func snapshotGenerator(width: CGFloat, height: CGFloat) {
    // 定义地图显示区域
    let region = MKCoordinateRegion(
        center: self.location,
        span: MKCoordinateSpan(
            latitudeDelta: self.span,
            longitudeDelta: self.span
        )
    )
    let locationAnnotation = CLLocationCoordinate2D(latitude: selectedItem.latitude, longitude: selectedItem.longitude)
    
    // 配置快照选项
    let options = MKMapSnapshotter.Options()
    options.region = region
    options.size = CGSize(width: width, height: height)
    options.showsBuildings = true
    
    // 生成快照
    let snapshotter = MKMapSnapshotter(options: options)
    snapshotter.start { [weak self] snapshotImage, error in
        guard let self = self else { return }
        if let error = error {
            print(error)
            return
        }
        guard let snapshot = snapshotImage else { return }
        
        // 1. 将地理坐标转换为快照上的像素点
        let annotationPoint = snapshot.point(for: locationAnnotation)
        
        // 2. 准备大头针图片（这里用系统图标，你也可以替换成自定义图片）
        guard let pinImage = UIImage(systemName: "mappin")?.withTintColor(.red) else {
            self.snapshotImage = snapshot.image
            return
        }
        
        // 3. 计算大头针的绘制位置：让大头针底部对准坐标点
        let pinSize = pinImage.size
        let pinDrawPoint = CGPoint(
            x: annotationPoint.x - pinSize.width / 2,
            y: annotationPoint.y - pinSize.height
        )
        
        // 4. 创建图形上下文，叠加绘制
        UIGraphicsBeginImageContextWithOptions(snapshot.image.size, true, snapshot.image.scale)
        snapshot.image.draw(at: .zero)
        pinImage.draw(at: pinDrawPoint)
        let finalImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        // 赋值最终合成的图片
        self.snapshotImage = finalImage ?? snapshot.image
    }
}

关键细节说明 #

• 锚点调整：默认图片绘制起点是左上角，因此需要把大头针的底部对齐到坐标点，所以y坐标要减去图片高度，x坐标减去图片宽度的一半让它居中显示。
• 图形上下文配置：UIGraphicsBeginImageContextWithOptions的第二个参数设为true，保证图片有正确的背景和透明度；第三个参数复用快照图片的scale，避免生成的图片模糊。
• 内存安全：使用[weak self]避免循环引用，闭包内先解包self再进行操作。

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