Menambahkan peta 3D ke aplikasi

Halaman ini menjelaskan contoh cara menambahkan peta 3D dasar ke aplikasi iOS menggunakan Maps 3D SDK for iOS. Petunjuk di halaman ini mengasumsikan bahwa Anda telah menyelesaikan langkah-langkah di halaman Penyiapan dan memiliki hal berikut:

• Project Google Cloud dengan Maps 3D SDK for iOS diaktifkan
• Kunci API Maps 3D SDK for iOS
• Xcode versi 16.0 atau yang lebih baru dengan paket Maps 3D SDK for iOS ditambahkan.

Untuk mengetahui informasi selengkapnya tentang prasyarat ini, lihat Penyiapan.

Ikuti codelab yang lebih canggih.

Lihat contoh kode lainnya di GitHub.

Bagian 1: Membuat aplikasi SwiftUI dasar

1. Buat aplikasi baru di Xcode.
2. Tetapkan Nama Produk Anda ke Hello3DWorld, dengan ID organisasi ditetapkan ke com.example. Nama paket harus com.example.Hello3DWorld.
3. Pilih antarmuka SwiftUI.
4. Tambahkan library Maps 3D ke aplikasi Anda. Lihat petunjuk di bagian penyiapan.

Bagian 2: Menambahkan peta

1. Buka file bernama ContentView.swift. Ini adalah titik entri dan navigasi utama untuk aplikasi Anda.

2. Impor SwiftUI dan paket GoogleMaps3D.

3. Ganti semua kode di dalam deklarasi isi dengan Map(mode: .hybrid).

   Konfigurasi awal minimum yang perlu Anda berikan untuk menginisialisasi Map adalah MapMode:

   • .hybrid, atau
   • .satellite

   File ContentView.swift Anda seharusnya terlihat seperti ini:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

Bagian 3: Tetapkan kunci API Anda.

1. Kunci API harus disetel sebelum Peta diinisialisasi. Lakukan ini dengan menetapkan Map.apiKey di pengendali peristiwa init() dari View yang berisi Peta.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

Bagian 4: Menggunakan kamera untuk mengontrol tampilan peta

Tampilan Peta 3D dikontrol oleh class Camera. Pada langkah ini, Anda akan mempelajari cara menentukan lokasi, ketinggian, arah, kemiringan, putaran, dan rentang untuk menyesuaikan tampilan peta.

1. Ubah panggilan fungsi Map() untuk menyertakan properti initialCamera. Lakukan inisialisasi initialCamera untuk menampilkan pemandangan pusat kota Manhattan.

   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)
     }
   }
   

Kode di atas menetapkan nilai untuk parameter ini:

• heading: Bearing dalam derajat dari utara untuk mengarahkan kamera.
• tilt: Sudut kemiringan dalam derajat, dengan 0 tepat di atas dan 90 melihat secara horizontal.
• roll: Sudut kemiringan di sekitar bidang vertikal kamera, dalam derajat.
• range: Jarak kamera dalam meter dari lokasi garis lintang dan bujur
• altitude: Ketinggian kamera di atas permukaan laut.

Jika Anda tidak memberikan salah satu parameter tambahan ini, nilai default akan digunakan.

Untuk membuat tampilan kamera menampilkan lebih banyak data 3D, tetapkan parameter awal untuk menampilkan tampilan yang lebih dekat dan miring.

Bagian 6: Melihat pratinjau dan menjalankan Aplikasi

1. Menambahkan Pratinjau Xcode

   Pratinjau adalah fitur XCode canggih yang memungkinkan Anda melihat dan berinteraksi dengan Aplikasi tanpa harus menggunakan Simulator atau perangkat eksternal.

   Untuk menambahkan pratinjau, tambahkan blok kode #Preview {} di luar struct Anda.

   #Preview {
     CameraDemo()
   }
   

2. Menjalankan aplikasi

Bangun dan jalankan aplikasi.

Selamat!

Anda telah berhasil menambahkan peta 3D ke aplikasi.

Selanjutnya, Anda dapat menjelajahi fitur yang lebih canggih dari Maps 3D SDK for iOS, seperti animasi jalur kamera, penanda 3D, atau poligon.