Thêm bản đồ 3D vào ứng dụng

Chọn nền tảng: Android iOS JavaScript

Bản đồ cơ bản của Seattle, San Francisco và Paris

Trang này trình bày ví dụ về cách thêm bản đồ 3D cơ bản vào ứng dụng iOS bằng SDK Maps 3D dành cho iOS. Hướng dẫn trên trang này giả định rằng bạn đã hoàn tất các bước trong trang Thiết lập và có những nội dung sau:

  • Một dự án trên Google Cloud đã bật SDK Maps 3D dành cho iOS
  • Khoá API cho SDK Maps 3D dành cho iOS
  • Xcode phiên bản 16.0 trở lên đã thêm gói SDK Maps 3D dành cho iOS đã thêm.

Để biết thêm thông tin về các điều kiện tiên quyết này, hãy xem phần Thiết lập.

Làm theo lớp học lập trình nâng cao hơn.

Xem thêm mã mẫu trên GitHub.

Phần 1: Tạo ứng dụng SwiftUI cơ bản

  1. Tạo ứng dụng mới trong Xcode.
  2. Đặt Tên sản phẩm thành Hello3DWorld, với mã nhận dạng tổ chức được đặt thành com.example. Tên gói phải là com.example.Hello3DWorld.
  3. Chọn giao diện SwiftUI.
  4. Thêm thư viện Maps 3D vào ứng dụng của bạn. Xem hướng dẫn trong phần thiết lập section.

Phần 2: Thêm bản đồ

Bản đồ 3D tối giản của một quả địa cầu

  1. Mở tệp có tên ContentView.swift. Đây là điểm truy cập và tính năng điều hướng chính cho ứng dụng của bạn.

  2. Nhập SwiftUI và gói GoogleMaps3D.

  3. Thay thế toàn bộ mã bên trong phần khai báo nội dung bằng Map(mode: .hybrid).

    Cấu hình ban đầu tối thiểu mà bạn cần cung cấp để khởi động Map là MapMode:

    • .hybrid,
    • .roadmap, hoặc
    • .satellite

    Tệp ContentView.swift của bạn sẽ có dạng như sau:

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}

Phần 3: Đặt khoá API.

  1. Bạn phải đặt khoá API trước khi Bản đồ khởi động. Hãy thực hiện việc này bằng cách đặt Map.apiKey trong trình xử lý sự kiện init() của View chứa Bản đồ.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}

Phần 4: Sử dụng camera để kiểm soát chế độ xem bản đồ

Chế độ xem Bản đồ 3D được kiểm soát bởi lớp Camera. Trong bước này, bạn sẽ tìm hiểu cách chỉ định vị trí, độ cao, hướng, độ nghiêng, độ xoay và phạm vi để tuỳ chỉnh chế độ xem bản đồ.

  1. Thay đổi lệnh gọi hàm Map() để đưa vào thuộc tính initialCamera. Khởi động initialCamera để hiển thị chế độ xem trung tâm thành phố Manhattan.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
      heading: 52,
      tilt: 68,
      roll: 0.0,
      range: 1039,
      fieldOfView: .degrees(50)
    ), mode: .hybrid)
  }
}

Mã ở trên đặt giá trị cho các tham số sau:

  • center: LatLngAltitude đại diện cho vị trí camera
  • heading: Hướng tính bằng độ từ hướng bắc để hướng camera về.
  • tilt: Góc nghiêng tính bằng độ, trong đó 0 là góc thẳng đứng và 90 là góc nhìn ngang.
  • roll: Góc xoay quanh mặt phẳng dọc của camera, tính bằng độ.
  • range: Khoảng cách tính bằng mét của camera từ vị trí vĩ độ, kinh độ
  • fieldOfView: Góc đại diện cho trường nhìn của camera

Nếu bạn không cung cấp bất kỳ tham số bổ sung nào trong số này, hệ thống sẽ sử dụng giá trị mặc định.

Để chế độ xem camera hiển thị thêm dữ liệu 3D, hãy đặt các tham số ban đầu để hiển thị chế độ xem nghiêng và gần hơn.

Phần 5: Xem trước và chạy ứng dụng

Bản đồ 3D cơ bản của Thành phố New York

  1. Thêm bản xem trước Xcode

    Bản xem trước là một tính năng mạnh mẽ của XCode cho phép bạn xem và tương tác với Ứng dụng mà không cần sử dụng Trình mô phỏng hoặc thiết bị bên ngoài.

    Để thêm bản xem trước, hãy thêm khối mã #Preview {} bên ngoài cấu trúc của bạn.

    #Preview {
  ContentView()
}

  2. Chạy ứng dụng

Tạo bản dựng và chạy ứng dụng

Trạng thái lỗi và trạng thái tải bản đồ

SDK Maps 3D dành cho iOS tự động hiển thị phản hồi trực quan tích hợp sẵn trong khi quản lý trạng thái của Map:

  • Lớp phủ đang tải: Một chỉ báo tiến trình ở giữa sẽ xuất hiện khi chế độ xem bản đồ được khởi động lần đầu hoặc đang tải.
  • Lớp phủ lỗi: Lớp phủ lỗi sẽ xuất hiện nếu bản đồ không tải được.

Nếu bạn áp dụng định kiểu bản đồ dựa trên đám mây bằng cách sử dụng style(mapID:error:) trên Map, bạn có thể truyền một đóng error để xử lý lỗi tải kiểu.

Theo dõi các sự kiện nhấn vào bản đồ

Để theo dõi các sự kiện nhấn vào bản đồ, hãy áp dụng đối tượng sửa đổi onTap(_:) cho Map. Khi người dùng nhấn vào bản đồ, đóng sẽ nhận được giá trị MapTapInfo cung cấp location (LatLngAltitude) và content đã nhấn (MapTapInfo.Content.map hoặc MapTapInfo.Content.place(id:)). Để biết thêm thông tin về các tương tác với điểm đến, hãy xem phần Tương tác với các điểm đến.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

Xin chúc mừng!

Bạn đã thêm thành công bản đồ 3D vào ứng dụng!

Tiếp theo, bạn có thể khám phá các tính năng nâng cao hơn của SDK Maps 3D dành cho iOS, chẳng hạn như ảnh động đường dẫn camera, điểm đánh dấu 3D hoặc đa giác.