15 Jahre Google Maps Platform – Neuigkeiten und Ankündigungen

Polylinien und Polygone für Routen und Gebiete

In dieser Anleitung wird erläutert, wie du deiner Android-App eine Google-Karte hinzufügen und mit Polylinien und Polygonen Routen und Gebiete darstellen kannst.

Folge der Anleitung, um eine Android-App mit dem Maps SDK for Android zu erstellen. Die empfohlene Entwicklungsumgebung ist Android Studio.

Code abrufen

Klone das Repository "Google Maps Android API v2 Samples" oder lade es von GitHub herunter.

Entwicklungsprojekt einrichten

Führe die folgenden Schritte aus, um das Anleitungsprojekt in Android Studio zu erstellen.

  1. Lade Android Studio herunter und installiere die Anwendung.
  2. Füge das Paket Google Play-Dienste zu Android Studio hinzu.
  3. Klone das Repository "Google Maps Android API v2 Samples" oder lade es herunter, sofern du das noch nicht zu Beginn dieser Anleitung getan hast.
  4. Anleitungsprojekt importieren:

    • Wähle in Android Studio File > New > Import Project aus.
    • Gehe zu dem Speicherort, an dem du das Repository "Google Maps Android API v2 Samples" nach dem Download gespeichert hast.
    • Suche dort nach dem Projekt Polygons:
      PATH-TO-SAVED-REPO/android-samples/tutorials/Polygons
    • Wähle das Projektverzeichnis aus und klicke auf OK. In Android Studio wird dein Projekt jetzt mit dem Build-Tool Gradle erstellt.

API-Schlüssel abrufen und die erforderlichen APIs aktivieren

Als letzten Schritt benötigst du noch einen Google API-Schlüssel, der eine Berechtigung zum Verwenden des Maps SDK for Android hat.

Klicke hier, um einen Schlüssel anzufordern und die API zu aktivieren.

Jetzt starten

Weitere Informationen findest du in der vollständigen Anleitung zum Abrufen eines API-Schlüssels.

API-Schlüssel der App hinzufügen

  1. Bearbeite die gradle.properties-Datei deines Projekts.
  2. Füge deinen API-Schlüssel in den Wert der GOOGLE_MAPS_API_KEY-Eigenschaft ein. Wenn du deine App erstellst, kopiert Gradle den API-Schlüssel in das Android-Manifest der App, wie unten erläutert.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

App erstellen und ausführen

  1. Verbinde ein Android-Gerät mit deinem Computer. Befolge die Anleitung, um Entwickleroptionen auf deinem Android-Gerät zu aktivieren und dein System so zu konfigurieren, dass das Gerät erkannt wird. Alternativ kannst du mit Android Virtual Device (AVD) Manager ein virtuelles Gerät konfigurieren. Beim Auswählen eines Emulators solltest du ein Image angeben, das die Google-APIs enthält. Weitere Informationen findest du im Startleitfaden.
  2. Klicke in Android Studio auf die Menüoption Run (oder das Abspielsymbol). Wähle ein Gerät aus, wenn du dazu aufgefordert wirst.

In Android Studio wird Gradle aufgerufen, um die App zu erstellen. Dann wird die App auf dem Gerät oder im Emulator ausgeführt.

Du solltest eine Karte sehen, auf der zwei Polygone über Australien eingeblendet sind, ähnlich wie auf dem Bild auf dieser Seite.

Fehlerbehebung:

Code verstehen

In diesem Teil der Anleitung werden die wesentlichsten Teile der App Polygons erläutert, damit du besser verstehst, wie du eine ähnliche App erstellst.

Android-Manifest kontrollieren

Beachte folgende Elemente in der Datei AndroidManifest.xml deiner App:

  • Füge ein meta-data-Element hinzu, um die Version der Google Play-Dienste einzubetten, mit der die App kompiliert wurde.

    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
    
  • Füge ein meta-data-Element hinzu, mit dem der API-Schlüssel angegeben wird. Im Beispiel, das zu dieser Anleitung gehört, wird der Wert für den API-Schlüssel einem String google_maps_key zugeordnet. Wenn du deine App erstellst, wird der API-Schlüssel von Gradle aus der gradle.properties-Datei deines Projekts kopiert und in den Stringwert eingefügt.

    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="@string/google_maps_key" />
    

    Wie der API-Schlüssel dem Stringwert zugeordnet ist, kannst du anhand des build.gradle-Elements in deiner App sehen. Es enthält die folgende Zeile, in der der String google_maps_key der Gradle-Eigenschaft GOOGLE_MAPS_API_KEY zugeordnet ist:

    resValue "string", "google_maps_key",
            (project.findProperty("GOOGLE_MAPS_API_KEY") ?: "")
    

Im Folgenden findest du ein vollständiges Beispiel für ein Manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.polygons">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

        <!--
             The API key for Google Maps-based APIs.
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key" />

        <activity
            android:name="com.example.polygons.PolyActivity"
            android:label="@string/title_activity_maps">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Karte hinzufügen

Rufe eine Karte mit dem Maps SDK for Android auf.

  1. Füge der Layoutdatei activity_maps.xml deiner Aktivität ein <fragment>-Element hinzu. Mit diesem Element wird ein SupportMapFragment definiert, das als Container für die Karte fungiert und Zugriff auf das GoogleMap-Objekt bietet. In der Anleitung wird die Version der Android Support Library des Kartenfragments verwendet, um die Abwärtskompatibilität mit früheren Versionen des Android-Frameworks sicherzustellen.

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.polygons.PolyActivity" />
    
    
  2. Lege in der onCreate()-Methode die Layoutdatei als Inhaltsansicht fest: Erstelle einen Ziehpunkt für das Kartenfragment, indem du FragmentManager.findFragmentById() aufrufst. Registriere dich dann mit getMapAsync() für den Karten-Callback:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps);
    
        // Get the SupportMapFragment and request notification when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(map);
        mapFragment.getMapAsync(this);
    }
    
  3. Implementiere die Schnittstelle OnMapReadyCallback und überschreibe die Methode onMapReady(). Die API ruft diesen Callback auf, wenn das GoogleMap -Objekt verfügbar ist. So kannst du Objekte zur Karte hinzufügen und für deine App weiter anpassen:

    public class PolyActivity extends AppCompatActivity
            implements
                    OnMapReadyCallback,
                    GoogleMap.OnPolylineClickListener,
                    GoogleMap.OnPolygonClickListener {
    
        // More code goes here, including the onCreate() method described above.
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
    
            // Add polylines and polygons to the map. This section shows just
            // a single polyline. Read the rest of the tutorial to learn more.
            Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
                    .clickable(true)
                    .add(
                            new LatLng(-35.016, 143.321),
                            new LatLng(-34.747, 145.592),
                            new LatLng(-34.364, 147.891),
                            new LatLng(-33.501, 150.217),
                            new LatLng(-32.306, 149.248),
                            new LatLng(-32.491, 147.309)));
    
            // Position the map's camera near Alice Springs in the center of Australia,
            // and set the zoom factor so most of Australia shows on the screen.
            googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(-23.684, 133.903), 4));
    
            // Set listeners for click events.
            googleMap.setOnPolylineClickListener(this);
            googleMap.setOnPolygonClickListener(this);
        }
    }
    

Polylinie hinzufügen, um eine Linie auf der Karte zu zeichnen

Ein Polyline-Element ist eine Reihe verbundener Liniensegmente. Polylinien werden verwendet, um Routen, Pfade und andere Verbindungen zwischen Standorten darzustellen.

  1. Erstelle ein PolylineOptions-Objekt und füge ihm Punkte hinzu. Jeder Punkt stellt einen Standort auf der Karte dar, den du mit einem LatLng-Objekt mit Breiten- und Längengradwerten definierst. Im Codebeispiel unten wird eine Polylinie mit sechs Punkten erstellt.

  2. Rufe GoogleMap.addPolyline() auf, um die Polylinie in die Karte einzufügen.

    Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
            .clickable(true)
            .add(
                    new LatLng(-35.016, 143.321),
                    new LatLng(-34.747, 145.592),
                    new LatLng(-34.364, 147.891),
                    new LatLng(-33.501, 150.217),
                    new LatLng(-32.306, 149.248),
                    new LatLng(-32.491, 147.309)));
    

Lege die Option clickable der Polylinie auf true fest, wenn du Klickereignisse auf der Polylinie verarbeiten möchtest. Weitere Informationen zur Ereignisverarbeitung findest du weiter unten in dieser Anleitung.

Beliebige Daten mit einer Polylinie speichern

Du kannst beliebige Datenobjekte mit Polylinien und anderen Geometrieobjekten speichern.

  1. Rufe Polyline.setTag() auf, um ein Datenobjekt mit der Polylinie zu speichern. Der folgende Code definiert ein beliebiges Tag (A), das einen Typ der Polylinie angibt.

    Polyline polyline1 = googleMap.addPolyline(new PolylineOptions()
            .clickable(true)
            .add(
                    new LatLng(-35.016, 143.321),
                    new LatLng(-34.747, 145.592),
                    new LatLng(-34.364, 147.891),
                    new LatLng(-33.501, 150.217),
                    new LatLng(-32.306, 149.248),
                    new LatLng(-32.491, 147.309)));
    // Store a data object with the polyline, used here to indicate an arbitrary type.
    polyline1.setTag("A");
    
  2. Rufe die Daten mit Polyline.getTag() auf, wie im nächsten Abschnitt veranschaulicht.

Polylinien benutzerdefinierten Stil hinzufügen

Du kannst im Objekt PolylineOptions verschiedene Stileigenschaften angeben. Dazu gehören die Strichfarbe und -stärke, die Verbindungsarten und die Anfangs- und Endkappen. Wenn du keine bestimmte Eigenschaft angibst, verwendet die API einen Standardwert für diese Eigenschaft.

Mit dem folgenden Code wird eine runde Kappe auf das Ende und eine andere auf den Anfang der Linie angewendet. Das hängt vom Typ der Polylinie ab, wobei der Typ eine beliebige Eigenschaft ist, die im Datenobjekt für die Polylinie gespeichert ist. Im Beispiel werden auch die Strichstärke und -farbe sowie der Verbindungstyp angegeben:

private static final int COLOR_BLACK_ARGB = 0xff000000;
private static final int POLYLINE_STROKE_WIDTH_PX = 12;

private void stylePolyline(Polyline polyline) {
    String type = "";
    // Get the data object stored with the polyline.
    if (polyline.getTag() != null) {
        type = polyline.getTag().toString();
    }

    switch (type) {
        // If no type is given, allow the API to use the default.
        case "A":
            // Use a custom bitmap as the cap at the start of the line.
            polyline.setStartCap(
                    new CustomCap(
                            BitmapDescriptorFactory.fromResource(R.drawable.ic_arrow), 10));
            break;
        case "B":
            // Use a round cap at the start of the line.
            polyline.setStartCap(new RoundCap());
            break;
    }

    polyline.setEndCap(new RoundCap());
    polyline.setWidth(POLYLINE_STROKE_WIDTH_PX);
    polyline.setColor(COLOR_BLACK_ARGB);
    polyline.setJointType(JointType.ROUND);
}

Mit dem Code oben wird eine benutzerdefinierte Bitmap für die Anfangskappe der Polylinie von Typ A festgelegt und ein Referenzstrich mit einer Breite von zehn Pixeln angegeben. Die API skaliert die Bitmap basierend auf der Breite des Referenzstrichs. Gib für den Referenzstrich die Breite an, die du beim Entwerfen des Bitmapbilds in den ursprünglichen Abmessungen des Bilds verwendet hast. Tipp: Öffne dein Bitmapbild mit einem Zoomfaktor von 100 % in einem Bildeditor und stelle die gewünschte Breite des Linienstrichs relativ zum Bild grafisch dar.

Weitere Informationen zu Linienkappen und anderen Optionen zum Anpassen von Formen

Klickereignisse für Polylinie verarbeiten

  1. Mache die Polylinie anklickbar, indem du Polyline.setClickable() aufrufst. Standardmäßig sind Polylinien nicht anklickbar und deine App erhält keine Benachrichtigung, wenn der Nutzer auf eine Polylinie tippt.

  2. Implementiere die OnPolylineClickListener-Schnittstelle und rufe GoogleMap.setOnPolylineClickListener() auf, um den Listener auf der Karte festzulegen:

    public class PolyActivity extends AppCompatActivity
            implements
                    OnMapReadyCallback,
                    GoogleMap.OnPolylineClickListener,
                    GoogleMap.OnPolygonClickListener {
    
        @Override
        public void onMapReady(GoogleMap googleMap) {
            // Add a polyline to the map.
            Polyline polyline1 = googleMap.addPolyline((new PolylineOptions())
                    .clickable(true)
                    .add(new LatLng(-35.016, 143.321),
                            new LatLng(-34.747, 145.592),
                            new LatLng(-34.364, 147.891),
                            new LatLng(-33.501, 150.217),
                            new LatLng(-32.306, 149.248),
                            new LatLng(-32.491, 147.309)));
    
            // Set listeners for click events.
            googleMap.setOnPolylineClickListener(this);
            googleMap.setOnPolygonClickListener(this);
        }
    }
    
  3. Überschreibe die onPolylineClick()-Callback-Methode. Im folgenden Beispiel wird das Strichmuster der Linie abwechselnd als durchgezogene und gepunktete Linie angezeigt, wenn der Nutzer auf die Polylinie klickt:

    private static final PatternItem DOT = new Dot();
    private static final PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);
    //
    // Create a stroke pattern of a gap followed by a dot.
    private static final List<PatternItem> PATTERN_POLYLINE_DOTTED = Arrays.asList(GAP, DOT);
    
    @Override
    public void onPolylineClick(Polyline polyline) {
        // Flip from solid stroke to dotted stroke pattern.
        if ((polyline.getPattern() == null) || (!polyline.getPattern().contains(DOT))) {
            polyline.setPattern(PATTERN_POLYLINE_DOTTED);
        } else {
            // The default pattern is a solid stroke.
            polyline.setPattern(null);
        }
    
        Toast.makeText(this, "Route type " + polyline.getTag().toString(),
                Toast.LENGTH_SHORT).show();
    }
    

Polygone hinzufügen, um Gebiete auf der Karte darzustellen

Polygon ist eine Form, die aus einer Reihe von Koordinaten in einer bestimmten Abfolge besteht, ähnlich wie bei Polyline. Der Unterschied besteht darin, dass ein Polygon eine geschlossene Fläche mit einem ausfüllbaren Inneren ist, während eine Polylinie ein offenes Ende hat.

  1. Erstelle ein PolygonOptions-Objekt und füge ihm Punkte hinzu. Jeder Punkt stellt einen Standort auf der Karte dar, den du mit einem LatLng-Objekt mit Breiten- und Längengradwerten definierst. Im Codebeispiel unten wird ein Polygon mit vier Punkten erstellt.

  2. Mache das Polygon anklickbar, indem du Polygon.setClickable() aufrufst. Standardmäßig sind Polygone nicht anklickbar und deine App empfängt keine Benachrichtigung, wenn der Nutzer auf ein Polygon tippt. Die Verarbeitung von Klickereignissen für Polygone ähnelt der Verarbeitung von Ereignissen in Bezug auf Polylinien, die weiter oben in dieser Anleitung beschrieben wurden.

  3. Rufe GoogleMap.addPolygon() auf, um das Polygon der Karte hinzuzufügen.

  4. Rufe Polygon.setTag() auf, um ein Datenobjekt mit dem Polygon zu speichern. Mit dem folgenden Code wird ein beliebiger Typ (alpha) für das Polygon definiert.

    Polygon polygon1 = googleMap.addPolygon(new PolygonOptions()
            .clickable(true)
            .add(
                    new LatLng(-27.457, 153.040),
                    new LatLng(-33.852, 151.211),
                    new LatLng(-37.813, 144.962),
                    new LatLng(-34.928, 138.599)));
    // Store a data object with the polygon, used here to indicate an arbitrary type.
    polygon1.setTag("alpha");
    

Dem Polygon einen benutzerdefinierten Stil hinzufügen

Du kannst im PolygonOptions-Objekt eine Reihe von Stileigenschaften angeben. Dazu gehören die Strichfarbe, -stärke, -muster und -verbindungsarten sowie die Füllfarbe. Wenn du keine bestimmte Eigenschaft angibst, verwendet die API einen Standardwert für diese Eigenschaft.

Über den folgenden Code werden bestimmte Farben und Strichmuster angewendet, die vom Typ des Polygons abhängen. Der Typ ist eine beliebige Eigenschaft, die im Datenobjekt für das Polygon gespeichert ist:

private static final int COLOR_BLACK_ARGB = 0xff000000;
private static final int COLOR_WHITE_ARGB = 0xffffffff;
private static final int COLOR_GREEN_ARGB = 0xff388E3C;
private static final int COLOR_PURPLE_ARGB = 0xff81C784;
private static final int COLOR_ORANGE_ARGB = 0xffF57F17;
private static final int COLOR_BLUE_ARGB = 0xffF9A825;

private static final int POLYGON_STROKE_WIDTH_PX = 8;
private static final int PATTERN_DASH_LENGTH_PX = 20;
private static final int PATTERN_GAP_LENGTH_PX = 20;
private static final PatternItem DOT = new Dot();
private static final PatternItem DASH = new Dash(PATTERN_DASH_LENGTH_PX);
private static final PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);

// Create a stroke pattern of a gap followed by a dash.
private static final List<PatternItem> PATTERN_POLYGON_ALPHA = Arrays.asList(GAP, DASH);

// Create a stroke pattern of a dot followed by a gap, a dash, and another gap.
private static final List<PatternItem> PATTERN_POLYGON_BETA =
        Arrays.asList(DOT, GAP, DASH, GAP);

private void stylePolygon(Polygon polygon) {
    String type = "";
    // Get the data object stored with the polygon.
    if (polygon.getTag() != null) {
        type = polygon.getTag().toString();
    }

    List<PatternItem> pattern = null;
    int strokeColor = COLOR_BLACK_ARGB;
    int fillColor = COLOR_WHITE_ARGB;

    switch (type) {
        // If no type is given, allow the API to use the default.
        case "alpha":
            // Apply a stroke pattern to render a dashed line, and define colors.
            pattern = PATTERN_POLYGON_ALPHA;
            strokeColor = COLOR_GREEN_ARGB;
            fillColor = COLOR_PURPLE_ARGB;
            break;
        case "beta":
            // Apply a stroke pattern to render a line of dots and dashes, and define colors.
            pattern = PATTERN_POLYGON_BETA;
            strokeColor = COLOR_ORANGE_ARGB;
            fillColor = COLOR_BLUE_ARGB;
            break;
    }

    polygon.setStrokePattern(pattern);
    polygon.setStrokeWidth(POLYGON_STROKE_WIDTH_PX);
    polygon.setStrokeColor(strokeColor);
    polygon.setFillColor(fillColor);
}

Weitere Informationen zu Strichmustern und anderen Optionen zum Anpassen von Formen

Weitere Informationen

Weitere Informationen zum Objekt "Kreis" findest du hier. Kreise ähneln Polygonen, haben jedoch Eigenschaften, die die Form eines Kreises widerspiegeln.