Konfliktverhalten konfigurieren

Plattform auswählen: Android iOS JavaScript

Auf dieser Seite wird beschrieben, wie Sie das Konfliktverhalten einer Markierung festlegen. Mit dem Konfliktverhalten wird angegeben, wie eine Markierung angezeigt werden soll, wenn sie sich mit einer anderen Markierung überschneidet.

Um das Konfliktverhalten festzulegen, legen Sie für collisionBehavior einen der folgenden Werte fest:

• REQUIRED: Die Markierung wird immer angezeigt, auch bei Konflikten mit anderen Markierungen.
• REQUIRED_AND_HIDES_OPTIONAL: Die Markierung wird unabhängig von Konflikten mit anderen Markierungen immer angezeigt. OPTIONAL_AND_HIDES_LOWER_PRIORITY-Markierungen oder Labels, die sich mit ihr überschneiden würden, werden ausgeblendet.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: Die Markierung wird nur dann angezeigt, wenn sie sich nicht mit anderen Markierungen überschneidet. Wenn sich zwei Markierungen dieses Typs überschneiden, wird die Markierung mit dem höheren zIndex angezeigt. Falls beide denselben zIndex haben, wird die Markierung mit der niedrigeren vertikalen Bildschirmposition angezeigt.

Das folgende Beispiel zeigt, wie das Konfliktverhalten für eine Markierung konfiguriert wird:

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

Konfliktverhalten eines Labels konfigurieren

Sie können das Konfliktverhalten der Markierung und des Labeltexts separat steuern. In einigen Fällen kann es sinnvoll sein, Labels auszublenden, aber die Markierungspins auf dem Bildschirm sichtbar zu lassen, um den Kontext beizubehalten. Füge dazu ein <gmp-label-3d>-Element als untergeordnetes Element von <gmp-marker-3d> hinzu und verknüpfe sie mit dem Attribut for.

Im folgenden Codebeispiel wird gezeigt, wie das Konfliktverhalten für ein Label unabhängig von einer Markierung festgelegt wird:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js