如何动态切换Map中的UserAnnotation与自定义闭包版UserAnnotation？

问题根源 #

SwiftUI的Map视图对内部注解（如UserAnnotation）的渲染有缓存机制，直接在Map的content闭包里通过if/else切换不同的UserAnnotation实例时，Map不会自动检测到状态变化并更新视图——初始加载时闭包会执行，但后续状态切换时，闭包不会被重新求值，导致注解始终停留在初始状态。

解决方案1：强制Map重建（快速生效） #

通过给Map添加.id()修饰符，让布尔值变化时触发Map实例重建，从而重新执行content闭包，切换对应的UserAnnotation：

import SwiftUI
import MapKit

final class TestingViewModel: ObservableObject {
    @Published var showArrowToTarget = false
}

struct TestingView: View {
    @StateObject private var viewModel = TestingViewModel()
    
    var body: some View {
        Map(initialPosition: .userLocation(fallback: .automatic)){
            if viewModel.showArrowToTarget {
                UserAnnotation(){
                    Text("showArrowToTarget").font(.title)
                }
            } else {
                UserAnnotation()
            }
        }
        .id(viewModel.showArrowToTarget) // 核心：状态变化时重建Map
        .safeAreaInset(edge: .top){
            Button("Toggle showArrowToTarget: \(viewModel.showArrowToTarget)"){
                viewModel.showArrowToTarget.toggle()
            }
            .padding()
            .background(Color.white)
            .cornerRadius(8)
        }
    }
}

#Preview {
    TabView{
        TestingView()
    }
}

解决方案2：统一注解容器（更流畅） #

不切换UserAnnotation实例，而是在同一个带闭包的UserAnnotation内动态切换显示内容（手动模拟系统默认注解样式），避免重建整个Map：

import SwiftUI
import MapKit

final class TestingViewModel: ObservableObject {
    @Published var showArrowToTarget = false
}

struct TestingView: View {
    @StateObject private var viewModel = TestingViewModel()
    
    var body: some View {
        Map(initialPosition: .userLocation(fallback: .automatic)){
            UserAnnotation {
                if viewModel.showArrowToTarget {
                    Text("showArrowToTarget").font(.title)
                } else {
                    // 模拟系统默认的蓝色圆点注解样式
                    Circle()
                        .fill(Color.blue)
                        .frame(width: 20, height: 20)
                        .overlay(
                            Circle()
                                .fill(Color.white)
                                .frame(width: 8, height: 8)
                        )
                }
            }
        }
        .safeAreaInset(edge: .top){
            Button("Toggle showArrowToTarget: \(viewModel.showArrowToTarget)"){
                viewModel.showArrowToTarget.toggle()
            }
            .padding()
            .background(Color.white)
            .cornerRadius(8)
        }
    }
}

#Preview {
    TabView{
        TestingView()
    }
}

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