Menganimasikan jalur kamera

Pilih platform: Android iOS JavaScript

Anda dapat menambahkan animasi jalur kamera ke peta 3D untuk memberikan pengalaman yang lebih imersif bagi pengguna. Animasi jalur kamera dapat terbang ke atau terbang di sekitar suatu titik di peta.

Contoh berikut menggabungkan animasi flyCameraTo dan flyCameraAround:

Jalur kamera preset

Peta 3D di Maps JavaScript menyediakan dua jalur kamera preset. Jalur kamera dapat disesuaikan dengan mengubah durasi animasi (sehingga meningkatkan atau mengurangi kecepatan), atau dengan menggabungkannya untuk menciptakan pengalaman yang lebih sinematik. Selain itu, Anda dapat mengontrol ketinggian kamera dengan menentukan altitudeMode.

Peta 3D 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 dengan jumlah putaran yang ditentukan.

Dua jalur yang tersedia dapat digabungkan untuk terbang ke tempat menarik, berputar di sekitarnya, lalu berhenti saat ditentukan.

Terbang ke

Contoh kode berikut menunjukkan cara menganimasikan kamera untuk terbang ke suatu lokasi:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Terbang di sekitar

Contoh kode berikut menunjukkan cara menganimasikan kamera untuk terbang di sekitar lokasi:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Menggabungkan animasi

Contoh kode berikut menunjukkan cara menggabungkan animasi untuk menerbangkan kamera ke suatu lokasi, lalu memutar di sekitar lokasi saat animasi pertama berakhir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}