Berinteraksi dengan peta

Halaman ini berisi informasi tentang fitur utama di Peta 3D Fotorealistik di Maps JavaScript yang memungkinkan Anda membuat pengalaman 3D yang interaktif dan imersif. Dokumentasi berikut mencakup:

  • Menangani peristiwa antarmuka pengguna untuk interaksi yang lancar.
  • Termasuk kontrol eksplorasi untuk menavigasi ruang 3D.
  • Menggunakan jalur kamera preset untuk tur terpandu.
  • Menerapkan batasan kamera untuk mempertahankan fokus pada area tertentu.

Peristiwa Antarmuka Pengguna

Bagian ini menguraikan peristiwa interaktif dan notifikasi perubahan status yang dapat Anda proses dan tangani secara terprogram saat menggunakan peta 3D. JavaScript dalam browser berbasis peristiwa, yang berarti merespons interaksi pengguna dengan menghasilkan peristiwa yang dapat diproses program Anda dan menjalankan kode yang sesuai.

Ada dua jenis peristiwa utama:

  • Peristiwa interaksi pengguna (seperti klik mouse) disebarkan dari area pandang peta 3D ke kode Anda. Peristiwa ini memungkinkan Anda merespons tindakan langsung pengguna dalam lingkungan peta 3D. Lihat contoh.
  • Notifikasi perubahan status mencerminkan update pada model data peta 3D dan status rendering yang mendasarinya, menggunakan skema penamaan property_changed konvensional.

Setiap objek API pemetaan 3D mengekspos serangkaian peristiwa bernama yang dapat didaftarkan pemroses peristiwa oleh program Anda dan mengeksekusi logika saat peristiwa tersebut terjadi menggunakan fungsi addEventListener() bawaan. Contoh berikut mengilustrasikan peristiwa umum yang dipicu saat pengguna berinteraksi dengan peta 3D.

Contoh berikut menunjukkan peristiwa yang dipicu saat pengguna berinteraksi dengan peta:

Kontrol eksplorasi

Peta yang ditampilkan di Peta 3D Fotorealistik di Maps JavaScript API berisi elemen UI yang mendukung interaksi pengguna dengan peta. Elemen ini dikenal sebagai kontrol pengguna. Kontrol eksplorasi disertakan secara default, tetapi Anda dapat memilih untuk menyembunyikannya di aplikasi.

Gambar berikut menunjukkan kontrol default yang ditampilkan oleh Peta 3D Fotorealistik di Maps JavaScript:

Gambar peta dengan kontrol

Di bawah ini adalah daftar kumpulan kontrol lengkap di Peta 3D Fotorealistik di Maps JavaScript:

  • Kontrol zoom menampilkan tombol "+" dan "-" untuk mengubah tingkat zoom peta.
  • Kontrol kemiringan memungkinkan Anda mengubah kemiringan kamera.
  • Kontrol putar memungkinkan Anda mengubah arah kamera.
  • Kontrol pemindahan menampilkan tombol "←", "→", "↑", dan "↓" untuk mengubah pusat peta.

Kontrol & animasi kamera

Jalur kamera preset

Peta 3D Fotorealistik di Maps JavaScript menyediakan dua jalur kamera preset. Jalur kamera dapat disesuaikan dengan mengubah durasi animasi (sehingga meningkatkan atau menurunkan kecepatan), atau dengan menggabungkannya untuk menciptakan pengalaman yang lebih sinematik.

Peta 3D Fotorealistik di Maps JavaScript mendukung jalur kamera berikut:

  • Animasi FlyCameraTo terbang dari pusat peta ke tujuan yang ditentukan.
  • Animasi FlyCameraAround berputar di sekitar titik pada peta sebanyak yang Anda tentukan.

Kedua jalur yang tersedia dapat digabungkan untuk terbang ke lokasi menarik, berputar di sekitarnya, lalu berhenti jika diinginkan.

Coba sampel

Batasan kamera

Anda mungkin ingin mengontrol geser kamera, ketinggian maksimum, atau membuat batas lintang/bujur yang membatasi pergerakan pengguna di peta tertentu. Anda dapat melakukannya menggunakan batasan kamera.

Untuk contoh cara kerja dan penerapan batasan kamera, lihat demo.