如何在iOS 17的MapKit中绘制用户位置的30米动态半径圈？

核心思路 #

iOS 17的MapKit已经简化了地理图形绘制，直接用MapCircle就能指定米级半径，无需手动计算经纬度偏移。通过监听用户位置变化，实时更新MapCircle的坐标即可实现动态跟随效果。

具体修改步骤 #

1. 添加用户位置状态变量
   在Home结构体中新增状态变量存储实时用户坐标：

@State private var userLocation: CLLocationCoordinate2D?

2. 设置位置管理器委托
   让Home遵守CLLocationManagerDelegate协议，实现位置更新回调：

extension Home: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard let latestLocation = locations.last else { return }
        userLocation = latestLocation.coordinate
    }
}

同时在onAppear中补充委托绑定和位置更新请求：

.onAppear {
    locationManager.requestWhenInUseAuthorization()
    locationManager.delegate = self
    locationManager.startUpdatingLocation() // 开启实时位置更新
}

3. 绘制动态半径圈
   在Map的内容闭包中添加MapCircle组件，绑定用户位置并设置30米半径：

Map(position: $position, selection: $selectedResult) {
    // ... 原有Marker和UserAnnotation代码 ...
    
    // 绘制30米半径圈
    if let userLocation = userLocation {
        MapCircle(center: userLocation, radius: 30)
            .stroke(.blue, lineWidth: 2)
            .fill(.blue.opacity(0.1))
    }
}

4. 权限配置
   在Info.plist中添加位置权限描述（必须配置，否则无法获取位置）：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置以显示周边范围</string>

完整修改后的代码片段 #

struct Home: View {
    
    @State private var position: MapCameraPosition = .userLocation(fallback: .automatic)
    @State private var visibleRegion: MKCoordinateRegion?
    @State private var searchResults: [MKMapItem] = []
    @State private var selectedResult: MKMapItem?
    @State private var showDetails: Bool = false
    @State private var lookAroundScene: MKLookAroundScene?
    @State private var userLocation: CLLocationCoordinate2D? // 新增
    
    let locationManager = CLLocationManager()
    
    var body: some View {
        
        Map(position: $position, selection: $selectedResult) {
            
            let customLocations: [MKMapItem] = [
                createMapItem(name: "Via Palamos", coordinate: .viaPalamos),
                createMapItem(name: "Larry Way", coordinate: .larryWay),
            ]
            
            ForEach(customLocations, id: \.self) { result in
                Marker(result.name ?? "Unknown Location", systemImage: "binoculars.fill", coordinate: result.placemark.coordinate)
                    .tint(.blue)
            }
            .annotationTitles(.hidden)
            
            UserAnnotation()
            
            // 新增：绘制30米半径圈
            if let userLocation = userLocation {
                MapCircle(center: userLocation, radius: 30)
                    .stroke(.blue, lineWidth: 2)
                    .fill(.blue.opacity(0.1))
            }
            
        }
        .mapStyle(.standard(pointsOfInterest: .excludingAll))
        .mapStyle(.standard(elevation: .realistic))
        .sheet(isPresented: $showDetails, onDismiss: {
            withAnimation(.snappy) { }
        }, content: {
            MapDetails()
                .presentationDetents([.height(750)])
                .presentationBackgroundInteraction(.enabled(upThrough: .height(750)))
                .presentationCornerRadius(25)
                .interactiveDismissDisabled(true)
        })
        .onAppear {
            locationManager.requestWhenInUseAuthorization()
            locationManager.delegate = self // 新增
            locationManager.startUpdatingLocation() // 新增
        }
        .onChange(of: searchResults) {
            position = .automatic
        }
        .onChange(of: selectedResult) { oldValue, newValue in
            showDetails = newValue != nil
            fetchLookAroundPreview()
        }
        .onMapCameraChange { context in
            visibleRegion = context.region
        }
        .mapControls {
            VStack {
                MapUserLocationButton()
                MapPitchToggle()
                MapCompass()
                MapScaleView()
            }
            .buttonBorderShape(.circle)
        }
    }
}

// 新增：位置管理器委托实现
extension Home: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard let latestLocation = locations.last else { return }
        userLocation = latestLocation.coordinate
    }
}

额外优化建议 #

• 若需降低位置更新频率、节省电量，可设置locationManager.distanceFilter = 5（仅当位置变化超过5米时更新）。
• 添加动画让圈的移动更平滑：给MapCircle追加.animation(.easeInOut, value: userLocation)。

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