Ajouter une carte 3D à votre application

Sélectionnez une plate-forme : Android iOS JavaScript

Cartes de base de Seattle, San Francisco et Paris

Cette page présente un exemple d'ajout d'une carte 3D de base à une application iOS à l'aide du SDK Maps 3D pour iOS. Les instructions de cette page supposent que vous avez déjà suivi les étapes de la page Configuration et que vous disposez des éléments suivants :

  • Un projet Google Cloud avec le SDK Maps 3D pour iOS activé
  • Une clé API pour le SDK Maps 3D pour iOS
  • Xcode version 16.0 ou ultérieure avec le package du SDK Maps 3D pour iOS ajouté.

Pour en savoir plus sur ces conditions préalables, consultez Configuration.

Suivez un atelier de programmation plus avancé.

Voir d'autres exemples de code sur GitHub

Partie 1 : Créer une application SwiftUI de base

  1. Créez une application dans Xcode.
  2. Définissez le nom du produit sur Hello3DWorld, avec l'identifiant d'organisation défini sur com.example. Le nom du package doit être com.example.Hello3DWorld.
  3. Choisissez l'interface SwiftUI.
  4. Ajoutez la bibliothèque Maps 3D à votre application. Consultez les instructions de la section "Configuration".

Partie 2 : Ajouter une carte

Carte 3D minimaliste d'un globe

  1. Ouvrez le fichier nommé ContentView.swift. Il s'agit du point d'entrée et de la navigation principale de votre application.

  2. Importez SwiftUI et le package GoogleMaps3D.

  3. Remplacez tout le code de la déclaration du corps par Map(mode: .hybrid).

    La configuration initiale minimale que vous devez fournir pour initialiser un Map est MapMode :

    • .hybrid,
    • .roadmap ou
    • .satellite

    Votre fichier ContentView.swift devrait se présenter comme suit :

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}

Partie 3 : Définissez votre clé API.

  1. La clé API doit être définie avant l'initialisation de la carte. Pour ce faire, définissez Map.apiKey dans le gestionnaire d'événements init() de l'View qui contient la carte.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}

Partie 4 : Utiliser une caméra pour contrôler la vue de la carte

Les vues de carte en 3D sont contrôlées par la classe Camera. Dans cette étape, vous allez apprendre à spécifier l'emplacement, l'altitude, le cap, l'inclinaison, le roulis et la plage pour personnaliser la vue de la carte.

  1. Modifiez l'appel de fonction Map() pour inclure une propriété initialCamera. Initialisez initialCamera pour afficher une vue du centre de Manhattan.

    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)
  }
}

Le code ci-dessus définit les valeurs des paramètres suivants :

  • center : LatLngAltitude représentant l'emplacement de la caméra
  • heading : orientation en degrés par rapport au nord vers laquelle pointer la caméra.
  • tilt : angle d'inclinaison en degrés, où 0 correspond à une vue directement au-dessus et 90 à une vue horizontale.
  • roll : angle de roulis autour du plan vertical de la caméra, en degrés.
  • range : distance en mètres de la caméra par rapport à la latitude et à la longitude
  • fieldOfView : angle représentant le champ de vision de la caméra

Si vous ne fournissez aucun de ces paramètres supplémentaires, une valeur par défaut sera utilisée.

Pour que la vue de la caméra affiche plus de données 3D, définissez les paramètres initiaux de sorte qu'elle affiche une vue plus rapprochée et inclinée.

Partie 5 : Prévisualiser et exécuter votre application

Carte 3D élémentaire de New York

  1. Ajouter un aperçu Xcode

    Les aperçus sont une fonctionnalité puissante de XCode qui vous permet de voir votre application et d'interagir avec elle sans avoir à utiliser le simulateur ni un appareil externe.

    Pour ajouter un aperçu, ajoutez un bloc de code #Preview {} en dehors de votre structure.

    #Preview {
  ContentView()
}

  2. Exécuter l'application

Créez et exécutez l'application.

États de chargement et d'erreur de la carte

Le SDK Maps 3D pour iOS affiche automatiquement des commentaires visuels intégrés tout en gérant l'état de Map :

  • Superposition de chargement : un indicateur de progression centré s'affiche lors de l'initialisation ou du chargement de la vue de la carte.
  • Superposition d'erreur : une superposition d'erreur s'affiche si le chargement de la carte échoue.

Si vous appliquez un style de carte basé dans le cloud à l'aide de style(mapID:error:) sur Map, vous pouvez transmettre une fermeture error pour gérer les erreurs de chargement de style.

Écouter les événements d'appui sur la carte

Pour écouter les événements de pression sur la carte, appliquez le modificateur onTap(_:) à Map. Lorsqu'un utilisateur appuie sur la carte, la fermeture reçoit une valeur MapTapInfo qui fournit les coordonnées location (LatLngAltitude) et le content (MapTapInfo.Content.map ou MapTapInfo.Content.place(id:)) sur lequel l'utilisateur a appuyé. Pour en savoir plus sur les interactions avec les points d'intérêt, consultez Interagir avec les points d'intérêt.

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

Félicitations !

Vous avez ajouté une carte 3D à une application.

Vous pouvez ensuite explorer des fonctionnalités plus avancées du SDK Maps 3D pour iOS, telles que les animations de trajectoire de la caméra, les repères 3D ou les polygones.