Mengontrol perilaku saat tumpang-tindih

Pilih platform: Android iOS JavaScript

Halaman ini menunjukkan cara menyetel perilaku penanda saat tumpang-tindih. 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 opsi 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 label

Anda dapat mengontrol perilaku saat tumpang tindih pin dan teks label penanda secara terpisah. Dalam beberapa situasi, ada baiknya menyembunyikan label sambil membiarkan pin penanda terlihat di layar untuk mempertahankan konteks. Untuk melakukannya, tambahkan elemen <gmp-label-3d> sebagai saudara dari <gmp-marker-3d> dan tautkan keduanya menggunakan atribut for.

Contoh kode berikut menunjukkan setelan 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);