如何解决iOS 17中MapKit自定义标注选择异常问题

问题现象 #

在iOS 17的SwiftUI项目中使用MapKit自定义标注时，点击标注后标注显示已选中，但无法唤起DetailsView；同时关闭DetailsView后，标注的选中状态无法自动取消，且需要保留选中/取消的动画效果。

问题根源 #

1. 自定义手势覆盖默认交互：CustomMarker中添加的onTapGesture会覆盖MapKit的默认选择逻辑，导致Map(selection:)绑定的selection变量无法更新，无法触发sheet。
2. 状态脱节：AnnotationMarker使用本地@State private var isSelected维护选中状态，与父视图的selection变量完全独立，两者状态无法同步。

修复方案 #

1. 移除自定义点击手势，恢复MapKit默认选择逻辑 #

删除CustomMarker中的onTapGesture，让MapKit的Annotation默认点击交互生效，这样点击标注时会自动更新selection绑定，进而唤起sheet。

2. 同步标注选中状态与父视图selection #

将AnnotationMarker的选中状态改为依赖父视图的selection变量，不再使用本地状态，确保两者完全同步：

• 给AnnotationMarker添加@Binding var selection: AnnotationModel?参数
• 通过selection == annotation判断当前标注是否被选中

3. 关闭Sheet自动取消选中 #

利用sheet(item:)的特性：当Sheet被关闭时，绑定的item会自动置为nil，此时selection变为nil，标注的选中状态也会同步取消。

4. 保留动画效果 #

在CustomMarker的尺寸变化视图上添加animation修饰符，依赖isSelected状态变化自动触发动画，确保选中/取消时有平滑过渡效果。

修改后完整代码 #

import MapKit
import SwiftUI

struct ContentView: View {
  private var annotations = generateRandomLocations()
  @State private var selection: AnnotationModel?

  var body: some View {
    Map(selection: $selection) {
      ForEach(annotations) { annotation in
        AnnotationMarker(annotation: annotation, selection: $selection)
      }
    }
    .sheet(item: $selection) { station in
      DetailsView(id: station.id)
        .presentationDetents([.medium])
    }
  }
}

struct DetailsView: View {
  var id: UUID
  var body: some View {
    Text("DetailsView: \(id)")
  }
}

#Preview {
  ContentView()
}

struct AnnotationMarker: MapContent {
  var annotation: AnnotationModel
  @Binding var selection: AnnotationModel?

  private var isSelected: Bool { selection == annotation }

  var body: some MapContent {
    Annotation(coordinate: annotation.coordinate) {
      CustomMarker(isSelected: isSelected)
    } label: {
      Text(annotation.id.uuidString)
    }
    .tag(annotation)
    .annotationTitles(isSelected ? .visible : .hidden)
  }
}

struct CustomMarker: View {
  var isSelected: Bool

  var body: some View {
    ZStack {
      Circle()
        .frame(width: isSelected ? 52 : 28, height: isSelected ? 52 : 28)
        .foregroundStyle(.green)
        .animation(.easeInOut(duration: 0.2), value: isSelected)

      Image(systemName: "house")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: isSelected ? 32 : 16)
        .foregroundStyle(.white)
        .animation(.easeInOut(duration: 0.2), value: isSelected)
    }
  }
}

struct AnnotationModel: Identifiable, Hashable {
  let id = UUID()
  var coordinate: CLLocationCoordinate2D {
    CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
  }
  var latitude: Double
  var longitude: Double
}

/// 创建测试用随机位置
func generateRandomLocations(count: Int = 50) -> [AnnotationModel] {
  return (1...count).map { _ in
    let latitude = Double.random(in: (43.5673...43.6573))
    let longitude = Double.random(in: (3.8176...3.9076))
    return AnnotationModel(latitude: latitude, longitude: longitude)
  }
}

效果说明 #

• 点击标注：标注平滑放大，同时唤起DetailsView
• 关闭DetailsView：标注平滑缩小，选中状态自动取消
• 所有状态变化均保持动画效果，符合需求

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