Dodawanie mapy 3D do aplikacji

Wybierz platformę: Android iOS JavaScript

Na tej stronie znajdziesz przykład dodawania podstawowej mapy 3D do aplikacji na iOS za pomocą pakietu SDK Map 3D na iOS. Instrukcje na tej stronie zakładają, że masz już wykonane czynności opisane na stronie Konfiguracja oraz że masz:

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

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

Wykonaj bardziej zaawansowane ćwiczenie w programowaniu.

Więcej przykładowych kodów 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 brzmieć com.example.Hello3DWorld.
3. Wybierz interfejs SwiftUI.
4. Dodaj do aplikacji bibliotekę Maps 3D. Instrukcje znajdziesz w sekcji konfiguracji.

Część 2. Dodawanie mapy

1. Otwórz plik o nazwie ContentView.swift. Jest to punkt wejścia i główny element nawigacyjny 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

   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. Ustaw klucz interfejsu API.

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

   Ostrzeżenie: nie umieszczaj klucza interfejsu API w zewnętrznym ani publicznym systemie kontroli kodu źródłowego.

   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 mapy 3D są kontrolowane przez klasę Camera. Z tego kroku dowiesz się, jak określić lokalizację, wysokość, kierunek, nachylenie, obrót i zakres, aby dostosować widok mapy.

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

   Uwaga: kolejność parametrów ma znaczenie. Kamera jest inicjowana przez podanie najpierw szerokości, a potem długości geograficznej. Upewnij się, że podajesz prawidłowe wartości, zwłaszcza gdy wklejasz je z innego źródła, ponieważ w przeciwnym razie kamera może pokazywać nieoczekiwaną lokalizację.

   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)
       ), mode: .hybrid)
     }
   }
   

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

• center: LatLngAltitude reprezentujący lokalizację kamery.
• heading: kierunek w stopniach od północy, w którym ma być 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 wyrażony w stopniach.
• range: odległość w metrach kamery od lokalizacji określonej przez szerokość i długość geograficzną.
• fieldOfView: kąt reprezentujący pole widzenia kamery.

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

Uwaga: względną wysokość kamery możesz też dostosować za pomocą opcji nachylenia i zakresu.

Aby widok z kamery zawierał więcej danych 3D, ustaw parametry początkowe tak, aby widok był bliższy i pochylony.

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

1. Dodawanie podglądu Xcode

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

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

   #Preview {
     ContentView()
   }
   

2. Uruchamianie aplikacji

Skompiluj i uruchom aplikację.

Stany wczytywania mapy i stanu błędu

Pakiet SDK Map 3D na iOS automatycznie wyświetla wbudowane informacje wizualne podczas zarządzania stanem Map:

• Nakładka ładowania: gdy widok mapy jest inicjowany lub wczytywany, na środku wyświetla się wskaźnik postępu.
• Nakładka błędu: jeśli nie uda się wczytać mapy, wyświetli się nakładka błędu.

Jeśli zastosujesz styl mapy oparty na chmurze za pomocą metody style(mapID:error:) w Map, możesz przekazać zamknięcie error, aby obsłużyć błędy wczytywania stylu.

Nasłuchiwanie zdarzeń kliknięcia mapy

Aby nasłuchiwać zdarzeń kliknięcia na mapie, zastosuj modyfikator onTap(_:) do Map. Gdy użytkownik kliknie mapę, zamknięcie otrzymuje wartość MapTapInfo, która podaje location (LatLngAltitude) i kliknięty content (MapTapInfo.Content.map lub MapTapInfo.Content.place(id:)). Więcej informacji o interakcjach z ciekawymi miejscami znajdziesz w artykule Interakcje z ciekawymi miejscami.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

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.