3D 지도 컨트롤 및 탐색

컨트롤 개요

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

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

탐색 분석 컨트롤

다음 이미지는 Maps JavaScript API의 사실적인 3D 지도에서 표시하는 기본 컨트롤 집합을 보여줍니다.

컨트롤이 있는 지도 이미지

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

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

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

자바스크립트

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

사전 설정된 카메라 경로

지도 JavaScript의 포토리얼리스틱 3D 지도는 두 가지 사전 설정된 카메라 경로를 제공합니다. 카메라 경로는 애니메이션의 길이를 변경하여 (속도를 높이거나 낮춤) 맞춤설정하거나, 여러 경로를 결합하여 더 극적인 경험을 만들 수 있습니다.

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

다음 단계