Animowanie ścieżek kamery

Wybierz platformę: Android iOS JavaScript

Możesz dodać animacje ścieżek kamery do mapy 3D, aby zapewnić użytkownikom bardziej wciągające wrażenia. Animacje ścieżek kamery mogą przelatywać do punktu na mapie lub wokół niego.

Poniższy przykład łączy animacje flyCameraTo i flyCameraAround:

Gotowe ścieżki kamery

Mapy 3D w Mapach JavaScript udostępniają 2 gotowe ścieżki kamery. Ścieżki kamery można dostosować, zmieniając czas trwania animacji (zwiększając lub zmniejszając prędkość) albo łącząc je, aby uzyskać bardziej filmowe wrażenia. Dodatkowo możesz kontrolować wysokość kamery, określając altitudeMode.

Mapy 3D w Mapach JavaScript obsługują te ścieżki kamery:

• Animacja flyCameraTo przelatuje od środka mapy do określonego miejsca docelowego.
• Animacja flyCameraAround obraca się wokół punktu na mapie o określoną liczbę obrotów.

Dostępne ścieżki można połączyć, aby przelatywać do interesującego miejsca, obracać się wokół niego, a następnie zatrzymać się w określonym momencie.

Przejdź do

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała do lokalizacji:

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

Przelatuj wokół

Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała wokół lokalizacji:

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

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

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

Łączenie animacji

Poniższy przykładowy kod pokazuje, jak połączyć animacje, aby przelatywać kamerą do lokalizacji, a następnie obracać się wokół niej po zakończeniu pierwszej animacji:

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