Ajouter une carte 3D à votre application

Sélectionnez une plate-forme : Android iOS JavaScript

Ce produit ou cette fonctionnalité est en phase expérimentale (pré-DG). La prise en charge des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

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 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é
• Clé API SDK Maps 3D pour iOS
• Xcode version 16.0 ou ultérieure avec le package SDK Maps 3D pour iOS ajouté.

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

Suivez un atelier de programmation plus avancé.

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 Product Name 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. Consultez les instructions dans la section de configuration.

Partie 2 : Ajouter une carte

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 à l'intérieur de 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 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() du View contenant la carte.

   Avertissement : N'enregistrez pas la clé API dans un contrôle de source externe ou public.

   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 allez apprendre à spécifier l'emplacement, l'altitude, le cap, l'inclinaison, le roulis et la distance 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.

   Remarque : L'ordre des paramètres est important. La caméra est initialisée en fournissant d'abord la latitude, puis la longitude. Veillez à spécifier les valeurs correctes pour chacun d'eux, en particulier lorsque vous les collez à partir d'une autre source. Sinon, la caméra risque d'afficher un emplacement inattendu.

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

Le code ci-dessus définit les valeurs de ces paramètres :

• heading : cap en degrés depuis le nord vers lequel pointer la caméra.
• tilt : angle d'inclinaison en degrés, où 0 correspond à une vue verticale 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
• altitude : hauteur de la caméra au-dessus du niveau de la mer.

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

Remarque : L'altitude de la caméra est une valeur absolue. Dans les zones où le niveau du sol est bien au-dessus du niveau de la mer, définir une altitude inférieure à celle du sol peut entraîner des effets visuels étranges.

Remarque : Vous pouvez également ajuster l'altitude relative de la caméra à l'aide de l'inclinaison et de la porté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 plus rapprochée et inclinée.

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

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 struct.

   #Preview {
     CameraDemo()
   }
   

2. Exécuter l'application

Créez et exécutez l'application.

Félicitations !

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

Vous pouvez ensuite explorer les fonctionnalités avancées du SDK Maps 3D pour iOS, comme les animations de chemin de caméra, les repères 3D ou les polygones.