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

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

Sản phẩm hoặc tính năng này đang trong giai đoạn thử nghiệm (trước khi phát hành rộng rãi). Các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể bị hạn chế về dịch vụ hỗ trợ, đồng thời các thay đổi đối với các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể không tương thích với các phiên bản trước giai đoạn phát hành rộng rãi khác. Các Sản phẩm/dịch vụ ở giai đoạn trước khi phát hành rộng rãi tuân theo Điều khoản dành riêng cho dịch vụ của Nền tảng Google Maps. Để biết thêm thông tin, hãy xem nội dung mô tả về giai đoạn ra mắt.

Trang này trình bày một ví dụ về cách thêm bản đồ 3D cơ bản vào một ứ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à đáp ứng các điều kiện sau:

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

Để 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.

Tham gia 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 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.

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

1. Mở tệp có tên là 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ế toàn bộ mã bên trong 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 chạy Map là MapMode:

   • .hybrid 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: Thiết lập khoá API.

1. Bạn phải đặt khoá API trước khi Bản đồ khởi tạo. 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 đồ.

   Cảnh báo: Không kiểm tra khoá API trong hệ thống kiểm soát nguồn bên ngoài hoặc công khai

   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ị một khung cảnh ở trung tâm Manhattan.

   Lưu ý: Thứ tự của tham số rất quan trọng. Camera được khởi tạo bằng cách cung cấp trước tiên là vĩ độ, sau đó là kinh độ. Đảm bảo rằng bạn chỉ định đúng giá trị cho từng giá trị, đặc biệt là khi dán từ một nguồn khác, nếu không máy ảnh có thể hiển thị một vị trí không mong muốn.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

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

• heading: Góc phương vị tính bằng độ từ hướng bắc để hướng camera về phía.
• 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 từ camera đến vị trí có vĩ độ và kinh độ
• altitude: Độ cao của camera so với mực nước biển.

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

Lưu ý: Độ cao của camera là một giá trị tuyệt đối. Ở những khu vực có độ cao so với mực nước biển cao hơn nhiều, việc đặt độ cao thấp hơn độ cao so với mực nước biển có thể gây ra hiệu ứng hình ảnh lạ.

Lưu ý: Bạn cũng có thể điều chỉnh độ cao tương đối của camera bằng cách sử dụng độ nghiêng và phạm vi.

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

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

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 {
     CameraDemo()
   }
   

2. Chạy ứng dụng

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

Xin chúc mừng!

Bạn đã thêm thành công một 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.