如何在SwiftUI的MapKit地图中设置mapType为.hybridFlyover以实现3D地球效果？

没问题！要在你的SwiftUI地图中实现类似UIKit里MKMapType.hybridFlyover的3D地球效果，只需要给Map视图添加一个mapStyle修饰器，指定对应的样式即可。

修改步骤： #

• 在你的Map视图的链式调用中，添加.mapStyle(.hybrid(elevation: .realistic))修饰器
  • 这里的.hybrid(elevation: .realistic)就是SwiftUI对UIKit中hybridFlyover的等价实现，它会渲染带有3D地形的混合卫星地图，呈现出地球的立体效果

修改后的完整代码： #

import SwiftUI
import MapKit

struct LocationGlobeView: View {
    @State private var cities: [City] = [
        City(coordinate: .init(latitude: 40.7128, longitude: -74.0060)), // 修正经度符号：纽约位于西经
        City(coordinate: .init(latitude: 37.7749, longitude: -122.4194)), // 修正经度符号：旧金山位于西经
        City(coordinate: .init(latitude: 47.6062, longitude: -122.3321)) // 修正经度符号：西雅图位于西经
    ]
    @State private var userTrackingMode: MapUserTrackingMode = .follow
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 25.7617,
            longitude: -80.1918 // 修正经度符号：迈阿密位于西经
        ),
        span: MKCoordinateSpan(
            latitudeDelta: 10,
            longitudeDelta: 10
        )
    )
    
    var body: some View {
        Map(coordinateRegion: $region, interactionModes: MapInteractionModes.all, showsUserLocation: true, userTrackingMode: $userTrackingMode, annotationItems: cities) { city in
            MapAnnotation(coordinate: city.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5)) {
                Circle()
                    .stroke(Color.green)
                    .frame(width: 44, height: 44)
            }
        }
        .mapStyle(.hybrid(elevation: .realistic)) // 新增这行实现3D地球效果
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct LocationGlobeView_Previews: PreviewProvider {
    static var previews: some View {
        LocationGlobeView()
    }
}

struct City: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
}

额外说明： #

我顺便修正了你代码里的经度符号——美国的城市都位于西经范围，所以经度值应该为负数，这样标注点才会显示在正确的地理位置上。

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