Tutoriel mobile : Utilisation d'un composant Carte pour travailler avec des cartes (iOS et Android)

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)

FireMonkey encapsule un composant Carte en tant que TMapView. Ce composant fournit un accès aux API de cartes en fonction de la plate-forme cible, comme suit :

• Sur les périphériques Android : Google Maps Android API (EN)
• Sur les périphériques iOS : Map Kit Framework (EN)

Ce tutoriel explique comment créer une application FireMonkey simple qui utilise le composant TMapView.

iOS	Android
iPad	Android (LG - E612)

Fonctionnalités élémentaires du composant TMapView

Le composant TMapView ajoute des cartes interactives à vos applications mobiles. Les fonctionnalités élémentaires de ce composant sont les suivantes :

• Quatre types de cartes : Normal, Satellite, Hybrid et (pour Android seulement) Terrain
• Contrôle des mouvements : contrôles des mouvements d'inclinaison intuitive, de rotation et de zoom
• Contrôle de la vue Carte : capacité de contrôler les propriétés de la carte comme les coordonnées du centre de la carte, l'orientation de la carte, etc.

Création d'une application exemple

Cette section vous aide à développer une application exemple (pour plates-formes cible Android et iOS) qui illustre l'utilisation du composant TMapView. L'application montre les techniques suivantes :

• Sélection d'un type de carte
• Rotation de la carte
• Spécification des coordonnées du centre de la carte
• Ajout de marqueurs à la carte

Configuration d'applications Android pour utiliser le composant TMapView

Avant d'utiliser Google Maps, vérifiez que vous avez une clé Google Maps Android API v2 (disponible gratuitement). Sans cette clé en place, votre app de cartes génèrera une erreur d'exécution.

Vous devez également configurer des permissions et des options de projet pour votre application.

Pour des instructions détaillées sur la configuration de votre application, voir Configuration des applications Android pour utiliser Google Maps.

Conception de l'interface utilisateur

1. Créez une application multi-périphérique vide en sélectionnant :
   • Pour Delphi : Fichier > Nouveau > Application multi-périphérique - Delphi > Application vide
   • Pour C++ : Fichier > Nouveau > Application multi-périphérique - C++Builder > Application vide
2. Sélectionnez deux composants TToolBar dans la palette d'outils et déposez-les sur le Concepteur de fiches.
3. Sélectionnez le composant TMapView dans la palette d'outils et déposez-le sur le Concepteur de fiches.
4. Dans l'inspecteur d'objets, définissez la propriété Align de TMapView sur Client.
5. Dans l'inspecteur d'objets, définissez les propriétés Align des barres d'outils sur Top et Bottom, respectivement.

Conception des barres d'outils de l'application

Placez tous les contrôles sur les barres d'outils. L'application utilise deux barres d'outils (une en haut et une en bas).

Pour concevoir la barre d'outils supérieure

• Dans la palette d'outils, sélectionnez les composants suivants et déposez-les sur la barre d'outils supérieure :
  • TTrackBar : fait pivoter la carte.
  • Deux composants TEdit : permettent de définir les coordonnées du centre de la carte (latitude et longitude).
  • TButton : met à jour la carte en utilisant les coordonnées en cours du centre de la carte.

Pour spécifier les propriétés appropriées pour les contrôles, procédez comme suit :

1. Dans le Concepteur de fiches, sélectionnez TrackBar1 et définissez la propriété Max sur 359.
2. Sélectionnez Edit1 et définissez les propriétés Name et Text sur edLat et 0.0, respectivement.
3. Sélectionnez Edit2 et définissez les propriétés Name et Text sur edLong et 0.0, respectivement.
4. Sélectionnez Button1 et définissez la propriété Text sur Go.

Pour concevoir la barre d'outils inférieure

1. Dans la palette d'outils, sélectionnez le composant TLayout et déposez-le sur la barre d'outils inférieure.
2. Dans l'inspecteur d'objets, spécifiez les propriétés suivantes de Layout1 :
   • Définissez la propriété Align sur Center.
   • Définissez la propriété Width sur 241.
3. Dans la palette d'outils, sélectionnez trois composants TSpeedButton et ajoutez-les en tant qu'éléments enfant de Layout1.
4. Dans l'inspecteur d'objets, spécifiez les propriétés suivantes pour les turboboutons :
   • Définissez la propriété Text des boutons sur Normal, Satellite et Hybrid, respectivement.
   • Définissez la propriété GroupName de chaque bouton sur Selector.
   • Définissez la propriété StyleLookup sur segmentedbuttonleft, segmentedbuttonmiddle et segmentedbuttonright, respectivement.

Après avoir suivi les étapes ci-dessus, votre Concepteur de fiches sera similaire à l'écran suivant :

Implémentation de la fonctionnalité des contrôles

Pour terminer le développement de l'application, vous devez implémenter les gestionnaires d'événement pour tous les contrôles que vous avez déposés sur les barres d'outils.

Pour implémenter les gestionnaires d'événement OnClick pour les turboboutons

1. Sur le Concepteur de fiches, double-cliquez sur un turbobouton (Normal, Satellite et Hybrid).
2. Dans l'éditeur de code, spécifiez les gestionnaires d'événement suivants pour chaque bouton :
   Delphi :
   

   //-------------------For Normal button -----------------------------------------
   procedure TForm1.SpeedButton1Click(Sender:TObject) ;
   begin
   	MapView1.MapType := TMapType.Normal;
           TrackBar1.Value := 0.0;
   end;
   // -------------------For Satellite button---------------------------------------
   
   procedure TForm1.SpeedButton2Click(Sender:TObject) ;
   begin
   	MapView1.MapType := TMapType.Satellite;
           TrackBar1.Value := 0.0;
   end;
   // --------------------For Hybrid button-----------------------------------------
   
   procedure TForm1.SpeedButton3Click(Sender:TObject) ;
   begin
   	MapView1.MapType := TMapType.Hybrid;
           TrackBar1.Value := 0.0;
   end;
   

   C++Builder :
   

   //-------------------For Normal button -----------------------------------------
   void __fastcall TForm1::SpeedButton1Click(TObject *Sender) {
   	MapView1->MapType = TMapType::Normal;
          TrackBar1->Value = 0.0;
   }
   // -------------------For Satellite button---------------------------------------
   
   void __fastcall TForm1::SpeedButton2Click(TObject *Sender) {
   	MapView1->MapType = TMapType::Satellite;
   	TrackBar1->Value = 0.0;
   }
   // --------------------For Hybrid button-----------------------------------------
   
   void __fastcall TForm1::SpeedButton3Click(TObject *Sender) {
   	MapView1->MapType = TMapType::Hybrid;
   	TrackBar1->Value = 0.0;
   }
   

Pour implémenter le gestionnaire d'événement OnChange pour l'élément barre graduée

1. Sur le Concepteur de fiches, sélectionnez TrackBarl1.
2. Dans l'inspecteur d'objets, ouvrez l'onglet Evénements, puis double-cliquez à côté de onChange.
   Spécifiez le code suivant :
   Delphi :
   

   procedure TForm1.TrackBar1Change(Sender: TObject);
   begin
     MapView1.Bearing := TrackBar1.Value;
   end;
   

   C++Builder :
   

   void __fastcall TForm1::TrackBar1Change(TObject *Sender)
   {
      MapView1->Bearing = TrackBar1->Value;
   }
   

Pour implémenter le gestionnaire d'événement OnClick pour le bouton Go

1. Dans le Concepteur de fiches, double-cliquez sur le bouton Go.
2. Dans l'éditeur de code, spécifiez le code suivant :
   Delphi :
   

   procedure TForm1.Button1Click(Sender: TObject);
   var
     mapCenter: TMapCoordinate;
   begin
     mapCenter := TMapCoordinate.Create(StrToFloat(edLat.Text),
       StrToFloat(edLong.Text));
     MapView1.Location := mapCenter;
   end;
   

   C++Builder :
   

   void __fastcall TForm1::Button1Click(TObject *Sender) {
   	TMapCoordinate mapCenter = TMapCoordinate::Create(StrToFloat(edLat->Text),
   		StrToFloat(edLong->Text));
   	MapView1->Location = mapCenter;
   }
   

Les marqueurs identifient les emplacements sur la carte. Si vous voulez ajouter des marqueurs à la carte, vous pouvez implémenter le gestionnaire d'événement OnMapClick pour la carte de la manière suivante.

Pour implémenter le gestionnaire d'événement OnMapClick pour la carte

1. Dans la vue Structure, sélectionnez MapView1.
2. Dans l'inspecteur d'objets, ouvrez l'onglet Evénements, puis double-cliquez à côté de OnMapClick.
3. Dans l'éditeur de code, implémentez le gestionnaire d'événement suivant :
   Delphi :
   

   procedure TForm1.MapView1MapClick(const Position: TMapCoordinate);
   var
     MyMarker: TMapMarkerDescriptor;
   begin
     MyMarker := TMapMarkerDescriptor.Create(Position, 'MyMarker');
     // Make a marker draggable
     MyMarker.Draggable := True;
     // Make a marker visible
     MyMarker.Visible :=True;
     MapView1.AddMarker(MyMarker);
   end;
   

   C++Builder :
   

   void __fastcall TForm1::MapView1MapClick(const TMapCoordinate &Position) {
   	TMapMarkerDescriptor myMarker = TMapMarkerDescriptor::Create(Position, "MyMarker");
   	// Make a marker draggable
           myMarker.Draggable = true;
           // Make a marker visible
   	myMarker.Visible = true;
   	MapView1->AddMarker(myMarker);
   }
   

Exécution de l'application exemple

Pour exécuter cette application, procédez comme suit :

1. Dans le Gestionnaire de projets, sélectionnez la plate-forme cible (plates-formes prises en charge : Android ou iOS).

   Important : Avant d'exécuter cette application sur les périphériques Android, vous devez avoir suivi les étapes de la rubrique Configuration des applications Android pour utiliser Google Maps.

2. Appuyez sur Maj+Ctrl+F9 pour exécuter l'application sans débogage.

Pour tester votre application, vous pouvez utiliser le scénario suivant :

1. Cliquez sur le bouton Hybrid.
2. Spécifiez le nouveau centre de la carte (par défaut, le centre de la carte est (0.0, 0.0)) :
   • Dans la zone de texte à gauche, définissez la valeur de latitude (par exemple, 50 degrés).
   • Dans la zone de texte à droite, définissez la valeur de longitude (par exemple, 20 degrés).
   • Cliquez sur le bouton Go.
3. Cliquez sur un point quelconque de la carte pour ajouter un marqueur.
4. Appuyez sur l'élément barre graduée, puis déplacez la glissière vers un emplacement particulier. [Cela change l'orientation de la carte (position). L'orientation de la carte est la direction vers laquelle une ligne verticale pointe sur la carte, mesurée en degrés dans le sens des aiguilles d'une montre à partir du nord.]

iOS	Android
iPad	Android (LG - E612)

Voir aussi

• TMapView
• Configuration d'applications Android pour utiliser Google Maps
• Tutoriel mobile : Utilisation de détecteurs d'emplacement (iOS et Android)

Exemples de code

• Exemple Tabbed Map
• Exemple Map