Mobile-Tutorial: Verwenden einer Landkarten-Komponente für die Arbeit mit Landkarten (iOS und Android)
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:
- Auf Android-Geräten: Google Maps Android API (EN)
- Auf iOS-Geräten: Map Kit Framework (EN)
In diesem Tutorial wird beschrieben, wie Sie eine einfache FireMonkey-Anwendung erstellen, in der die Komponente TMapView verwendet wird.
iOS | Android |
---|---|
Inhaltsverzeichnis
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
- 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
- Wählen Sie in der Tool-Palette zwei TToolBar-Komponenten aus, und ziehen Sie sie in den Formular-Designer.
- Wählen Sie in der Tool-Palette die Komponente TMapView aus, und ziehen Sie sie in den Formular-Designer.
- Setzen Sie im Objektinspektor die Eigenschaft Align von TMapView auf
Client
. - 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:
Führen Sie die folgenden Schritte aus, um die entsprechenden Eigenschaften für die Steuerelemente festzulegen:
- Im Formular-Designer wählen Sie TrackBar1 aus und setzen Sie die Eigenschaft Max auf
359
. - Wählen Sie Edit1 aus, und setzen Sie die Eigenschaften Name und Text auf
edLat
bzw.0.0
. - Wählen Sie Edit2 aus, und setzen Sie die Eigenschaften Name und Text auf
edLong
bzw.0.0
. - Wählen Sie Button1 aus, und setzen Sie die Eigenschaft Text auf
Go
.
So gestalten Sie die untere Symbolleiste:
- Wählen Sie in der Tool-Palette die Komponente TLayout aus, und ziehen Sie sie auf die untere Symbolleiste.
- 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.
- Setzen Sie die Eigenschaft Align auf
- Wählen Sie in der Tool-Palette drei TSpeedButton-Komponenten aus, und fügen Sie sie als untergeordnete Elemente von Layout1 hinzu.
- 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
.
- Setzen Sie die Eigenschaft Text der Schaltflächen auf
Nach Abschluss der obigen Schritte sollte der Formular-Designer in etwa wie der folgende Screenshot aussehen:
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:
- Doppelklicken Sie im Formular-Designer auf eine Symbolschaltfläche (Normal, Satellite oder Hybrid).
- 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:
- Wählen Sie im Formular-Designer TrackBar1 aus.
- Ö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:
- Doppelklicken Sie im Formular-Designer auf die Schaltfläche Go.
- 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:
- Wählen Sie in der Strukturansicht MapView1 aus.
- Öffnen Sie im Objektinspektor die Registerkarte Ereignisse, und doppelklicken Sie neben OnMapClick.
-
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:
- 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.
- Drücken Sie
Umschalt+Strg+F9
, um die Anwendung ohne Debugger auszuführen.
Mit dem folgenden Szenario können Sie Ihre Anwendung testen:
- Klicken Sie auf die Schaltfläche Hybrid.
- 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.
- Klicken Sie auf einen beliebigen Punkt auf der Karte, um einen Marker hinzuzufügen.
- 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 |
---|---|
Siehe auch
- TMapView
- Konfigurieren von Android-Anwendungen für die Verwendung von Google Maps
- Mobile-Tutorial: Verwenden von Positionssensoren (iOS und Android)