重なった場合の動作

プラットフォームを選択: Android iOS JavaScript

このページでは、マーカーが重なった場合の動作を制御する方法について説明します。

マーカーが重なった場合の動作を設定する

重なった場合の動作とは、マーカーの表示位置が他のマーカーと重なった際にどのように表示されるかということです。高度なマーカーの作成方法によって、重なった場合の動作が決まります。

  • BitmapDescriptorFactory を使って作成した高度なマーカーは、ビットマップ マーカーと呼ばれます。これらのマーカーは、コアマップによって描画されます。

  • AdvancedMarkerOptions.iconView() メソッドで作成されたものを含め、その他すべての高度なマーカーは View マーカーと呼ばれ、コアマップ上のレイヤに描画されます。

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

  • CollisionBehavior.REQUIRED（デフォルト）: 他のマーカーと重なっていても常に表示されます。
  • CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL: 他のマーカーと重なっても常に表示されますが、このマーカーと表示位置が重なる OPTIONAL_AND_HIDES_LOWER_PRIORITY のマーカーとラベルはすべて非表示になります。

  • CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY: 他のマーカーと表示位置が重ならない場合にのみ表示されます。

    • 2 つのビットマップ マーカーが重なった場合は、zIndex の高いほうが表示されます。zIndex も同一の場合、画面内の縦位置が低いほうが表示されます。zIndex について詳しくは、マーカーの z-index をご覧ください。

    • 2 つの View マーカーが重なった場合は、zIndex の高いほうが表示されます。 zIndex が同じ場合、最後に作成されたマーカーがそれより前に作成されたマーカーの上に重なって表示されます。

    • View マーカーはビットマップ マーカーの上のレイヤに描画されるため、ビットマップ マーカーの上に重なって表示されます。そのため、重なりをうまく管理するには、同じタイプのマーカーを使用することをおすすめします。

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

Kotlin

// Collision behavior can only be changed in the AdvancedMarkerOptions object.
// Changes to collision behavior after a marker has been created are not possible
val collisionBehavior: Int = CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL
val advancedMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions()
    .position(LatLng(10.0, 10.0))
    .collisionBehavior(collisionBehavior)

val marker: Marker = map.addMarker(advancedMarkerOptions) ?: error("Failed to add marker")

Java

// Collision behavior can only be changed in the AdvancedMarkerOptions object.
// Changes to collision behavior after a marker has been created are not possible
int collisionBehavior = AdvancedMarkerOptions.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
AdvancedMarkerOptions options = new AdvancedMarkerOptions()
        .position(new LatLng(10.0, 10.0))
        .collisionBehavior(collisionBehavior);

Marker marker = map.addMarker(options);