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 für eine Markierung angezeigt werden.

Codebeispiele

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

Java

Kotlin

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-Ereignisse 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 eingeblendet, damit der Nutzer schnell auf die mobile 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.

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));
}

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))
}

Zusätzliche Informationen zu einer Markierung anzeigen

Wenn der Nutzer auf eine Markierung auf der Karte tippt, ist für ihn schon fast selbstverständlich, zusätzliche Informationen zu diesem Ort oder Standort angezeigt zu bekommen. Weitere Informationen finden Sie in der Anleitung zu Infofenstern.

Daten mit einer Markierung verknüpfen

Sie können ein beliebiges Datenobjekt mit Marker.setTag() speichern und mit Marker.getTag() abrufen. Im folgenden Beispiel sehen Sie, wie oft auf eine Markierung geklickt wurde (mit Tags):

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;
    }
}

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
    }
}

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 tauschen möglicherweise Daten mit einem System aus, in dem es eindeutige Datensatzkennungen 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 das Attribut draggable auf true gesetzt ist, lässt sich eine Markierung verschieben, nachdem sie einer Karte hinzugefügt wurde. Drücken Sie lange auf die Markierung, um sie zu ziehen. Wenn Sie dann loslassen, bleibt die Markierung an dieser 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.

Java


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

Kotlin


val perthLocation = LatLng(-31.90, 115.86)
val perth = map.addMarker(
    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 ein benutzerdefiniertes Bild anstelle des Standardsymbols festgelegt werden. Bevor ein Symbol definiert werden kann, müssen mehrere Attribute 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. Das 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 das der Mittelpunkt am unteren Rand des Bilds.
Alpha
Hiermit wird die Deckkraft der Markierung festgelegt. Die Standardeinstellung ist „1.0“.
Titel
Eine Textzeile, die 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 anhand des Bildschirms 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 Ausrichtung einer Markierung aber auch so festlegen, 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 nordwärts 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.

Java


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

Kotlin


val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    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, der Punkte auf einem Farbrad darstellt.

Java


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

Kotlin


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

Markierungsdeckkraft anpassen

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

Java


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

Kotlin


val melbourneLocation = LatLng(-37.813, 144.962)
val melbourne = map.addMarker(
    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 Asset-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.

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)));

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))
)

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 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 des Attributs flat auf true festlegen.

Java


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

Kotlin


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

Markierung drehen

Mit der Methode MarkersetRotation() können Sie festlegen, 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.

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));

Kotlin


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

Z-Index der Markierung

Der Z-Index gibt die Stapelreihenfolge dieser Markierung relativ zu anderen Markierungen auf der Karte an. Eine Markierung mit einem hohen Z-Index wird über solchen mit niedrigeren Z-Indexen gezeichnet. 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:

Java


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

Kotlin


map.addMarker(
    MarkerOptions()
        .position(LatLng(10.0, 10.0))
        .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 andere Overlays ohne Markierungen (Gelände-Overlays, Polylinien, Polygone und andere Formen) gezeichnet, unabhängig vom Z-Index der anderen Overlays. Tatsächlich wird davon ausgegangen, dass sich Markierungen in einer separaten Z-Indexgruppe befinden, unabhängig von anderen Overlays.

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

Markierungsereignisse beobachten

Mit der Google Maps API können Sie Markierungsereignisse 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:

Klickereignisse für Markierungen

Sie können Klickereignisse für eine Markierung mit dem OnMarkerClickListener beobachten. Rufen Sie GoogleMap.setOnMarkerClickListener(OnMarkerClickListener) auf, um diesen Listener auf der Karte festzulegen. 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ückgemeldet, 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 Klickereignis einer Markierung ist, das Infofenster aufzurufen (falls verfügbar) und die Kamera zu bewegen. Das führt dazu, dass die Markierung auf der Karte zentriert wird.

Auswirkung des Z-Index auf Klickereignisse:

  • Wenn ein Nutzer auf einen Cluster von Markierungen klickt, wird das Klickereignis 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 Klickereignis durchläuft Markierungscluster bis zu anderen Formen und Overlays, bevor der Zyklus noch einmal gestartet wird.
  • Tatsächlich wird davon ausgegangen, dass sich Markierungen in einer eigenen Z-Indexgruppe verglichen mit anderen Overlays oder Formen (Polylinien, Polygone, Kreise und/oder Gelände-Overlays) befinden, und zwar unabhängig von dem Z-Index der anderen. Wenn sich mehrere Markierungen, Overlays oder Formen überlagern, wird das Klickereignis 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

Mit einem OnMarkerDragListener können Sie Drag-Events für eine Markierung beobachten. Rufen Sie GoogleMap.setOnMarkerDragListener auf, um diesen Listener auf der Karte festzulegen. 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.