Mobile-Tutorial: Verwenden einer Landkarten-Komponente für die Arbeit mit Landkarten (iOS und Android)

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)


FireMonkey kapselt eine Landkarten-Komponente als TMapView. Mit dieser Komponente können Sie auf Landkarten-APIs zugreifen, die folgendermaßen von der Zielplattform abhängig sind:

In diesem Tutorial wird beschrieben, wie Sie eine einfache FireMonkey-Anwendung erstellen, in der die Komponente TMapView verwendet wird.

iOS Android

MapKit maps.png
iPad

Google maps.png

Android (LG - E612)

Grundlegende Funktionen der TMapView-Komponente

Die TMapView-Komponente fügt mobilen Anwendungen interaktive Landkarten hinzu. Grundlegende Funktionen dieser Komponente:

  • Vier Kartenarten: Normal, Satellit, Hybrid und (nur für Android) Terrain
  • Gesten-Steuerelement: Gesten-Steuerelemente für intuitive Neigung, Drehen und Zoomen
  • Steuerung der Kartenansicht: Möglichkeit, die Karteneigenschaften, wie Kartenmittelpunktkoordinaten, Kartenausrichtung usw., zu steuern

Erstellen einer Beispielanwendung

In diesem Abschnitt wird eine einfache Anwendung (für die Android- und iOS-Zielplattformen) erstellt, in der die Verwendung der TMapView-Komponente gezeigt wird. Die Anwendung demonstriert die folgenden Techniken:

  • Auswählen einer Kartenart
  • Drehen der Karte
  • Angeben der Koordinaten des Kartenmittelpunkts
  • Hinzufügen von Markern zu der Karte

Konfigurieren von Android-Anwendungen für die Verwendung der TMapView-Komponente

Bevor Sie Google Maps verwenden können, benötigen Sie einen Key für Google Maps Android API v2 (kostenlos erhältlich). Ohne diesen Key erzeugt Ihre App einen Laufzeitfehler.

Außerdem müssen Sie einige Berechtigungen und Projektoptionen für Ihre Anwendung konfigurieren.

Eine detaillierte Anleitung zum Konfigurieren Ihrer Anwendung finden Sie unter Konfigurieren von Android-Anwendungen für die Verwendung von Google Maps.

Entwerfen der Benutzeroberfläche

  1. Erstellen Sie eine neue geräteübergreifende Anwendung, indem Sie Folgendes auswählen:
    • Für Delphi: Datei > Neu > Geräteübergreifende Anwendung - Delphi > Leere Anwendung
    • Für C++: Datei > Neu > Geräteübergreifende Anwendung - C++Builder > Leere Anwendung
  2. Wählen Sie in der Tool-Palette zwei TToolBar-Komponenten aus, und ziehen Sie sie in den Formular-Designer.
  3. Wählen Sie in der Tool-Palette die Komponente TMapView aus, und ziehen Sie sie in den Formular-Designer.
  4. Setzen Sie im Objektinspektor die Eigenschaft Align von TMapView auf Client.
  5. Setzen Sie im Objektinspektor die Eigenschaften Align der beiden TToolBar-Komponenten auf Top bzw. Bottom.

Entwerfen der Symbolleisten für die Anwendung

Setzen Sie alle Steuerelemente in die Symbolleisten. Die Anwendung verwendet zwei Symbolleisten (eine oben und eine unten).

So gestalten Sie die obere Symbolleiste:

  • Wählen Sie in der Tool-Palette die folgenden Komponenten aus, und ziehen Sie sie auf die obere Symbolleiste:
    • TTrackBar: Zum Drehen der Karte.
    • Zwei TEdit-Komponenten: Zum Festlegen der Koordinaten des Kartenmittelpunkts (Breiten- und Längengrad).
    • TButton: Zum Aktualisieren der Karte anhand der aktuellen Koordinaten des Kartenmittelpunkts.

Führen Sie die folgenden Schritte aus, um die entsprechenden Eigenschaften für die Steuerelemente festzulegen:

  1. Im Formular-Designer wählen Sie TrackBar1 aus und setzen Sie die Eigenschaft Max auf 359.
  2. Wählen Sie Edit1 aus, und setzen Sie die Eigenschaften Name und Text auf edLat bzw. 0.0.
  3. Wählen Sie Edit2 aus, und setzen Sie die Eigenschaften Name und Text auf edLong bzw. 0.0.
  4. Wählen Sie Button1 aus, und setzen Sie die Eigenschaft Text auf Go.

So gestalten Sie die untere Symbolleiste:

  1. Wählen Sie in der Tool-Palette die Komponente TLayout aus, und ziehen Sie sie auf die untere Symbolleiste.
  2. Legen Sie im Objektinspektor die folgenden Eigenschaften der Layout1-Komponente fest:
    • Setzen Sie die Eigenschaft Align auf Center.
    • Setzen Sie die Eigenschaft Width auf 241.
  3. Wählen Sie in der Tool-Palette drei TSpeedButton-Komponenten aus, und fügen Sie sie als untergeordnete Elemente von Layout1 hinzu.
  4. Legen Sie im Objektinspektor die folgenden Eigenschaften dieser drei Schaltflächen fest:
    • Setzen Sie die Eigenschaft Text der Schaltflächen auf Normal, Satellite bzw. Hybrid.
    • Setzen Sie die Eigenschaft GroupName aller drei Schaltflächen auf Selector.
    • Setzen Sie die Eigenschaft StyleLookup auf segmentedbuttonleft, segmentedbuttonmiddle bzw. segmentedbuttonright.


Nach Abschluss der obigen Schritte sollte der Formular-Designer in etwa wie der folgende Screenshot aussehen:

TMapView toolbar.png

Implementieren der Funktionalität der Steuerelemente

Um die Anwendungsentwicklung abzuschließen, müssen Sie Ereignisbehandlungsroutinen für alle Steuerelemente auf den Symbolleisten implementieren.

So implementieren Sie die OnClick-Ereignisbehandlungsroutinen für die Symbolschaltflächen:

  1. Doppelklicken Sie im Formular-Designer auf eine Symbolschaltfläche (Normal, Satellite oder Hybrid).
  2. Fügen Sie im Quelltext-Editor den folgenden Code für die Ereignisbehandlungsroutinen jeder Schaltfläche hinzu:
    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;
    }
    

So implementieren Sie die OnChange-Ereignisbehandlungsroutine für das Schieberegler-Element:

  1. Wählen Sie im Formular-Designer TrackBar1 aus.
  2. Öffnen Sie im Objektinspektor die Registerkarte Ereignisse, und doppelklicken Sie neben OnChange.
    Geben Sie den folgenden Code an:
    Delphi:
    procedure TForm1.TrackBar1Change(Sender: TObject);
    begin
      MapView1.Bearing := TrackBar1.Value;
    end;
    
    C++Builder:
    void __fastcall TForm1::TrackBar1Change(TObject *Sender)
    {
       MapView1->Bearing = TrackBar1->Value;
    }
    

So implementieren Sie die OnClick-Ereignisbehandlungsroutine für die Go-Schaltfläche:

  1. Doppelklicken Sie im Formular-Designer auf die Schaltfläche Go.
  2. Geben Sie im Quelltext-Editor den folgenden Code ein:
    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;
    }
    

Marker bezeichnen Positionen auf der Karte. Wenn Sie der Karte Marker hinzufügen möchten, können Sie die OnMapClick-Ereignisbehandlungsroutine für die Karte folgendermaßen hinzufügen.

So implementieren Sie die OnMapClick-Ereignisbehandlungsroutine für die Karte:

  1. Wählen Sie in der Strukturansicht MapView1 aus.
  2. Öffnen Sie im Objektinspektor die Registerkarte Ereignisse, und doppelklicken Sie neben OnMapClick.
  3. Fügen Sie im Quelltext-Editor den folgenden Code für die Ereignisbehandlungsroutine hinzu:
    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);
    }
    

Ausführen der Beispielanwendung

Gehen Sie folgendermaßen vor, um diese Anwendung auszuführen:

  1. Wählen Sie in der Projektverwaltung die Zielplattform aus (Android und iOS werden unterstützt).

    Wichtig: Vor dem Ausführen dieser Anwendung auf Android-Geräten müssen Sie die Schritte unter Konfigurieren von Android-Anwendungen für die Verwendung von Google Maps abgeschlossen haben.

  2. Drücken Sie Umschalt+Strg+F9, um die Anwendung ohne Debugger auszuführen.

Mit dem folgenden Szenario können Sie Ihre Anwendung testen:

  1. Klicken Sie auf die Schaltfläche Hybrid.
  2. Geben Sie den neuen Kartenmittelpunkt an (standardmäßig ist der Kartenmittelpunkt (0.0, 0.0)):
    • Legen Sie im linken Textfeld den Wert für den Breitengrad (z. B. 50 Grad) fest.
    • Legen Sie im rechten Textfeld den Wert für den Längengrad (z. B. 20 Grad) fest.
    • Klicken Sie auf die Schaltfläche Go.
  3. Klicken Sie auf einen beliebigen Punkt auf der Karte, um einen Marker hinzuzufügen.
  4. Tippen Sie auf das Schieberegler-Element, und verschieben Sie den Regler an eine bestimmte Position. [Dadurch wird die Ausrichtung der Karte (Peilung) geändert. Die Kartenausrichtung ist die Richtung, in die eine vertikale Linie auf der Karte zeigt, gemessen in Grad im Uhrzeigersinn von Norden her.]
iOS Android

Maps iOS.png
iPad

Maps Android.png

Android (LG - E612)

Siehe auch

Codebeispiele