3D 지도 컨트롤 및 탐색

플랫폼 선택: Android iOS JavaScript

컨트롤 개요

Maps JavaScript API의 3D 지도를 통해 표시되는 지도에는 사용자와 지도가 상호작용할 수 있는 UI 요소(탐색 컨트롤이라고 함)가 포함됩니다. 탐색 컨트롤은 기본적으로 지도 UI에 표시되지만, 간소화하거나 맞춤 컨트롤을 위한 공간을 확보하기 위해 사용 중지할 수 있습니다. UI 컨트롤이 사용 중지된 경우 지도 탐색을 위한 단축키를 사용할 수 있습니다.

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

탐색 설정

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

컨트롤이 표시된 지도 이미지

다음은 Maps JavaScript의 3D 지도에 있는 컨트롤의 전체 목록입니다.

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

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

자바스크립트

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: 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>

다음 단계