Kamera yollarını animasyona dönüştürme

Platformu seçin: Android iOS JavaScript

Kullanıcılarınıza daha etkileyici bir deneyim sunmak için 3D haritanıza kamera yolu animasyonları ekleyebilirsiniz. Kamera yolu animasyonları, haritadaki bir noktaya uçabilir veya bu noktanın etrafında uçabilir.

Aşağıdaki örnekte flyCameraTo ve flyCameraAround animasyonları birleştirilmiştir:

Önceden ayarlanmış kamera rotaları

Maps JavaScript'teki 3D Haritalar, iki hazır kamera yolu sunar. Kamera yolları, animasyonun süresi değiştirilerek (böylece hız artırılır veya azaltılır) ya da daha sinematik deneyimler oluşturmak için birleştirilerek özelleştirilebilir. Ayrıca, altitudeMode değerini belirterek kameranın yüksekliğini kontrol edebilirsiniz.

Maps JavaScript'teki 3D Haritalar aşağıdaki kamera yollarını destekler:

• flyCameraTo animasyonu, harita merkezinden belirtilen bir hedefe doğru uçar.
• flyCameraAround animasyonu, haritada belirtilen sayıda dönüş yaparak bir nokta etrafında döner.

İki mevcut yol, ilgi çekici bir noktaya uçmak, etrafında dönmek ve belirtilen zamanda durmak için birleştirilebilir.

Git

Aşağıdaki kod örneğinde, kameranın bir konuma uçmasını sağlayacak şekilde nasıl animasyon oluşturulacağı gösterilmektedir:

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

Uçarak dolaşma

Aşağıdaki kod örneğinde, kameranın bir konumun etrafında uçacak şekilde nasıl animasyonlandırılacağı gösterilmektedir:

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

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

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

Animasyonları birleştirme

Aşağıdaki kod örneğinde, kamerayı bir konuma uçurmak ve ilk animasyon sona erdiğinde konumun etrafında döndürmek için animasyonların nasıl birleştirileceği gösterilmektedir:

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