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

Sản phẩm hoặc tính năng này đang trong giai đoạn thử nghiệm (giai đoạn trước khi phát hành rộng rãi). Các sản phẩm và tính năng ở giai đoạn trước khi phát hành rộng rãi có thể có chế độ hỗ trợ hạn chế và các thay đổi đối với sản phẩm và tính năng ở giai đoạn trước khi phát hành rộng rãi có thể không tương thích với các phiên bản ở giai đoạn trước khi phát hành rộng rãi khác. Các sản phẩm ở 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 phần mô tả giai đoạn phát hành .

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

Trang này trình bày một 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 điều 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 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 ứ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. Xem hướng dẫn trong phần thiết lập section.

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à trình đ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. Để thực hiện việc này, hãy đặ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 vào hệ thống kiểm soát nguồn công khai hoặc bên ngoài

   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.

   Lưu ý: Thứ tự tham số rất quan trọng. Camera được khởi động bằng cách cung cấp vĩ độ trước, sau đó là kinh độ. Hãy đảm bảo bạn chỉ định đúng giá trị cho từng tham số, đặc biệt là khi dán từ một nguồn khác, nếu không, camera 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(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50),
         altitudeMode: .relativeToGround
       ), 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ề phía đó.
• tilt: Góc nghiêng tính bằng độ, trong đó 0 là góc nhìn thẳng từ trên cao và 90 là góc nhìn theo chiều 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
• altitudeMode: Cách tính chiều cao 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.

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ị thêm dữ liệu 3D, hãy đặt các tham số ban đầu để hiển thị chế độ xem nghiêng, gần hơn.

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 phải 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 {
     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 bản đồ 3D vào ứng dụng!

Tiếp theo, bạn có thể khám phá thêm các tính năng nâng cao 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.