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

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

Basic maps of Seattle, San Francisco, and
Paris

На этой странице представлен пример того, как добавить базовую 3D-карту в приложение iOS с помощью Maps 3D SDK для 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: Добавить карту

Minimal 3D map of a
globe

  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. Сделайте это, установив Map.apiKey в обработчике событий init() View , содержащего Map.

    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: Предварительный просмотр и запуск вашего приложения

Basic 3D map of New York City

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

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

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

    #Preview {
      CameraDemo()
    }
    
  2. Запустите приложение

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

Поздравляю!

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

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