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

Platform seçin: Android iOS JavaScript

Bu sayfada, gelişmiş işaretçilerin aşağıdaki yönlerini nasıl kontrol edeceğiniz gösterilmektedir:

  • İşaretçi için çakışma davranışını ayarlama
  • İşaretçi yüksekliğini ayarlama
  • Harita yakınlaştırma düzeyine 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 gelmesi) 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 işaretçiyi her zaman gösterir.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY İşaretçiyi yalnızca diğer işaretçilerle çakışmıyorsa gösterin. Bu türden iki işaretçi çakışırsa daha yüksek zIndex değerine sahip olan gösterilir. Aynı zIndex öğesine sahiplerse dikey ekran konumu daha altta olan gösterilir.
  • REQUIRED_AND_HIDES_OPTIONAL Çakışmadan bağımsız olarak işaretçiyi her zaman göster ve işaretçiyle çakışacak OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçileri veya etiketleri gizle.

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: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    map,
    collisionBehavior: collisionBehavior,
});
index.js

İşaretçi yüksekliğini ayarlama

Vektör haritalarda, bir işaretçinin görüneceği yüksekliği ayarlayabilirsiniz. Bu, işaretlerin 3D harita içeriğiyle ilişkili olarak 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 LatLngAltitude belirtin:

TypeScript

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

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

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

İşaretlerin görünürlüğünün değiştiğini görün (önce uzaklaştırın):

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

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

Sonraki adımlar

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