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 thông tin 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 có thêm gói SDK Maps 3D dành cho iOS.

Để 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 một 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 một ứng dụng SwiftUI cơ bản

  1. Tạo một ứng dụng mới trong Xcode.
  2. Đặt Tên sản phẩm thành Hello3DWorld, với giá trị 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.

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à thành phần đ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ế tất cả 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ư bên dưới:

    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 chạy. Hãy làm 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 để điều khiển chế độ xem bản đồ

Chế độ xem bản đồ 3D do lớp Camera kiểm soát. 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() để thêm thuộc tính initialCamera. Khởi động initialCamera để hiển thị khung cảnh 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)
  }
}

Đoạn mã trên đặt giá trị cho các tham số sau:

  • center: LatLngAltitude đại diện cho vị trí camera
  • heading: Góc phương vị tính bằng độ từ hướng bắc để hướng máy ảnh về phía đó.
  • tilt: Góc nghiêng tính bằng độ, trong đó 0 là ngay trên đầu và 90 là nhìn theo chiều ngang.
  • roll: Góc xoay quanh mặt phẳng dọc của máy ảnh, 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, thì hệ thống sẽ sử dụng giá trị mặc định.

Để chế độ xem camera hiển thị nhiều dữ liệu 3D hơn, hãy đặt các tham số ban đầu để hiển thị chế độ xem gần hơn, nghiêng 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 một 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 tải bản đồ và trạng thái lỗi

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: Chỉ báo tiến trình ở giữa sẽ xuất hiện khi chế độ xem bản đồ được khởi chạy 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 á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 hàm đó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 trên 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 đồ, hàm closure sẽ nhận được một giá trị MapTapInfo cung cấp location (LatLngAltitude) và content được nhấn (MapTapInfo.Content.map hoặc MapTapInfo.Content.place(id:)). Để biết thêm thông tin về các hoạt động tương tác với địa điểm yêu thích, hãy xem bài viết Tương tác với địa điểm yêu thích.

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 một ứ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 đi của camera, điểm đánh dấu 3D hoặc đa giác.