MakeXYZ Fun

[Video Summary] Ch. 8.10 Map Plotting with SwiftUI (the Snacktacular app)

Admin -

Mô tả nhanh

Video này hướng dẫn cách tích hợp bản đồ vào ứng dụng iOS sử dụng SwiftUI, hiển thị các địa điểm (đã có tọa độ vĩ độ và kinh độ) trên bản đồ, đồng thời hiển thị vị trí hiện tại của người dùng.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách tích hợp bản đồ vào ứng dụng iOS sử dụng SwiftUI, hiển thị các địa điểm (đã có tọa độ vĩ độ và kinh độ) trên bản đồ, đồng thời hiển thị vị trí hiện tại của người dùng.

Các bước thực hiện bao gồm:

  1. Import MapKit: Thêm thư viện MapKit để làm việc với bản đồ.
  2. Tạo Region: Sử dụng MKCoordinateRegion để xác định khu vực hiển thị trên bản đồ (tâm và tỷ lệ).
  3. Tạo Annotations:
    • Sử dụng một mảng các annotation (điểm đánh dấu) để hiển thị trên bản đồ.
    • Bất kỳ model nào có thuộc tính ID và tọa độ (latitude/longitude) đều có thể làm annotation.
    • Trong video này, một struct Annotation mới được tạo để đảm bảo ID không bị nil. Struct này chứa ID (uuid), tên, địa chỉ và tọa độ.
  4. Hiển thị Map:
    • Sử dụng đối tượng Map trong SwiftUI.
    • Duyệt qua mảng annotations để vẽ từng điểm đánh dấu bằng MapMarker.
    • Sử dụng showUserLocation để hiển thị vị trí người dùng (chấm xanh).
  5. Cập nhật bản đồ khi view xuất hiện (onAppear):
    • Nếu có spot (địa điểm đã lưu) thì bản đồ sẽ tập trung vào tọa độ của spot đó, ngược lại, bản đồ sẽ tập trung vào vị trí hiện tại của thiết bị.
    • Khi không có spot (spot.id == nil), cần sử dụng Task để đảm bảo tọa độ vị trí thiết bị được lấy trước khi cập nhật vị trí bản đồ.
  6. Cập nhật bản đồ khi spot thay đổi (onChange):
    • Khi một spot được chọn (ví dụ, từ kết quả tìm kiếm), sử dụng modifier onChange để cập nhật lại annotation và tâm bản đồ.
    • Struct Spot cần conform Equatable để sử dụng onChange.

Cụ thể các bước làm trong video:

  • Import MapKit vào file SpotDetailView.
  • Khai báo @State private var mapRegion = MKCoordinateRegion() để xác định vùng bản đồ.
  • Khai báo let regionSize = 500.0 để định kích thước vùng bản đồ.
    • Gán mapRegion vào coordinateRegion của Map.
  • Trong onAppear:
    • Kiểm tra spot.id != nil. Nếu đúng, tâm bản đồ được đặt tại tọa độ của spot.
    • Nếu spot.id == nil:
      • Dùng Task để lấy vị trí người dùng sau đó đặt tâm bản đồ vào đó.
  • Tạo struct Annotation conform Identifiable.
  • Tạo @State private var annotations: [Annotation] = [].
  • Trong onAppear, gán mảng annotations bằng dữ liệu từ spot hiện tại.
  • Trong Map, annotationItems gán bằng annotations, sử dụng MapMarker để display, và set coordinate là annotation.coordinate.
  • Thêm showUserLocation(true) vào Map để hiển thị chấm xanh vị trí của người dùng.
  • Thêm modifier onChange để theo dõi thay đổi của spot và cập nhật map.
  • Struct Spot cần conform Equatable để sử dụng onChange.

<Lời chúc>
Chúc bạn thành công trong việc tích hợp bản đồ vào ứng dụng iOS của mình!