Menambahkan peta 3D ke aplikasi

Pilih platform: Android iOS JavaScript

Produk atau fitur ini bersifat Eksperimental (pra-GA). Produk dan fitur pra-GA mungkin memiliki dukungan terbatas, dan perubahan pada produk serta fitur pra-GA mungkin tidak kompatibel dengan versi pra-GA lainnya. Penawaran Pra-GA tercakup dalam Persyaratan Khusus Layanan Google Maps Platform. Untuk mengetahui informasi selengkapnya, lihat deskripsi tahap peluncuran.

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.

   Peringatan: Jangan periksa kunci API ke dalam kontrol sumber eksternal atau publik

   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.

   Catatan: Urutan parameter penting. Kamera diinisialisasi dengan memberikan lintang terlebih dahulu, lalu bujur. Pastikan Anda menentukan nilai yang benar untuk setiap lokasi, terutama saat menempelkan dari sumber lain, atau kamera dapat menampilkan lokasi yang tidak terduga.

   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: Tinggi kamera di atas permukaan laut.

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

Catatan: Ketinggian kamera adalah nilai absolut. Di area yang permukaan tanahnya jauh di atas permukaan laut, menyetel ketinggian yang lebih rendah dari permukaan tanah dapat menyebabkan efek visual yang aneh.

Catatan: Anda juga dapat menyesuaikan ketinggian relatif kamera menggunakan kemiringan dan rentang.

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.