การแสดงแผนที่ใน SwiftUI

มุมมองแผนที่ของ SwiftUI

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

ขอบเขตพิกัด

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

การควบคุมกล้องด้วยตำแหน่ง

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

การเพิ่มหมุด

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

การปรับแต่งหมุด

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

คำอธิบายประกอบด้วยมุมมองแบบกำหนดเอง

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

การแสดงหมุดหลายรายการจากข้อมูล

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

การแสดงตำแหน่งที่ตั้งของผู้ใช้

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

ตัวควบคุมแผนที่

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

รูปแบบแผนที่

Map()
    .mapStyle(.hybrid(elevation: .realistic))

การตอบสนองต่อการเปลี่ยนแปลงของกล้อง

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

แบบทดสอบสั้น: แผนที่ SwiftUI

ทบทวน: การแสดงแผนที่ใน SwiftUI