重なった場合の動作を管理する

このページでは、マーカーの重なった場合の動作を設定する方法について説明します。 重なった場合の動作とは、マーカーが別のマーカーと衝突した（表示位置が重なった）際の表示方法のことです。

重なった場合の動作を指定するには、collisionBehavior を次のいずれかに設定します。

• REQUIRED: 他のマーカーと重なっていても常に表示されます。
• REQUIRED_AND_HIDES_OPTIONAL: 他のマーカーと重なっても常に表示されますが、このマーカーと表示位置が重なる OPTIONAL_AND_HIDES_LOWER_PRIORITY のマーカーとラベルはすべて非表示になります。
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: 他のマーカーと表示位置が重ならない場合にのみ表示されます。このタイプのマーカー同士が重なった場合、zIndex の高い方が表示されます。zIndex も同一の場合、画面内の縦位置が低いほうが表示されます。

次の例は、マーカーの重なった場合の動作の設定方法を示したものです。

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

ラベルの重なった場合の動作を制御する

マーカーのピンとラベルテキストの重なった場合の動作は個別に制御できます。状況によっては、コンテキストを維持するために、マーカーのピンは画面に表示したままラベルを非表示にすると便利な場合があります。これを行うには、 <gmp-label-3d> 要素を 兄弟 の <gmp-marker-3d> として追加し、 for 属性を使用してリンクします。

次のコードサンプルは、マーカーとは別にラベルの重なった場合の動作を設定する方法を示しています。

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