카메라 경로 애니메이션

플랫폼 선택: Android iOS JavaScript

3D 지도에 카메라 경로 애니메이션을 추가하여 사용자에게 더 몰입감 있는 환경을 제공할 수 있습니다. 카메라 경로 애니메이션은 지도상의 한 지점으로 이동하거나 그 주변을 이동할 수 있습니다.

다음 예에서는 flyCameraTo 및 flyCameraAround 애니메이션을 결합합니다.

카메라 경로 사전 설정

지도 JavaScript의 3D 지도는 두 가지 사전 설정된 카메라 경로를 제공합니다. 애니메이션의 지속 시간을 변경하여 (속도 증가 또는 감소) 카메라 경로를 맞춤설정하거나 카메라 경로를 결합하여 영화 같은 경험을 만들 수 있습니다. 또한 altitudeMode를 지정하여 카메라의 높이를 제어할 수 있습니다.

Maps JavaScript의 3D 지도는 다음 카메라 경로를 지원합니다.

• flyCameraTo 애니메이션이 지도 중심에서 지정된 대상으로 이동합니다.
• flyCameraAround 애니메이션이 지도상의 한 점을 중심으로 지정된 회전수만큼 회전합니다.

두 가지 경로를 결합하여 관심 장소로 비행하고, 그 주위를 회전한 다음, 지정된 경우 중지할 수 있습니다.

빠른 이동

다음 코드 샘플은 특정 위치로 이동하도록 카메라를 애니메이션 처리하는 방법을 보여줍니다.

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

둘러보기

다음 코드 샘플은 특정 위치를 중심으로 카메라가 이동하는 애니메이션을 보여줍니다.

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

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

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

애니메이션 결합

다음 코드 샘플은 애니메이션을 결합하여 카메라를 위치로 이동한 다음 첫 번째 애니메이션이 끝나면 위치를 중심으로 회전하는 방법을 보여줍니다.

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