3D 지도 컨트롤 및 탐색

컨트롤 개요

Maps JavaScript API의 포토리얼리스틱 3D 지도를 통해 표시되는 지도에는 사용자와 지도가 상호작용할 수 있는 UI 요소가 포함됩니다. 이러한 요소를 컨트롤이라고 하며 UI에 포함할지 여부를 선택할 수 있습니다. UI 컨트롤을 표시하지 않더라도 사용자는 키보드 단축키를 사용하여 지도를 탐색할 수 있습니다.

Maps JavaScript API의 포토리얼리스틱 3D 지도에서는 사전 설정된 카메라 경로를 사용하여 사용자가 지도를 둘러볼 수 있도록 안내하는 기능도 지원합니다. 이러한 경로는 맞춤설정하고 결합하여 풍부한 3D 환경을 만들 수 있습니다.

탐색 컨트롤

다음 이미지는 Maps JavaScript API의 포토리얼리스틱 3D 지도에서 표시하는 기본 컨트롤 집합을 보여줍니다.

다음은 지도 JavaScript의 포토리얼리스틱 3D 지도의 전체 컨트롤 목록입니다.

• 확대/축소 컨트롤은 지도의 확대/축소 수준을 변경할 수 있는 '+' 및 '-' 버튼을 표시합니다.
• 기울기 제어를 사용하면 카메라의 기울기를 변경할 수 있습니다.
• 회전 컨트롤을 사용하면 카메라의 방향을 변경할 수 있습니다.
• 이동 컨트롤은 지도의 중심을 변경할 수 있는 '←', '→', '↑', '↓' 버튼을 표시합니다.

다음 코드 샘플은 탐색 컨트롤 전환을 보여줍니다.

사전 설정된 카메라 경로

지도 JavaScript의 포토리얼리스틱 3D 지도는 두 가지 사전 설정 카메라 경로를 제공합니다. 애니메이션의 지속 시간을 변경하여 (속도 증가 또는 감소) 카메라 경로를 맞춤설정하거나 카메라 경로를 결합하여 영화 같은 환경을 만들 수 있습니다.

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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

다음 단계

• 지도와 카메라를 제한하는 방법을 알아보세요.
• 사용자 상호작용을 수신하고 처리하는 방법을 알아봅니다.