Добавьте 3D-карту в свое приложение,Добавьте 3D-карту в свое приложение

Выберите платформу: Android iOS JavaScript

Данный продукт или функция являются экспериментальными (предварительно выпущенными). Поддержка предварительно выпущенных продуктов и функций может быть ограничена, а изменения в них могут быть несовместимы с другими предварительно выпущенными версиями. На предварительно выпущенные продукты и функции распространяются Условия использования сервиса Google Maps Platform . Для получения дополнительной информации см. описания этапов запуска .

На этой странице представлен пример добавления простой 3D-карты в iOS-приложение с помощью SDK Maps 3D для iOS. Инструкции на этой странице предполагают, что вы уже выполнили шаги на странице «Настройка» и имеете следующее:

• Проект Google Cloud с использованием Maps 3D SDK для iOS.
• Ключ API Maps 3D SDK для iOS
• Требуется Xcode версии 16.0 или более поздней с установленным пакетом Maps 3D SDK для iOS.

Для получения более подробной информации об этих предварительных условиях см. раздел «Настройка» .

Пройдите более сложный практический урок .

Больше примеров кода смотрите на GitHub .

Часть 1: Создание базового приложения SwiftUI

1. Создайте новое приложение в Xcode.
2. Укажите название продукта как Hello3DWorld , а идентификатор организации — как com.example . Имя пакета должно быть com.example.Hello3DWorld .
3. Выберите интерфейс SwiftUI.
4. Добавьте библиотеку Maps 3D в ваше приложение. Инструкции см. в разделе настройки .

Часть 2: Добавление карты

1. Откройте файл ContentView.swift . Это точка входа и основная навигация для вашего приложения.

2. Импортируйте SwiftUI и пакет GoogleMaps3D .

3. Замените весь код внутри объявления body на 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.apiKey в обработчике события init() View , содержащего карту.

   Внимание: Не добавляйте 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. Измените вызов функции Map() , добавив свойство initialCamera . Инициализируйте 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 : высота камеры над уровнем моря.

Если вы не укажете ни один из этих дополнительных параметров, будет использовано значение по умолчанию.

Примечание: Высота камеры указана в абсолютном значении. В районах, где уровень земли значительно выше уровня моря, установка высоты ниже уровня земли может привести к странным визуальным эффектам.

Примечание: Вы также можете регулировать относительную высоту камеры с помощью наклона и диапазона.

Чтобы изображение с камеры отображало больше трехмерных данных, установите начальные параметры так, чтобы отображался более крупный план под углом.

Часть 6: Предварительный просмотр и запуск вашего приложения

1. Добавить предварительный просмотр в Xcode

   Предварительный просмотр — это мощная функция Xcode, позволяющая просматривать приложение и взаимодействовать с ним без использования симулятора или внешнего устройства.

   Чтобы добавить предварительный просмотр, добавьте блок кода #Preview {} вне вашей структуры.

   #Preview {
     CameraDemo()
   }
   

2. Запустите приложение

Соберите и запустите приложение.

Поздравляем!

Вы успешно добавили 3D-карту в приложение!

Далее вы можете изучить более продвинутые функции SDK Maps 3D для iOS, такие как анимация траектории движения камеры , 3D-маркеры или полигоны .