Ajouter une carte 3D à votre application

Sélectionnez la plate-forme : Android iOS JavaScript

Cartes de base de Seattle, San Francisco et Paris

Cette page explique comment ajouter une carte 3D de base à une application iOS à l'aide du SDK Maps 3D pour iOS. Les instructions figurant sur 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 prérequis, consultez Configuration.

Suivez un atelier de programmation plus avancé codelab.

Consultez 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 de l'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. Pour obtenir des instructions, consultez la section Configuration.

Partie 2 : Ajouter une carte

Carte 3D minimaliste d'un globe

  1. Ouvrez le fichier 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 l'intégralité du code dans la déclaration du corps par Map(mode: .hybrid).

    La configuration initiale minimale que vous devez fournir pour initialiser un Map est le 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éfinir 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 la View contenant 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 3D sont contrôlées par la classe Camera. Dans cette étape, vous apprendrez à 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-ville 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 des valeurs pour ces paramètres :

  • center : LatLngAltitude représentant l'emplacement de la caméra
  • heading : cap en degrés du nord vers lequel la caméra est orientée.
  • tilt: angle d'inclinaison en degrés, où 0 correspond à la verticale et 90 à l'horizontale.
  • roll: angle de roulis autour du plan vertical de la caméra, en degrés.
  • range: distance en mètres entre la caméra et l'emplacement de latitude et de 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 davantage de données 3D, définissez les paramètres initiaux de manière à afficher une vue inclinée plus rapproché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 d'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 un retour visuel intégré tout en gérant l'état de la Map :

  • Superposition de chargement : un indicateur de progression centré s'affiche lorsque la vue de la carte est initialisée ou chargée pour la première fois.
  • Superposition d'erreur : une superposition d'erreur s'affiche si la carte ne parvient pas à se charger.

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 de pression sur la carte

Pour écouter les événements de pression sur la carte, appliquez le onTap(_:) modificateur à Map. Lorsqu'un utilisateur appuie sur la carte, la fermeture reçoit une MapTapInfo valeur qui fournit l' location (LatLngAltitude) et le content sur lequel l'utilisateur a appuyé (MapTapInfo.Content.map ou MapTapInfo.Content.place(id:)). 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 chemin de caméra, les repères 3D ou les polygones.