Markierungen

Plattform auswählen: Android iOS JavaScript

Mit Markierungen werden einzelne Orte auf der Karte gekennzeichnet. Sie können die Markierungen anpassen, indem Sie die Standardfarbe ändern oder das Markierungssymbol durch ein benutzerdefiniertes Bild ersetzen. Über ein Infofenster können zusätzliche Informationen zu einer Markierung angezeigt werden.

Codebeispiele

Das ApiDemos-Repository auf GitHub enthält ein Beispiel, das verschiedene Markierungsfunktionen zeigt:

Kotlin

Java

Einführung

Markierungen kennzeichnen Orte auf einer Karte. Für die Standardmarkierung wird ein Standardsymbol verwendet, das dem üblichen Google Maps-Design entspricht. Sie können aber die Farbe des Symbols, das Bild oder den Ankerpunkt mithilfe der API ändern. Markierungen sind Objekte vom Typ Marker. Sie werden der Karte über die Methode GoogleMap.addMarker(markerOptions) hinzugefügt.

Die Markierungen sind interaktiv konzipiert. Sie empfangen standardmäßig click-Events und werden häufig zusammen mit Event-Listenern verwendet, um Infofenster aufzurufen. Wenn die Eigenschaft draggable auf true festgelegt wird, können Nutzer die Position der Markierung ändern. Durch langes Drücken wird die Funktion aktiviert, mit der Sie die Markierung verschieben können.

Standardmäßig wird beim Antippen einer Markierung die Kartensymbolleiste unten rechts auf der Karte angezeigt, damit der Nutzer schnell auf die Google Maps App zugreifen kann. Sie können die Symbolleiste aber auch deaktivieren. Weitere Informationen finden Sie im Leitfaden zu Steuerelementen.

Erste Schritte mit Markierungen

Diese Folge von Maps Live zeigt Ihnen die Grundlagen, mit denen Sie Markierungen zu einer Karte mit dem Maps SDK for Android hinzufügen.

Markierung hinzufügen

Das folgende Beispiel zeigt, wie einer Karte eine Markierung hinzugefügt wird. Die Markierung wird an den Koordinaten -33.852,151.211 (Sydney, Australien) erstellt. Klickt der Nutzer darauf, erscheint der String „Markierung in Sydney“ in einem Infofenster.

Kotlin



override fun onMapReady(googleMap: GoogleMap) {
    // Add a marker in Sydney, Australia,
    // and move the map's camera to the same location.
    val sydney = LatLng(-33.852, 151.211)
    googleMap.addMarker(
        MarkerOptions()
            .position(sydney)
            .title("Marker in Sydney")
    )
    googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
}

Java


@Override
public void onMapReady(GoogleMap googleMap) {
    // Add a marker in Sydney, Australia,
    // and move the map's camera to the same location.
    LatLng sydney = new LatLng(-33.852, 151.211);
    googleMap.addMarker(new MarkerOptions()
        .position(sydney)
        .title("Marker in Sydney"));
    googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}

Zusätzliche Informationen zu einer Markierung anzeigen

Dass beim Tippen auf eine Markierung auf einer Karte zusätzliche Informationen über einen Ort angezeigt werden, gehört zu den gängigen Anforderungen an eine Markierung. Weitere Informationen finden Sie im Leitfaden zu Infofenstern.

Daten mit einer Markierung verknüpfen

Sie können mit Marker.setTag() ein beliebiges Datenobjekt zusammen mit einer Markierung speichern und mit Marker.getTag() abrufen. Im folgenden Beispiel sehen Sie, wie Sie mithilfe von Tags die Anzahl der Klicks auf eine Markierung zählen:

Kotlin



/**
 * A demo class that stores and retrieves data objects with each marker.
 */
class MarkerDemoActivity : AppCompatActivity(),
    OnMarkerClickListener, OnMapReadyCallback {
    private val PERTH = LatLng(-31.952854, 115.857342)
    private val SYDNEY = LatLng(-33.87365, 151.20689)
    private val BRISBANE = LatLng(-27.47093, 153.0235)

    private var markerPerth: Marker? = null
    private var markerSydney: Marker? = null
    private var markerBrisbane: Marker? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_markers)
        val mapFragment =
            supportFragmentManager.findFragmentById(R.id.map) as SupportMapFragment?
        mapFragment!!.getMapAsync(this)
    }

    /** Called when the map is ready.  */
    override fun onMapReady(map: GoogleMap) {
        // Add some markers to the map, and add a data object to each marker.
        markerPerth = map.addMarker(
            MarkerOptions()
                .position(PERTH)
                .title("Perth")
        )
        markerPerth?.tag = 0
        markerSydney = map.addMarker(
            MarkerOptions()
                .position(SYDNEY)
                .title("Sydney")
        )
        markerSydney?.tag = 0
        markerBrisbane = map.addMarker(
            MarkerOptions()
                .position(BRISBANE)
                .title("Brisbane")
        )
        markerBrisbane?.tag = 0

        // Set a listener for marker click.
        map.setOnMarkerClickListener(this)
    }

    /** Called when the user clicks a marker.  */
    override fun onMarkerClick(marker: Marker): Boolean {

        // Retrieve the data from the marker.
        val clickCount = marker.tag as? Int

        // Check if a click count was set, then display the click count.
        clickCount?.let {
            val newClickCount = it + 1
            marker.tag = newClickCount
            Toast.makeText(
                this,
                "${marker.title} has been clicked $newClickCount times.",
                Toast.LENGTH_SHORT
            ).show()
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false
    }
}

Java


/**
 * A demo class that stores and retrieves data objects with each marker.
 */
public class MarkerDemoActivity extends AppCompatActivity implements
    GoogleMap.OnMarkerClickListener,
    OnMapReadyCallback {

    private final LatLng PERTH = new LatLng(-31.952854, 115.857342);
    private final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
    private final LatLng BRISBANE = new LatLng(-27.47093, 153.0235);

    private Marker markerPerth;
    private Marker markerSydney;
    private Marker markerBrisbane;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_markers);
        SupportMapFragment mapFragment =
            (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /** Called when the map is ready. */
    @Override
    public void onMapReady(GoogleMap map) {
        // Add some markers to the map, and add a data object to each marker.
        markerPerth = map.addMarker(new MarkerOptions()
            .position(PERTH)
            .title("Perth"));
        markerPerth.setTag(0);

        markerSydney = map.addMarker(new MarkerOptions()
            .position(SYDNEY)
            .title("Sydney"));
        markerSydney.setTag(0);

        markerBrisbane = map.addMarker(new MarkerOptions()
            .position(BRISBANE)
            .title("Brisbane"));
        markerBrisbane.setTag(0);

        // Set a listener for marker click.
        map.setOnMarkerClickListener(this);
    }

    /** Called when the user clicks a marker. */
    @Override
    public boolean onMarkerClick(final Marker marker) {

        // Retrieve the data from the marker.
        Integer clickCount = (Integer) marker.getTag();

        // Check if a click count was set, then display the click count.
        if (clickCount != null) {
            clickCount = clickCount + 1;
            marker.setTag(clickCount);
            Toast.makeText(this,
                marker.getTitle() +
                    " has been clicked " + clickCount + " times.",
                Toast.LENGTH_SHORT).show();
        }

        // Return false to indicate that we have not consumed the event and that we wish
        // for the default behavior to occur (which is for the camera to move such that the
        // marker is centered and for the marker's info window to open, if it has one).
        return false;
    }
}

Nachfolgend sind einige Beispiele für Szenarien aufgeführt, in denen es nützlich ist, Daten mit Markierungen zu speichern und abzurufen:

  • Ihre App deckt möglicherweise verschiedene Arten von Markierungen ab, die unterschiedlich behandelt werden sollen, wenn der Nutzer darauf klickt. Um das zu erreichen, können Sie zusammen mit der Markierung einen String speichern, der den Typ angibt.
  • Sie sind möglicherweise über eine Schnittstelle an ein System angebunden, in dem es eindeutige IDs für Datensätze gibt, wobei die Markierungen spezifische Datensätze in diesem System darstellen.
  • Mithilfe von Markierungsdaten lässt sich eine Priorität angeben, die verwendet werden soll, wenn über den Z-Index einer Markierung entschieden wird.

Markierungen ziehbar machen

Wenn die Eigenschaft draggable auf true gesetzt ist, lässt sich eine Markierung verschieben, nachdem sie einer Karte hinzugefügt wurde. Durch langes Drücken auf die Markierung kann sie auf der Karte bewegt werden. Nachdem die Markierung mit dem Finger gezogen und losgelassen wurde, bleibt sie an der letzten Position.

In der Standardeinstellung sind Markierungen nicht ziehbar. Sie müssen die Markierung explizit als ziehbar festlegen: entweder mit MarkerOptions.draggable(boolean), bevor die Markierung der Karte hinzugefügt wird, oder mit Marker.setDraggable(boolean), nachdem sie der Karte hinzugefügt wurde. Wie unter Drag-Events für Markierungen beschrieben, können Sie Drag-Events für Markierungen mit einem Listener beobachten.

Mit dem nachfolgenden Snippet wird eine ziehbare Markierung an der Position von Perth, Australien, hinzugefügt.

Kotlin



val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .draggable(true)
)

Java


final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth = map.addMarker(
    new MarkerOptions()
        .position(perthLocation)
        .draggable(true));

Markierung anpassen

Im nachfolgenden Video sehen Sie, wie Markierungen verwendet werden können, um Orte auf einer Karte darzustellen.

Für Markierungen kann anstelle des Standardsymbols ein benutzerdefiniertes Bild festgelegt werden. Bevor ein Symbol definiert werden kann, müssen mehrere Eigenschaften festgelegt werden, die sich auf die visuelle Funktionsweise der Markierung auswirken.

Folgende Eigenschaften können bei Markierungen angepasst werden:

Position (erforderlich)
Der Wert LatLng für die Position der Markierung auf der Karte. Dies ist die einzige erforderliche Eigenschaft für das Objekt Marker.
Anchor
Der Punkt auf dem Bild, der an der Position „LatLng“ der Markierung platziert wird. In der Standardeinstellung ist dies der Mittelpunkt am unteren Rand des Bilds.
Alpha
Hiermit wird die Deckkraft der Markierung festgelegt. Die Standardeinstellung ist „1.0“.
Title
Ein String, der im Infofenster erscheint, sobald der Nutzer auf die Markierung tippt.
Snippet
Zusätzlicher Text, der unterhalb des Titels erscheint.
Icon
Eine Bitmap, die anstelle des Standardbilds der Markierung erscheint.
Draggable
Legen Sie die Option auf true fest, wenn Nutzer die Markierung verschieben können sollen. Die Standardeinstellung ist false.
Visible
Legen Sie die Option auf false fest, um die Markierung unsichtbar zu machen. Die Standardeinstellung ist true.
Flat/Billboard
Standardmäßig wird für Markierungen die Billboard-Ausrichtung verwendet. Dabei werden sie nicht an der Oberfläche der Karte, sondern am Bildschirm des Geräts ausgerichtet. In diesem Fall ändert sich die Ausrichtung der Markierung nicht, wenn die Karte gedreht, geneigt oder vergrößert bzw. verkleinert wird. Sie können die Markierung aber auch so ausrichten, dass sie flach auf der Erdoberfläche liegt. Flache Markierungen drehen sich, wenn die Karte gedreht wird, und ändern den Blickwinkel, wenn die Karte geneigt wird. Genau wie Billboard-Markierungen behalten auch flache Markierungen ihre Größe bei, wenn die Karte vergrößert oder verkleinert wird.
Rotation
Die Ausrichtung der Markierung, angegeben in Grad im Uhrzeigersinn. Die Standardposition ändert sich, wenn die Markierung flach ist. Eine flache Markierung ist standardmäßig nach Norden ausgerichtet. Wenn sie nicht flach ist, zeigt sie nach oben und ist so gedreht, dass sie immer der Kamera gegenüberliegt.

Mit dem Snippet unten wird eine einfache Markierung mit Standardsymbol erstellt.

Kotlin



val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
)

Java


final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLocation));

Markierungsfarbe anpassen

Die Farbe des standardmäßigen Markierungsbilds lässt sich anpassen, indem das Objekt BitmapDescriptor an die icon()-Methode übergeben wird. Sie können einen Satz vordefinierter Farben im Objekt BitmapDescriptorFactory nutzen oder über die Methode BitmapDescriptorFactory.defaultMarker(float hue) eine benutzerdefinierte Markierungsfarbe festlegen. Der Farbton ist ein Wert zwischen 0 und 360 und entspricht Punkten auf einem Farbrad.

Kotlin



val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
)

Java


final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLocation)
        .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)));

Deckkraft der Markierung anpassen

Sie können die Deckkraft einer Markierung mithilfe der Methode „MarkerOptions.alpha()“ ändern. Der Alpha-Wert wird als Gleitkommazahl zwischen 0,0 und 1,0 angegeben, wobei 0 vollständige Transparenz und 1 vollständige Deckkraft bedeutet.

Kotlin



val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .alpha(0.7f)
)

Java


final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne = map.addMarker(new MarkerOptions()
    .position(melbourneLocation)
    .alpha(0.7f));

Markierungsbild anpassen

Sie können das Standardmarkierungsbild durch ein benutzerdefiniertes Bild ersetzen (häufig auch als Symbol bezeichnet). Benutzerdefinierte Symbole werden immer als BitmapDescriptor festgelegt und mithilfe einer der Methoden in der Klasse BitmapDescriptorFactory definiert.

fromAsset(String assetName)
Zum Erstellen einer benutzerdefinierten Markierung unter Verwendung des Namens eines Bitmapbilds im Assets-Verzeichnis
fromBitmap(Bitmap image)
Zum Erstellen einer benutzerdefinierten Markierung aus einem Bitmapbild
fromFile(String fileName)
Zum Erstellen eines benutzerdefinierten Symbols mit dem Namen einer Bitmapbilddatei im internen Speicher
fromPath(String absolutePath)
Zum Erstellen einer benutzerdefinierten Markierung aus einem absoluten Dateipfad eines Bitmapbilds
fromResource(int resourceId)
Zum Erstellen einer benutzerdefinierten Markierung mithilfe der Ressourcen-ID eines Bitmapbilds

Im nachfolgenden Snippet wird eine Markierung mit einem benutzerdefinierten Symbol erstellt.

Kotlin



val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLocation)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow))
)

Java


final LatLng melbourneLocation = new LatLng(-37.813, 144.962);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLocation)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.arrow)));

Markierung flach darstellen

Markierungssymbole werden üblicherweise in Bezug auf den Bildschirm gezeichnet, d. h., durch Drehen, Neigen oder Zoomen der Karte ändert sich ihre Ausrichtung nicht. Sie können aber die Ausrichtung einer Markierung so festlegen, dass sie flach auf der Erdoberfläche liegt. Markierungen, die so ausgerichtet werden, drehen sich, wenn die Karte gedreht wird, und ändern den Blickwinkel, wenn die Karte geneigt wird. Flache Markierungen behalten ihre Größe bei, wenn die Karte durch Zoomen vergrößert oder verkleinert wird.

Um die Ausrichtung der Markierung zu ändern, müssen Sie den Wert der Eigenschaft flat auf true festlegen.

Kotlin



val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .flat(true)
)

Java


final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth = map.addMarker(
    new MarkerOptions()
        .position(perthLocation)
        .flat(true));

Markierung drehen

Mit der Methode Marker.setRotation() können Sie angeben, dass sich eine Markierung um ihren Ankerpunkt drehen soll. Die Drehung wird gradweise im Uhrzeigersinn von der Standardposition aus gemessen. Wenn die Markierung flach auf der Karte aufliegt, ist die Standardposition Norden. Wenn sie nicht flach ist, zeigt sie nach oben und ist so gedreht, dass sie immer der Kamera gegenüberliegt.

Im Beispiel unten wird die Markierung um 90° gedreht. Wenn Sie den Ankerpunkt auf 0.5,0.5 festlegen, wird sie um ihre Mitte statt um ihre Grundlinie gedreht.

Kotlin



val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    MarkerOptions()
        .position(perthLocation)
        .anchor(0.5f, 0.5f)
        .rotation(90.0f)
)

Java


final LatLng perthLocation = new LatLng(-31.90, 115.86);
Marker perth = map.addMarker(
    new MarkerOptions()
        .position(perthLocation)
        .anchor(0.5f,0.5f)
        .rotation(90.0f));

Z-Index der Markierung

Der Z-Index gibt die Stapelposition dieser Markierung relativ zu anderen Markierungen auf der Karte an. Eine Markierung mit einem hohen Z-Index wird über solchen mit einem niedrigeren Z-Index dargestellt. Der Standardwert für den Z-Index ist 0.

Legen Sie den Z-Index für das Optionsobjekt der Markierung fest, indem Sie MarkerOptions.zIndex() aufrufen, wie im folgenden Code-Snippet dargestellt:

Kotlin



map.addMarker(
    MarkerOptions()
        .position(LatLng(10.0, 10.0))
        .title("Marker z1")
        .zIndex(1.0f)
)

Java


map.addMarker(new MarkerOptions()
    .position(new LatLng(10, 10))
    .title("Marker z1")
    .zIndex(1.0f));

Sie können auf den Z-Index der Markierung zugreifen, indem Sie Marker.getZIndex() aufrufen. Wenn Sie den Index ändern möchten, rufen Sie Marker.setZIndex() auf.

Markierungen werden immer über Kachelebenen und anderen Overlays ohne Markierungen (Boden-Overlays, Polylinien, Polygonen und anderen Formen) dargestellt, unabhängig vom Z-Index der anderen Overlays. Damit werden Markierungen praktisch so behandelt, als würden sie eine separate Z-Indexgruppe bilden, unabhängig von anderen Overlays.

Informationen zur Auswirkung des Z-Index auf Click-Events finden Sie weiter unten.

Markierungsereignisse beobachten

Mit der Google Maps API können Sie Markierungsereignisse mit einem Listener beobachten und darauf reagieren. Dafür ist der entsprechende Listener für das Objekt GoogleMap einzurichten, zu dem die Markierungen gehören. Wenn das Ereignis an einer der Markierungen auf der Karte stattfindet, wird der Callback des Listeners durch das entsprechende Objekt Marker, das als Parameter weitergegeben wird, aktiviert. Um dieses Marker-Objekt mit Ihrem eigenen Verweis auf ein Marker-Objekt zu vergleichen, müssen Sie equals() und nicht == verwenden.

Die folgenden Ereignisse können beobachtet werden:

Click-Events für Markierungen

Sie können Click-Events für eine Markierung mit dem OnMarkerClickListener beobachten. Rufen Sie GoogleMap.setOnMarkerClickListener(OnMarkerClickListener) auf, um diesen Listener auf der Karte zu platzieren. Wenn ein Nutzer auf eine Markierung klickt, wird onMarkerClick(Marker) aufgerufen und die Markierung wird als Argument übergeben. Durch diese Methode wird ein boolescher Wert zurückgegeben, der angibt, ob das Ereignis verarbeitet wurde. Das heißt, das Standardverhalten soll unterdrückt werden. Wenn false zurückgegeben wird, wird das Standardverhalten zusätzlich zu Ihrem benutzerdefinierten Verhalten verwendet. Das Standardverhalten für ein Click-Event einer Markierung ist, das Infofenster aufzurufen (falls verfügbar) und die Kamera so zu bewegen, dass die Markierung auf der Karte zentriert wird.

Auswirkung des Z-Index auf Click-Events:

  • Wenn ein Nutzer auf einen Cluster von Markierungen klickt, wird das Click-Event für die Markierung mit dem höchsten Z-Index ausgelöst.
  • Pro Klick wird maximal ein Ereignis ausgelöst. Das heißt, der Klick wird nicht an die Markierungen oder andere Overlays mit niedrigeren Z-Index-Werten übergeben.
  • Wenn auf einen Cluster mit Markierungen geklickt wird, führt das dazu, dass nachfolgende Klicks den Cluster durchlaufen, wobei eine Markierung nach der anderen ausgewählt wird. Bei der Reihenfolge im Zyklus hat zuerst der Z-Index Priorität, dann die Nähe zum nächsten Klickpunkt.
  • Wenn der Nutzer auf eine Stelle außerhalb des Umkreises des Clusters klickt, wird der Cluster von der API neu berechnet und der Status des Klickzyklus wird zurückgesetzt, sodass er wieder am Anfang beginnt.
  • Das Click-Event durchläuft Markierungscluster bis zu anderen Formen und Overlays, bevor der Zyklus noch einmal gestartet wird.
  • Praktisch werden Markierungen so behandelt, als würden sie eine eigene Z-Indexgruppe gegenüber anderen Overlays oder Formen (Polylinien, Polygone, Kreise und/oder Gelände-Overlays) bilden und als wäre ihr Z-Index unabhängig vom Z-Index der anderen zu betrachten. Wenn sich mehrere Markierungen, Overlays oder Formen überlagern, wird das Click-Event zuerst durch den Markierungscluster geleitet. Anschließend wird es nacheinander für andere anklickbare Overlays oder Formen basierend auf ihren Z-Index-Werten ausgelöst.

Drag-Events für Markierungen

Sie können einen OnMarkerDragListener verwenden, um Drag-Events für eine Markierung zu beobachten. Rufen Sie GoogleMap.setOnMarkerDragListener auf, um diesen Listener auf der Karte zu platzieren. Zum Ziehen einer Markierung muss der Nutzer länger auf sie drücken. Wenn der Nutzer den Finger vom Display nimmt, bleibt die Markierung an dieser Position. Beim Ziehen einer Markierung wird zuerst onMarkerDragStart(Marker) aufgerufen. Während des Ziehens wird onMarkerDrag(Marker) ständig aufgerufen. Am Ende des Ziehvorgangs wird onMarkerDragEnd(Marker) aufgerufen. Sie können die Position der Markierung jederzeit abrufen, indem Sie Marker.getPosition() aufrufen.