Mengontrol perilaku saat tumpang-tindih

Pilih platform: Android iOS JavaScript

Halaman ini menunjukkan cara menetapkan perilaku saat tumpang tindih untuk penanda. Perilaku saat tumpang tindih mengontrol cara penanda ditampilkan jika mengalami konflik (tumpang-tindih) dengan penanda lain.

Untuk menetapkan perilaku saat tumpang tindih, tetapkan collisionBehavior ke salah satu nilai berikut:

  • REQUIRED: Selalu menampilkan penanda terlepas dari konflik yang terjadi
  • REQUIRED_AND_HIDES_OPTIONAL: Selalu menampilkan penanda terlepas dari konflik yang terjadi, dan menyembunyikan setiap penanda atau label OPTIONAL_AND_HIDES_LOWER_PRIORITY yang akan tumpang-tindih dengan penanda.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: Menampilkan penanda hanya jika tidak tumpang-tindih dengan penanda lainnya. Jika dua penanda dengan jenis ini akan tumpang-tindih, penanda dengan zIndex yang lebih tinggi akan ditampilkan. Jika memiliki zIndex yang sama, penanda dengan posisi layar vertikal bawah akan ditampilkan.

Contoh berikut menunjukkan setelan perilaku saat tumpang tindih untuk penanda:

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

Mengontrol perilaku saat tumpang tindih pada label

Anda dapat mengontrol perilaku saat tumpang tindih pada pin dan teks label penanda secara terpisah. Dalam beberapa kasus, sebaiknya sembunyikan label sambil membiarkan pin penanda tetap terlihat di layar untuk mempertahankan konteks. Untuk melakukannya, tambahkan elemen <gmp-label-3d> sebagai turunan dari <gmp-marker-3d> dan tautkan menggunakan atribut for.

Contoh kode berikut menunjukkan cara menetapkan perilaku saat tumpang tindih untuk label secara terpisah dari penanda:

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