Menambahkan peta 3D ke aplikasi

Pilih platform: Android iOS JavaScript

Halaman ini membahas contoh cara menambahkan peta 3D dasar ke aplikasi iOS menggunakan Maps 3D SDK untuk 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 yang diaktifkan
• Kunci API untuk 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 lanjut.

Lihat contoh kode lainnya di GitHub.

Bagian 1: Membuat aplikasi SwiftUI dasar

1. Buat aplikasi baru di Xcode.
2. Tetapkan Product Name ke Hello3DWorld, dengan ID organisasi ditetapkan ke com.example. Nama paket harus berupa 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 melakukan inisialisasi Map adalah MapMode:

   • .hybrid,
   • .roadmap, 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 ditetapkan sebelum Peta diinisialisasi. Lakukan ini dengan menetapkan Map.apiKey di pengendali peristiwa init() dari View yang berisi Peta.

   Peringatan: Jangan memeriksa 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, rotasi, dan rentang untuk menyesuaikan tampilan peta.

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

   Catatan: Urutan parameter sangat penting. Kamera diinisialisasi dengan memberikan lintang terlebih dahulu, lalu bujur. Pastikan Anda menentukan nilai yang benar untuk masing-masing, terutama saat menempelkan dari sumber lain, atau kamera mungkin 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(
         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)
     }
   }
   

Kode di atas menetapkan nilai untuk parameter berikut:

• center: LatLngAltitude yang mewakili lokasi kamera
• heading: Bearing dalam derajat dari utara untuk mengarahkan kamera.
• tilt: Sudut kemiringan dalam derajat, dengan 0 adalah tepat di atas kepala dan 90 adalah melihat secara horizontal.
• roll: Sudut rotasi di sekitar bidang vertikal kamera, dalam derajat.
• range: Jarak kamera dalam meter dari lokasi lintang, bujur
• fieldOfView: Sudut yang mewakili ruang pandang kamera

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

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

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

Bagian 5: 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 {
     ContentView()
   }
   

2. Menjalankan aplikasi

Bangun dan jalankan aplikasi.

Status pemuatan peta dan status error

Maps 3D SDK for iOS otomatis menampilkan masukan visual bawaan saat mengelola status Map:

• Overlay pemuatan: Indikator progres di tengah ditampilkan saat tampilan peta pertama kali diinisialisasi atau dimuat.
• Overlay error: Overlay error ditampilkan jika peta gagal dimuat.

Jika Anda menerapkan gaya visual peta berbasis cloud menggunakan style(mapID:error:) di Map, Anda dapat meneruskan closure error untuk menangani error pemuatan gaya.

Memproses peristiwa ketukan peta

Untuk memproses peristiwa ketukan di peta, terapkan pengubah onTap(_:) ke Map. Saat pengguna mengetuk peta, closure akan menerima nilai MapTapInfo yang memberikan location (LatLngAltitude) dan content yang diketuk (MapTapInfo.Content.map atau MapTapInfo.Content.place(id:)). Untuk informasi selengkapnya tentang interaksi lokasi menarik, lihat Berinteraksi dengan lokasi menarik.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

Selamat!

Anda telah berhasil menambahkan peta 3D ke aplikasi.

Selanjutnya, Anda dapat mempelajari fitur lanjutan Maps 3D SDK for iOS, seperti animasi jalur kamera, penanda 3D, atau poligon.