Dodawanie mapy 3D do aplikacji

Wybierz platformę: Android iOS JavaScript

Podstawowe mapy Seattle, San Francisco i Paryża

Na tej stronie znajdziesz przykład dodawania podstawowej mapy 3D do aplikacji na iOS za pomocą pakietu Maps 3D SDK na iOS. Instrukcje na tej stronie zakładają, że masz już za sobą kroki opisane na stronie Konfiguracja i masz:

  • projekt Google Cloud z włączonym pakietem Maps 3D SDK na iOS,
  • klucz interfejsu API dla pakietu Maps 3D SDK na iOS,
  • Xcode w wersji 16.0 lub nowszej z dodanym pakietem Maps 3D SDK na iOS.

Więcej informacji o tych wymaganiach wstępnych znajdziesz w sekcji Konfiguracja.

Wykonaj bardziej zaawansowane ćwiczenie programistyczne.

Więcej przykładów kodu znajdziesz na GitHubie.

Część 1. Tworzenie podstawowej aplikacji SwiftUI

  1. Utwórz nową aplikację w Xcode.
  2. Ustaw nazwę produktu na Hello3DWorld, a identyfikator organizacji na com.example. Nazwa pakietu powinna mieć postać com.example.Hello3DWorld.
  3. Wybierz interfejs SwiftUI.
  4. Dodaj bibliotekę Maps 3D do swojej aplikacji. Instrukcje znajdziesz w sekcji Konfiguracja.

Część 2. Dodawanie mapy

Minimalistyczna mapa 3D kuli ziemskiej

  1. Otwórz plik o nazwie ContentView.swift. Jest to punkt wejścia i główna nawigacja aplikacji.

  2. Zaimportuj SwiftUI i pakiet GoogleMaps3D.

  3. Zastąp cały kod w deklaracji treści kodem Map(mode: .hybrid).

    Minimalna konfiguracja początkowa, którą musisz podać, aby zainicjować Map to MapMode:

    • .hybrid,
    • .roadmap lub
    • .satellite

    Twój plik ContentView.swift powinien wyglądać tak:

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

Część 3. Ustawianie klucza interfejsu API

  1. Klucz interfejsu API musi być ustawiony przed zainicjowaniem mapy. Aby to zrobić, ustaw Map.apiKey w procedurze obsługi zdarzeń init() w View, która zawiera mapę.

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

Część 4. Używanie kamery do sterowania widokiem mapy

Widoki map 3D są sterowane przez klasę Camera. W tym kroku dowiesz się, jak określić lokalizację, wysokość, kierunek, nachylenie, obrót i zakres, aby dostosować widok mapy.

  1. Zmień wywołanie funkcji Map() tak, aby zawierało właściwość initialCamera. Zainicjuj initialCamera, aby wyświetlić widok centrum Manhattanu.

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

Powyższy kod ustawia wartości tych parametrów:

  • center: LatLngAltitude reprezentująca lokalizację kamery.
  • heading: kierunek w stopniach od północy, w którym jest skierowana kamera.
  • tilt: kąt nachylenia w stopniach, gdzie 0 oznacza widok bezpośrednio z góry, a 90 – widok poziomy.
  • roll: kąt obrotu wokół płaszczyzny pionowej kamery w stopniach.
  • range: odległość w metrach kamery od lokalizacji o określonej szerokości i długości geograficznej.
  • fieldOfView: kąt reprezentujący pole widzenia kamery.
  • altitudeMode: sposób obliczania wysokości kamery.

Jeśli nie podasz żadnego z tych dodatkowych parametrów, zostanie użyta wartość domyślna.

Aby obraz z kamery pokazywał więcej danych 3D, ustaw parametry początkowe tak, aby wyświetlać bliższy, pochylony widok.

Część 6. Wyświetlanie podglądu i uruchamianie aplikacji

Podstawowa mapa 3D Nowego Jorku

  1. Dodaj podgląd Xcode

    Podglądy to zaawansowana funkcja Xcode, która umożliwia wyświetlanie aplikacji i interakcję z nią bez konieczności używania symulatora ani urządzenia zewnętrznego.

    Aby dodać podgląd, dodaj blok kodu #Preview {} poza strukturą.

    #Preview {
      CameraDemo()
    }
    
  2. Uruchom aplikację

Skompiluj i uruchom aplikację.

Gratulacje!

Udało Ci się dodać mapę 3D do aplikacji.

Następnie możesz poznać bardziej zaawansowane funkcje pakietu Maps 3D SDK na iOS, takie jak animacje ścieżki kamery, znaczniki 3D czy wielokąty.