앱에 3D 지도 추가

플랫폼 선택: Android iOS JavaScript

이 제품 또는 기능은 실험용(GA 이전) 버전입니다. GA 이전 제품과 기능에 대한 지원이 제한될 수 있으며 GA 이전 제품과 기능의 변경사항이 다른 GA 이전 버전과 호환되지 않을 수 있습니다. GA 이전 버전 제품 또는 서비스에는 Google Maps Platform 서비스별 약관이 적용됩니다. 자세한 내용은 출시 단계 설명을 참고하세요.

이 페이지에서는 iOS용 지도 3D SDK를 사용하여 iOS 앱에 기본 3D 지도를 추가하는 방법을 보여주는 예를 안내합니다. 이 페이지의 안내에서는 설정 페이지의 단계를 이미 완료했으며 다음이 있다고 가정합니다.

• iOS용 지도 3D SDK가 사용 설정된 Google Cloud 프로젝트
• iOS용 지도 3D SDK API 키
• Xcode 버전 16.0 이상에 iOS용 지도 3D SDK 패키지가 추가되어 있어야 합니다.

이러한 기본 요건에 대한 자세한 내용은 설정을 참고하세요.

고급 Codelab 따라하기

GitHub에서 더 많은 코드 샘플 보기

1부: 기본 SwiftUI 앱 만들기

1. Xcode에서 새 앱을 만듭니다.
2. 제품 이름을 Hello3DWorld로 설정하고 조직 식별자를 com.example로 설정합니다. 패키지 이름은 com.example.Hello3DWorld여야 합니다.
3. SwiftUI 인터페이스를 선택합니다.
4. 앱에 지도 3D 라이브러리를 추가합니다. 설정 섹션의 안내를 참고하세요.

2부: 지도 추가하기

1. ContentView.swift 파일을 엽니다. 이는 앱의 진입점이자 주요 탐색 기능입니다.

2. SwiftUI 및 GoogleMaps3D 패키지를 가져옵니다.

3. 본문 선언 내부의 모든 코드를 Map(mode: .hybrid)로 바꾸세요.

   Map를 초기화하는 데 필요한 최소 초기 구성은 MapMode입니다.

   • .하이브리드 또는
   • .위성

   ContentView.swift 파일은 다음과 같이 표시됩니다.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

3단계: API 키 설정

1. API 키는 맵이 초기화되기 전에 설정되어야 합니다. Map이 포함된 View의 init() 이벤트 핸들러에서 Map.apiKey를 설정하여 이를 수행합니다.

   경고: API 키를 외부 또는 공개 소스 제어에 체크인하지 마세요.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

4부: 카메라를 사용하여 지도 뷰 제어

3D 지도 뷰는 Camera 클래스로 제어됩니다. 이 단계에서는 위치, 고도, 방향, 기울기, 회전, 범위를 지정하여 지도 뷰를 맞춤설정하는 방법을 알아봅니다.

1. initialCamera 속성을 포함하도록 Map() 함수 호출을 변경합니다. initialCamera를 초기화하여 맨해튼 도심의 모습을 보여줍니다.

   참고: 매개변수 순서가 중요합니다. 카메라는 위도를 먼저 제공하고 그 다음에 경도를 제공하여 초기화됩니다. 특히 다른 소스에서 붙여넣을 때는 각각에 대해 올바른 값을 지정해야 합니다. 그렇지 않으면 카메라가 예상치 못한 위치를 표시할 수 있습니다.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

위 코드는 다음 매개변수에 대한 값을 설정합니다.

• heading: 카메라가 향하는 북쪽 방향의 각도입니다.
• tilt: 기울기 각도(도)로, 0은 바로 위를 바라보는 각도이고 90은 수평을 바라보는 각도입니다.
• roll: 카메라의 수직 평면을 기준으로 한 롤 각도(도)입니다.
• range: 위도, 경도 위치에서 카메라까지의 거리(미터)입니다.
• altitude: 해수면 위 카메라의 높이입니다.

이러한 추가 매개변수를 제공하지 않으면 기본값이 사용됩니다.

참고: 카메라 고도는 절대값입니다. 지면이 해수면보다 훨씬 높은 지역에서는 지면보다 낮은 고도를 설정하면 이상한 시각적 효과가 발생할 수 있습니다.

참고: 기울기 및 범위를 사용하여 카메라의 상대 고도를 조정할 수도 있습니다.

카메라 뷰에 더 많은 3D 데이터를 표시하려면 더 가까운 기울어진 뷰를 표시하도록 초기 매개변수를 설정하세요.

6부: 앱 미리보기 및 실행

1. Xcode 미리보기 추가

   미리보기는 시뮬레이터나 외부 기기를 사용하지 않고도 앱을 보고 상호작용할 수 있는 강력한 Xcode 기능입니다.

   미리보기를 추가하려면 구조체 외부에 #Preview {} 코드 블록을 추가하세요.

   #Preview {
     CameraDemo()
   }
   

2. 앱 실행

앱을 빌드하고 실행합니다.

축하합니다.

앱에 3D 지도를 추가했습니다.

다음으로 카메라 경로 애니메이션, 3D 마커, 다각형과 같은 iOS용 지도 3D SDK의 고급 기능을 살펴볼 수 있습니다.