如何让3个组合的SF Symbol围绕指定点旋转？（iOS 17 MapKit）

你当前代码的核心问题是用了大量硬编码的offset和嵌套旋转，导致布局坐标系混乱，锚点控制失效。以下是优化后的实现思路和代码：

关键优化方向 #

• 统一符号组的坐标系，用容器明确旋转锚点，避免多层偏移冲突
• 简化布局结构，用ZStack精确控制三个符号的相对位置
• 用状态变量直接管理旋转角度，让动画逻辑更清晰

优化后的代码 #

import SwiftUI

struct StarArrowView: View {
    var bumpColor: Color
    @State private var rotationAngle: Double = 0
    
    var body: some View {
        ZStack {
            // 调试辅助线，确认布局时可保留，上线前删除
            Divider()
            Divider().offset(y: 25)
            Divider().offset(y: -25)
            Divider().rotationEffect(.degrees(90))
            Divider().rotationEffect(.degrees(90)).offset(x: 25)
            Divider().rotationEffect(.degrees(90)).offset(x: -25)
            
            // 符号组容器，以尾部为对齐基准（旋转锚点）
            ZStack(alignment: .trailing) {
                // 星星符号：相对于尾部锚点的位置
                Image(systemName: "star.fill")
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(bumpColor)
                    .font(.system(size: 30, weight: .light))
                    .offset(x: -30, y: 0)
                
                // 斜线箭头：居中对齐尾部锚点
                Image(systemName: "line.diagonal.arrow")
                    .foregroundStyle(bumpColor)
                    .font(.system(size: 40, weight: .light))
                    .rotationEffect(.degrees(45))
                
                // 右下箭头：相对于尾部锚点的位置
                Text("➘")
                    .foregroundStyle(bumpColor)
                    .font(.system(size: 30, weight: .ultraLight))
                    .rotationEffect(.degrees(190))
                    .offset(x: 10, y: 5)
            }
            // 围绕尾部锚点旋转
            .rotationEffect(.degrees(rotationAngle), anchor: .trailing)
            // 循环动画
            .animation(Animation.spring().repeatForever(autoreverses: true), value: rotationAngle)
            .onAppear {
                rotationAngle = 180
            }
        }
    }
}

#Preview {
    StarArrowView(bumpColor: .red) // 替换为你的heatmap10颜色
}

适配MapKit Annotation的额外建议 #

如果要将此视图作为MapKit标注使用：

• 用MapAnnotation直接嵌入SwiftUI视图，确保标注的锚点与地图坐标系对齐
• 若需要更精细的控制，可自定义MKAnnotationView子类，将StarArrowView作为其hostedView
• 旋转角度可绑定到GPS的行进方向数据，替换当前的循环动画逻辑

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