Erste Schritte mit Google Maps für Android Grundlagen

Einführung

Karten sind zweifellos eines der nützlichsten Werkzeuge für Benutzer, wenn sie in einer App enthalten sind. Dieses Tutorial ist das erste einer Reihe, die über Google Maps v2 für Android hinausgeht. Das Einrichten der Google Maps-API über die Google Developer Console, einschließlich eines Kartenfragments in Ihren Anwendungen, das Anzeigen des Standorts des Benutzers, das Hinzufügen von Markierungen, das Zeichnen auf der Karte und einige allgemeine Methoden, mit denen der App ein Dienstprogramm hinzugefügt wird, werden behandelt. Den gesamten Code für dieses Tutorial finden Sie auf GitHub.

1. Einrichten der Entwicklerkonsole

Um das Google Maps-API verwenden zu können, müssen Sie Ihre Anwendung im registrieren Google Developer Console und aktivieren Sie die API. Rufen Sie dazu zunächst die Google Developer Console auf. Wenn Sie bereits ein Projekt erstellt haben, können Sie den nächsten Abschnitt überspringen. Wenn nicht, können Sie ein neues Projekt für Ihre Kartenanwendung verfolgen und erstellen.

Schritt 1: Ein Projekt erstellen

Um ein neues Projekt zu erstellen, klicken Sie auf das blaue Projekt erstellen Schaltfläche in der oberen linken Ecke des Bildschirms. Wenn Sie keine sehen Projekt erstellen und suchen Sie nach einer Schaltfläche mit der Bezeichnung Erstellen Sie ein leeres Projekt.

Daraufhin wird ein Dialogfeld angezeigt, in dem Sie nach einem Projektnamen gefragt werden. Für dieses Tutorial habe ich ein Projekt mit dem Namen erstellt TutsPlusMaps. Es gibt einige Einschränkungen hinsichtlich der Namensgebung Ihres Projekts, da nur Buchstaben, Zahlen, Anführungszeichen, Bindestriche, Leerzeichen und Ausrufezeichen Zeichen sind.

Sobald du getroffen hast Erstellen, In der rechten unteren Ecke der Seite wird ein Dialogfeld mit einem Ladekennzeichen angezeigt, während das Projekt erstellt wird.

Schritt 2: Aktivieren der Google Maps API

Wenn das Projekt erstellt wurde oder Sie ein vorhandenes Projekt ausgewählt haben, gelangen Sie zum Projekt Überblick Bildschirm. Von hier aus wollen Sie das erweitern APIs & auth Element in der linken Navigationsleiste und klicken Sie auf APIs.

Während auf diesem Bildschirm ein Suchfeld angezeigt wird, haben Sie festgestellt, dass Google die Google Maps API-Elemente oben in der mittleren Spalte für Entwickler platziert hat. Klicken Sie für dieses Tutorial auf den Eintrag mit dem Titel Google Maps Android API unter dem Google Maps-APIs Überschrift.

Sie gelangen auf einen Bildschirm, in dem Sie auf das Blau klicken können API aktivieren , um die Google Maps API für Ihr Projekt zu aktivieren.

Schritt 3: Erstellen eines Android-API-Schlüssels

Nachdem Sie die Google Maps API aktiviert haben, klicken Sie auf die Schaltfläche Referenzen Artikel unter APIs & auth In der Seitennavigation erhalten Sie einen Schlüssel für den Zugriff auf die Google Maps API in Ihrer Anwendung. Wenn Sie mit der präsentiert werden Referenzen drücken Sie die blaue Taste Anmeldeinformationen hinzufügen Taste und wählen Sie API-Schlüssel.

Da dies eine Android-Anwendung ist, müssen Sie auswählen Android-Schlüssel im nächsten Dialog. Wenn Sie dieselbe Anwendung mithilfe von Karten auf verschiedenen Plattformen erstellen, können Sie für jede Plattform einen Schlüssel erstellen.

Klicken Sie im nächsten Bildschirm auf Fügen Sie den Paketnamen und den Fingerabdruck hinzu. Dies bietet zwei Felder, eines zum Hinzufügen von a Paketnamen und noch einen für das Hinzufügen von SHA1 aus Ihrem Anwendungssignaturschlüssel.

Für dieses Tutorial werde ich den Paketnamen verwenden com.tutsplus.mapsdemo. Um die SHA1-Signatur zu erhalten, müssen Sie ein Terminal oder eine Eingabeaufforderung öffnen und zum Speicherort des Signaturschlüssels Ihrer Anwendung navigieren. Dies kann entweder Ihr Freigabeschlüssel oder sein debug.keystore. Sie können den SHA1 mit dem folgenden Befehl generieren:

keytool -list -v -keystore debug.keystore

Nachdem Sie Ihren SHA1-Schlüssel erstellt und in das Textfeld eingegeben haben, klicken Sie auf den blauen Erstellen Taste. Sie erhalten dann ein Dialogfeld mit dem API-Schlüssel, den Sie Ihrer Android-App hinzufügen müssen, um auf die Maps-API zuzugreifen.

2. Einrichten des Android-Projekts

An diesem Punkt können Sie das ursprüngliche Android-Projekt mit demselben Paketnamen erstellen, den Sie zum Erstellen des API-Schlüssels verwendet haben. Sobald Ihr Projekt erstellt ist, öffnen Sie die build.gradle Datei. Sie müssen die Play Services-Bibliothek für Karten importieren. In diesem Beispiel müssen Sie auch die Play Services-Bibliothek für Standorte importieren, um eine Ausgangsposition für Ihre Karte festzulegen. Legen Sie die folgenden Zeilen in die Abhängigkeiten Knoten des build.gradle Datei.

comp.google.android.gms: play-services-maps: 7.8.0 'compile' com.google.android.gms: play-services-location: 7.8.0 '

Sobald Sie Ihre Bibliotheken importiert haben, können Sie sie schließen build.gradle und öffne deine AndroidManifest.xml Datei. Über Anwendung müssen Sie angeben, dass die Anwendung OpenGL ES 2.0 verwendet, und definieren Sie die Berechtigungen, die für Ihre Anwendung erforderlich sind.

Notiere dass der ACCESS_FINE_LOCATION Für diese Demo ist nur eine Berechtigung erforderlich, um den Standort des Benutzers zu bestimmen, wo die Karte ursprünglich angezeigt werden soll. Wenn Sie einen bekannten Standort in Ihrer eigenen App haben, müssen Sie den Standort des Benutzers nicht verwenden.

  

Innerhalb des Anwendung Knoten, müssen Sie zwei Metadaten hinzufügen. Der erste informiert die Anwendung darüber, dass Play Services verwendet wird, und der zweite bindet den Maps API-Schlüssel an Ihre Anwendung. Im folgenden Codeausschnitt, @ string / google_api_key ist eine Zeichenfolge auf den Schlüssel von der Google Developer Console.

 

Sobald Sie mit dem Update fertig sind AndroidManifest.xml, Fahren Sie fort und schließen Sie die Datei. Als Nächstes müssen Sie eine neue Java-Klasse erstellen, die als aufgerufen wird MapFragment, das erstreckt sich SupportMapFragment. SupportMapFragment wird hier eher als verwendet com.google.android.gms.maps.MapFragment um Rückwärtskompatibilität vor API 12 hinzuzufügen.

Wenn Ihre App keine Geräte unterstützen muss, auf denen ältere Android-Versionen ausgeführt werden, ist die Verwendung in Ordnung com.google.android.gms.maps.MapFragment. Nachdem Sie das Basisfragment erstellt haben, müssen Sie die sechs Schnittstellen implementieren, die wir für diese Demo verwenden werden.

Öffentliche Klasse MapFragment erweitert SupportMapFragment implementiert GoogleApiClient.ConnectionCallbacks, GoogleApiClient.OnConnectionFailedListener, GoogleMap.OnInfoWindowClickListener, GoogleMap.OnMapLongClickListener, GoogleMap.OnMapClickListenerAraMapClickListenerArmap.AnMapClickListener.
  • ConnectionCallbacks und OnConnectionFailedListener sind entworfen, um den Zustand der zu überwachen GoogleApiClient, die in dieser Anwendung verwendet wird, um den aktuellen Standort des Benutzers abzurufen.
  • OnInfoWindowClickListener wird ausgelöst, wenn der Benutzer auf das Infofenster klickt, das über einer Markierung auf der Karte angezeigt wird.
  • OnMapLongClickListener und OnMapClickListener werden ausgelöst, wenn der Benutzer einen Teil der Karte antippt oder gedrückt hält.
  • OnMarkerClickListener Wird aufgerufen, wenn der Benutzer auf eine Markierung auf der Karte klickt, die normalerweise auch das Infofenster für diese Markierung anzeigt.

Wenn Sie dazu aufgefordert werden, klicken Sie auf die rote Glühbirne, die neben dem Klassennamen angezeigt wird, um die für diese Schnittstellen erforderlichen Methoden hinzuzufügen.

Sobald Sie das ursprüngliche Fragment erstellt haben, müssen Sie es lassen Hauptaktivität weiß, dass es dieses Fragment verwenden sollte. Öffnen activity_main.xml aus Ihrem Ressourcenordner und ändern Sie ihn so, dass er das Fragment als Ansicht enthält.

  

Nach dem Aktualisieren Ihres Aktivitätslayouts sollten Sie in der Lage sein, Ihre Anwendung auszuführen und eine Karte der Erde anzuzeigen, die vollständig herausgezoomt ist und sich auf Breitengrad 0, Längengrad 0 konzentriert.

3. Initialisierung der Karte

Schritt 1: Kartentypen deklarieren

Rückkehr zu unserem MapFragment Klasse müssen Sie einige globale Werte oben in der Klasse definieren, um sie in Ihrer Anwendung verwenden zu können.

privater GoogleApiClient mGoogleApiClient; private Location mCurrentLocation; private final int [] MAP_TYPES = GoogleMap.MAP_TYPE_SATELLITE, GoogleMap.MAP_TYPE_NORMAL, GoogleMap.MAP_TYPE_HYBRID, GoogleMap.MAP_TYPE_TERRAIN, GoogleMap.MAP_TYPE_NONE; private int curMapTypeIndex = 0;

Hier mGoogleApiClient und mCurrentLocation werden verwendet, um den Standort des Benutzers für die Initialisierung der Kartenkamera zu ermitteln. MAP_TYPES und curMapTypeIndex werden im Beispielcode zum Wechseln zwischen verschiedenen Kartenanzeigetypen verwendet. Jeder Kartentyp hat einen anderen Zweck, daher können eine oder mehrere für Ihre eigenen Anwendungen geeignet sein.

GoogleMap.MAP_TYPE_SATELLITE Zeigt eine Satellitenansicht des Bereichs ohne Straßennamen oder Beschriftungen an.

GoogleMap.MAP_TYPE_NORMAL zeigt eine generische Karte mit Straßennamen und Beschriftungen.

GoogleMap.MAP_TYPE_HYBRID kombiniert den Satelliten- und Normalmodus und zeigt Satellitenbilder eines Bereichs mit allen Bezeichnungen an.

GoogleMap.MAP_TYPE_TERRAIN ähnelt einer normalen Karte, es werden jedoch Texturen hinzugefügt, um Änderungen der Höhe in der Umgebung anzuzeigen. Diese Texturen sind am sichtbarsten, wenn die Karte mit zwei Fingern gezogen wird.

GoogleMap.MAP_TYPE_NONE ähnelt einer normalen Karte, zeigt jedoch keine Beschriftungen oder Färbungen für den Umgebungstyp in einem Gebiet an. Es erlaubt die Anzeige von Verkehr und anderen Überlagerungen auf der Karte.

Schritt 2: API-Client erstellen

Als Nächstes müssen Sie Ihre erstellen GoogleApiClient und initiieren Standortdienste um den aktuellen Standort Ihres Benutzers abzurufen. Wie bereits erwähnt, können Sie, wenn Sie einen festgelegten Ort haben, den Sie anzeigen möchten, anstatt sich auf den Benutzer zu konzentrieren, mit springen Standortdienste.

@Override public void onViewCreated (Ansicht anzeigen, Bundle savedInstanceState) super.onViewCreated (view, savedInstanceState); setHasOptionsMenu (true); mGoogleApiClient = new GoogleApiClient.Builder (getActivity ()) .addConnectionCallbacks (this) .addOnConnectionFailedListener (this) .addApi (LocationServices.API) .build (); initListeners (); 

Das initListeners Diese Methode bindet die Schnittstellen, die Sie oben in der Klasse deklariert haben, an die Google Karte Objekt zugeordnet mit SupportMapFragment. So sieht die Implementierung aus:

private void initListeners () getMap (). setOnMarkerClickListener (this); getMap (). setOnMapLongClickListener (this); getMap (). setOnInfoWindowClickListener (this); getMap (). setOnMapClickListener (this); 

Sie haben vielleicht bemerkt, dass die GoogleApiClient und Zuhörer werden erstellt und gebunden onViewCreated eher als das typische onCreate. Das liegt daran, dass die Google Karte Objekt wurde nicht initialisiert, wenn onCreate aufgerufen wird, müssen wir warten, bis die Ansicht vollständig erstellt ist, bevor Sie versuchen, aufzurufen getMap um ein zu vermeiden NullPointerException.

Schritt 3: Konfigurieren der Karte

Da Sie die Kartenkamera einrichten, nachdem der Standort des Benutzers über Play Services ermittelt wurde, verwenden wir den Play Services-Lebenszyklus, um die Initialisierung unserer Karte voranzutreiben. Sie können das verbinden GoogleApiClient im am Start. Wenn der Client eine Verbindung hergestellt hat, können Sie den zuletzt abgerufenen Standort des Benutzers abrufen und diesen zum Ausrichten der Kartenkamera verwenden.

@Override public void onStart () super.onStart (); mGoogleApiClient.connect ();  @Override public void onStop () super.onStop (); if (mGoogleApiClient! = null && mGoogleApiClient.isConnected ()) mGoogleApiClient.disconnect ();  @Override public void onConnected (Bundle-Paket) mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation (mGoogleApiClient); initCamera (mCurrentLocation); 

In dem initCamera Methode, initialisieren Sie die Kamera und einige grundlegende Karteneigenschaften. Sie beginnen mit der Erstellung einer CameraPosition Objekt durch die CameraPosition.Builder, mit einem Ziel für den Längen- und Breitengrad Ihres Benutzers und einer festgelegten Zoomstufe.

Neigung und Peilung werden hier mit ihren Standardwerten verwendet, um zu zeigen, dass es sich um verfügbare Optionen handelt. Sobald Sie eine haben CameraPosition Objekt können Sie die Kartenkamera mit der Taste an diese Position animieren CameraUpdateFactory.

private void initCamera (location location) CameraPosition position = CameraPosition.builder () .target (neues LatLng (location.getLatitude (), location.getLongitude ())) .zoom (16f) .bearing (0.0f) .tilt (0.0f) f) .build (); getMap (). animateCamera (CameraUpdateFactory .newCameraPosition (position), null); getMap (). setMapType (MAP_TYPES [curMapTypeIndex]); getMap (). setTrafficEnabled (true); getMap (). setMyLocationEnabled (true); getMap (). getUiSettings (). setZoomControlsEnabled (true); 

Am Ende dieser Methode werden Sie feststellen, dass die letzten vier Zeilen einige Eigenschaften für die Karte festgelegt haben. Sie legen den Kartentyp wie zuvor beschrieben fest und aktivieren Live-Verkehrsfluss-Overlays in den ersten beiden Zeilen. setMyLocationEnabled fügt eine Schaltfläche in der oberen rechten Ecke des Fensters ein MapFragment Dadurch wird die Kamera beim Drücken automatisch zum Standort Ihres Benutzers bewegt.

Endlich anrufen setZoomControlsEnabled fügt hinzu + und - Schaltflächen in der rechten unteren Ecke, mit denen der Benutzer die Zoomstufe der Karte ändern kann, ohne Gesten verwenden zu müssen. Es gibt einige weitere interessante Dinge, die Sie verwenden können UiSettings, B. einen Kompass hinzufügen oder Gesten deaktivieren, die Sie in der Android-Referenzdokumentation finden.

4. Positionen markieren

Zu den am häufigsten verwendeten Kartenfunktionen gehört das Anzeigen von Positionen mit Markierungen. Da für das Hinzufügen eines Markers ein Längen- und Breitengrad erforderlich ist, müssen Sie das verwenden OnMapClickListener um dem Benutzer zu erlauben, eine Stelle auf der Karte auszuwählen, um Marker Objekt.

@Override public void onMapClick (LatLng latLng) MarkerOptions-Optionen = neue MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.defaultMarker ()); getMap (). addMarker (Optionen); 

Diese Methode erstellt eine generische rote Markierung, auf die der Benutzer getippt hat. Zusätzliche Optionen, z. B. das Setzen einer Marke als ziehbar, können über die Option festgelegt werden MarkerOptions Objekt. Weitere Attribute finden Sie in der offiziellen Android-Referenzdokumentation. Wenn Sie die Farbe der Markierung ändern möchten, können Sie anrufen BitmapDescriptorFactory.defaultMarker wenn Sie dem Symbol ein Symbol hinzufügen MarkerOptions. Das defaultMarker Die Methode akzeptiert einen Gleitkommawert, der den Farbton definiert. Der Farbton kann entweder manuell oder als vordefinierter statischer Wert von eingestellt werden BitmapDescriptorFactory. Es ist darauf hinzuweisen, dass addMarker kehrt zurück Marker Objekt, das zum manuellen Entfernen bestimmter Markierungen bei Bedarf gespeichert werden kann.

Wenn Sie vermeiden möchten, die generischen farbigen Stifte für Ihre Standortmarkierungen zu verwenden, können Sie eine Bitmap als Symbol auf der festlegen MarkerOptions Objekt. Um dies zu demonstrieren, überschreiben Sie das onMapLongClick Diese Methode verwendet das App-Symbol aus dem Ressourcenordner als Marker Wenn der Benutzer die Karte lange gedrückt hält.

@Override public void onMapLongClick (LatLng latLng) MarkerOptions-Optionen = neue MarkerOptions (). Position (latLng); options.title (getAddressFromLatLng (latLng)); options.icon (BitmapDescriptorFactory.fromBitmap (BitmapFactory.decodeResource (getResources (), R.mipmap.ic_launcher))); getMap (). addMarker (Optionen); 

Sie haben wahrscheinlich bemerkt, dass das getAddressFromLatLng Methode wird in beiden Klickmethoden verwendet. Dies ist eine Hilfsmethode, die a benötigt LatLng und führt es durch eine Geocoder eine Straßenadresse bekommen. In den letzten beiden Beispielen verwenden wir diese Methode, um eine Straßenadresse anzuzeigen, wenn eine Markierung berührt wird.

private String getAddressFromLatLng (LatLng latLng) Geocoder Geocoder = neuer Geocoder (getActivity ()); Stringadresse = ""; try address = Geocoder .getFromLocation (latLng.latitude, latLng.longitude, 1) .get (0) .getAddressLine (0);  catch (IOException e)  Rücksprungadresse;  @Override public boolean onMarkerClick (Markierungsmarkierung) marker.showInfoWindow (); wahr zurückgeben; 

5. Zeichnen auf der Karte

Das Google Karte object verfügt über eine Reihe von Methoden, die das Zeichnen von Formen und das Platzieren von Bildern auf der Karte erleichtern. Um einen einfachen Kreis zu zeichnen, müssen Sie lediglich einen CircleOptions Legen Sie einen Radius und die Mittelposition fest und definieren Sie die Farben und die Größe der Kontur- / Füllfarbe.

Sobald Sie eine haben CircleOptions Objekt können Sie anrufen addCircle um den definierten Kreis auf die Karte zu zeichnen. Genau wie beim Platzieren von Markierungen geben Objekte, die auf der Karte gezeichnet werden, ein Objekt des gezeichneten Elementtyps zurück, sodass bei Bedarf später darauf verwiesen werden kann.

private void drawCircle (LatLng-Speicherort) CircleOptions-Optionen = neue CircleOptions (); Optionen.Zentrum (Standort); // Radius in Metern options.radius (10); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); getMap (). addCircle (Optionen); 

Um eine andere geschlossene Form zu zeichnen, können Sie mehrere nehmen LatLng Punkte und erstellen Sie ein PolygonOptions Objekt. Wie du unten sehen kannst, PolygonOptions werden auf ähnliche Weise erstellt wie CircleOptions. Anstelle einer Center und Radius Methode verwenden Sie hinzufügen mit einer Liste von Punkten. Sie können dann anrufen addPolygon die Form zeichnen. In diesem Beispiel zeichnen Sie einfach ein Dreieck auf der Karte.

private void drawPolygon (LatLng StartLocation) LatLng Punkt2 = Neues LatLng (StartLocation.Latitude + .001, StartLocation.Longitude); LatLng-Punkt3 = neues LatLng (StartLocation.Latitude, StartLocation.Longitude + .001); PolygonOptions-Optionen = neue PolygonOptions (); options.add (StartingLocation, Punkt2, Punkt3); options.fillColor (getResources () .getColor (R.color.fill_color)); options.strokeColor (getResources () .getColor (R.color.stroke_color)); options.strokeWidth (10); getMap (). addPolygon (Optionen);  

Die letzte Art der Zeichnung, über die Sie lernen werden, besteht darin, ein Bild als Überlagerung auf der Karte hinzuzufügen. Überlagerungen können nützlich sein, wenn Sie eine gezeichnete Karte für einen Bereich haben, der über einem normalen Kartentyp angezeigt werden soll. Dies kann durch Erstellen von a erreicht werden GroundOverlayOptions mit einer festgelegten Position, Breite und Höhe und dem Bild, das Sie als verwenden möchten BitmapDescriptor.

In der folgenden Methode zeichnen Sie das Startsymbol für die App als Überlagerung auf den Kartenkacheln.

private void drawOverlay (LatLng-Speicherort, int width, int height) GroundOverlayOptions options = new GroundOverlayOptions (); Optionen.Position (Position, Breite, Höhe); options.image (BitmapDescriptorFactory .vonBitmap (BitmapFactory .decodeResource (getResources (), R.mipmap.ic_launcher)))); getMap (). addGroundOverlay (Optionen); 

Fazit

In diesem Lernprogramm haben Sie gelernt, wie Sie einen API-Schlüssel erstellen und Google Maps für Android aktivieren. Sie haben auch über das gelernt MapFragment Klasse und einige der grundlegenden Funktionen, die Sie für eine Karte aktivieren können.

Sie haben gelernt, wie Sie Markierungen platzieren, auf Interaktionen mit der Karte achten und auf der Karte zeichnen, um zusätzliche Informationen anzuzeigen.

Im nächsten Tutorial dieser Serie erfahren Sie, wie Sie eine überlagern Aussicht über dem MapFragment, wie Sie mit Karten auf Innenebene interagieren und Ihren Benutzern eine Straßenansicht zeigen.