如何在SwiftUI的MapKit Map中添加罗盘或旋转功能

不用切换到MKMapView，基于你现有的代码，通过以下两种方案实现需求，完全保留已有的自定义标记、长按添加大头针等功能：

方案1：iOS 17+ 内置控件（最简单） #

iOS 17及以上的SwiftUI Map提供了内置的地图控件，直接添加即可启用罗盘，同时通过绑定区域的heading属性实现旋转控制：

// 假设你已定义：
// @State private var mapRegion: MKCoordinateRegion = ...
// @ObservedObject var viewModel: YourViewModel

@State private var heading: Double = 0 // 控制地图旋转角度（0=正北，顺时针递增）

var body: some View {
    Map(coordinateRegion: $mapRegion, annotationItems: viewModel.locations) { location in
        MapAnnotation(coordinate: location.coordinate) {
            MarkerView(location: location)
        }
    }
    // 同步旋转角度到地图区域
    .onChange(of: heading) { newHeading in
        mapRegion.heading = newHeading
    }
    // 添加内置罗盘（iOS 17+）
    .mapControls {
        MapCompass() // 系统默认罗盘，点击可重置正北
        MapScaleView() // 可选：添加比例尺
    }
    // 可选：添加旋转控制滑块（也可通过手势替代）
    .overlay(alignment: .bottomTrailing) {
        Slider(value: $heading, in: 0...360, step: 1)
            .frame(width: 150)
            .padding()
            .background(.white.opacity(0.8))
            .cornerRadius(8)
    }
}

方案2：兼容iOS 16及以下版本 #

如果需要支持更低系统版本，自定义罗盘视图+手势控制即可：

1. 自定义罗盘视图 #

struct CustomCompassView: View {
    @Binding var heading: Double
    
    var body: some View {
        Button(action: {
            // 点击罗盘重置为正北
            withAnimation {
                heading = 0
            }
        }) {
            Image(systemName: "location.north.fill")
                .rotationEffect(.degrees(-heading)) // 跟随地图旋转反向转动，保持指向正北
                .padding()
                .background(.white.opacity(0.8))
                .cornerRadius(8)
        }
    }
}

2. 集成到现有地图 #

// 假设你已定义：
// @State private var mapRegion: MKCoordinateRegion = ...
// @ObservedObject var viewModel: YourViewModel

@State private var heading: Double = 0
@State private var lastRotationAngle: Double = 0 // 记录手势旋转的上一次角度

var body: some View {
    Map(coordinateRegion: $mapRegion, annotationItems: viewModel.locations) { location in
        MapAnnotation(coordinate: location.coordinate) {
            MarkerView(location: location)
        }
    }
    // 同步旋转角度到地图区域
    .onChange(of: heading) { newHeading in
        mapRegion.heading = newHeading
    }
    // 叠加自定义罗盘到地图右上角
    .overlay(alignment: .topTrailing) {
        CustomCompassView(heading: $heading)
            .padding()
    }
    // 添加旋转手势，支持用户用双指旋转地图
    .gesture(
        RotationGesture()
            .onChanged { angle in
                let delta = angle.degrees - lastRotationAngle
                heading = (heading + delta).truncatingRemainder(dividingBy: 360)
                lastRotationAngle = angle.degrees
            }
            .onEnded { _ in
                lastRotationAngle = 0
            }
    )
}

关键说明 #

• 核心逻辑是通过绑定MKCoordinateRegion的heading属性控制地图旋转角度，0代表正北，顺时针旋转角度递增。
• 两种方案都不会影响你已实现的自定义标记、长按添加大头针等功能，仅在现有Map视图上扩展控件和手势。

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