Çarpışma davranışını, irtifayı ve görünürlüğü kontrol etme

Platform seçin: Android iOS JavaScript

Bu sayfada, Gelişmiş İşaretçiler'in aşağıdaki özelliklerini nasıl kontrol edeceğiniz gösterilmektedir:

  • İşaretçi için çakışma davranışını ayarlama
  • İşaretçi rakımını ayarlama
  • Harita yakınlaştırma seviyesine göre işaretçi görünürlüğünü kontrol etme

İşaretçi için çakışma davranışını ayarlama

Çakışma davranışı, bir işaretçinin başka bir işaretçiyle çakışması (üst üste binmesi) durumunda nasıl görüntüleneceğini kontrol eder. Çakışma davranışı yalnızca vektör haritalarda desteklenir.

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

  • REQUIRED: (varsayılan) Çakışmadan bağımsız olarak her zaman işaretçiyi gösterir.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY İşaretçiyi yalnızca diğer işaretçilerle çakışmıyorsa göster. Bu türden iki işaretçi çakışırsa zIndex değeri daha yüksek olan gösterilir. zIndex aynıysa dikey ekran konumu daha düşük olan gösterilir.
  • REQUIRED_AND_HIDES_OPTIONAL Çakışma olup olmadığına bakılmaksızın işaretçiyi her zaman gösterir ve işaretçiyle çakışacak tüm OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçileri veya etiketleri gizler.

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

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

İşaretçi rakımını ayarlama

Vektör haritalarda, işaretçinin görüneceği rakımı ayarlayabilirsiniz. Bu, işaretçilerin 3D harita içeriğine göre doğru şekilde görünmesini sağlamak için kullanışlıdır. Bir işaretçinin yüksekliğini ayarlamak için MarkerView.position seçeneğinin değeri olarak bir LatLngAltitude belirtin:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

Harita yakınlaştırma seviyesine göre işaretçi görünürlüğünü kontrol etme

İşaretçilerin görünürlüğünün nasıl değiştiğini görün (uzaklaştırarak başlayın):

Gelişmiş işaretçinin görünürlüğünü kontrol etmek için bir zoom_changed dinleyicisi oluşturun ve aşağıdaki örnekte gösterildiği gibi, yakınlaştırma belirtilen seviyeyi aşarsa AdvancedMarkerElement.map değerini null olarak ayarlamak için koşullu bir işlev ekleyin:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

Sonraki adımlar

İşaretçileri tıklanabilir ve erişilebilir hale getirme