Çakışma davranışını kontrol etme

Platform seçin: Android iOS JavaScript

Bu sayfada, bir işaretçi için çakışma davranışının nasıl ayarlanacağı gösterilmektedir. Çakışma davranışı, bir işaretçinin başka bir işaretçiyle çakışması (üst üste gelmesi) durumunda nasıl görüntüleneceğini kontrol eder.

Çakışma davranışını ayarlamak için collisionBehavior özelliğini aşağıdakilerden birine ayarlayın:

  • REQUIRED: Çakışmadan bağımsız olarak işaretçiyi her zaman göster
  • REQUIRED_AND_HIDES_OPTIONAL: Çakışmadan bağımsız olarak işaretçiyi her zaman gösterin ve işaretçiyle çakışacak OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçilerini veya etiketlerini gizleyin.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: İşaretçiyi yalnızca diğer işaretçilerle çakışmadığı durumlarda gösterin. Bu türden iki işaretçi çakışırsa daha yüksek zIndex değerine sahip olan gösterilir. Aynı zIndex öğesine sahipse dikey ekran konumu daha altta olan gösterilir.

Aşağıdaki örnekte bir işaretçi için çarpışma davranışının nasıl ayarlanacağı gösterilmektedir:

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

Etiketin çakışma davranışını kontrol etme

Bir işaretçinin iğnesinin ve etiket metninin çarpışma davranışını ayrı ayrı kontrol edebilirsiniz. Bazı durumlarda, bağlamı korumak için işaretçi iğnelerini ekranda görünür bırakırken etiketleri gizlemek faydalı olabilir. Bunu yapmak için <gmp-label-3d> öğesini <gmp-marker-3d> öğesinin kardeşi olarak ekleyin ve for özelliğini kullanarak bunları bağlayın.

Aşağıdaki kod örneğinde, bir işaretçiden ayrı olarak bir etiket için çakışma davranışının nasıl ayarlanacağı gösterilmektedir:

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