SwiftUI MapKit 合集

参考：认识 SwiftUI 版 MapKit

Camera 两种初始化的方式

@State private var position = MapCameraPosition.region(
		MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 28.209195, longitude: 112.842627), latitudinalMeters: 300, longitudinalMeters: 300)
		// MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 28.209195, longitude: 112.842627), span: MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005))
)

var body: some View {
  	// Map(initialPosition: position) {
		Map(position: $position) {
				...
    }
}

上面两种初始化 Camera 的方式是一样的。

地理坐标与墨卡托投影坐标转换

// 经纬度转投影坐标
let coordinate = CLLocationCoordinate2D(latitude: 28.209321, longitude: 112.843033)
let point: MKMapPoint = MKMapPoint(Coordinate)
print(point.x)
print(point.y)

// 投影坐标转经纬度
let point = MKMapPoint(x: 218359192.2732601, y: 112278796.05034925)
let coordinate = point.coordinate

将 iOS 系统自带定位坐标转换成高德坐标

swift Coordinate

系统定位拿到的坐标是 WGS-84 国际标准。

但是在 Map 显示时，因为 iPhone 使用的是高德地图，所以会有偏移，需要把坐标转换为 GCJ-02 火星坐标。

MapControls

Map() {

}
.mapControls({
		MapCompass()                    // 指南针
                
		#if os(watchOS)
		MapLocationCompass()            // 仅适用于 WatchOS 的指南针
		#endif
                
    #if os(macOS)
    MapPitchSlider()                // 控制地图是否显示高度，也就是 2D / 3D
    MapZoomStepper()                // 允许用户调节缩放比例
    #endif
                
    MapPitchToggle()

    MapScaleView(anchorEdge: .trailing)     // 用于显示地图比例尺的一个控件。比例尺可以帮助用户了解地图上显示的距离，与实际世界中的距离的比例关系

    MapUserLocationButton()                 // 设置关联的地图位置为当前用户的位置： 右上角的箭头
    })

MapStyle

MapStyle有预先配置好的地图样式可以选择，如果没有特别要求，基本可以满足。

• .standard: 标准样式
• .imagery: 基于图像的风格，如使用卫星图像的风格。
• .hybrid: 混合风格，例如使用一个地区的卫星图像，并在其上添加道路和路名信息层。

其次我们可以添加额外配置，控制是否渲染高度（2D, 3D切换）、地图强调风格，显示兴趣点和显示交通情况等。

Map() {

}
.mapStyle(
    MapStyle.standard(
        elevation: .flat, 
        emphasis: .muted, 
        pointsOfInterest: PointOfInterestCategories(arrayLiteral: .publicTransport), 
        showsTraffic: true))

关于 pointsOfInterest：

.mapStyle(.standard(pointsOfInterest: .excludingAll))					// 除去所有兴趣点
.mapStyle(.standard(pointsOfInterest: .including([.cafe])))

地图交互

Map地图上的交互主要通过配置interactionModes进行设置，有下面几种类型：

• .all: 允许所有的交互类型
• .pin: 允许用户平移到地图的不同区域
• .zoom: 允许用户放大或缩小地图位置
• .pitch: 允许用户设置地图的间距，从不同的角度查看地图
• .rotate: 允许用户对地图进行旋转操作

Map(
    ...
    interactionModes: [.pitch, .pin],
    ...){}

一个 MapKit 没有的功能

iOS 17, SwiftUI MapKit. Has anyone solved for smooth animation of custom annotations?

SwiftUI Map Annotation Coordinate Animation

Map 上的控件在移动时，做不到像 UserAnnotation() 那样顺滑，好像是 withAnimation() 不会生效。