Konfliktverhalten konfigurieren

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

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

• REQUIRED: Die Markierung wird unabhängig von Konflikten mit anderen Markierungen immer angezeigt.
• REQUIRED_AND_HIDES_OPTIONAL: Die Markierung wird unabhängig von Konflikten mit anderen Markierungen immer angezeigt. Markierungen oder Labels mit dem Wert OPTIONAL_AND_HIDES_LOWER_PRIORITY, 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 steuern

Sie können das Konfliktverhalten des Pins und des Labeltexts einer Markierung separat steuern. In einigen Fällen kann es sinnvoll sein, Labels auszublenden, während die Markierungspins auf dem Bildschirm sichtbar bleiben, um den Kontext beizubehalten. Fügen Sie dazu ein <gmp-label-3d>-Element als gleichgeordnetes Element von <gmp-marker-3d> hinzu und verknüpfen Sie sie mit dem Attribut for.

Das folgende Codebeispiel zeigt, wie das Konfliktverhalten für ein Label separat 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