Çarpışma davranışını, yüksekliği ve görünürlüğü kontrol edin

Platform seçin: Android iOS JavaScript

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

  • Bir işaretçi için çakışma davranışını ayarlama
  • İşaretçi yüksekliğini belirleyin
  • İşaretçi görünürlüğünü harita yakınlaştırma düzeyine göre denetleyin

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

Çarpışma davranışı, bir işaretçinin çarpması (çakışması) durumunda nasıl görüntüleneceğini kontrol eder başka bir işaretçi kullanın. Çarpışma davranışı yalnızca vektör haritalarında desteklenir.

Çarpışma davranışı ayarlamak için AdvancedMarkerElement.collisionBehavior öğesini şunlardan birine ayarlayın: şu:

  • REQUIRED: (varsayılan) Çarpışma fark etmeksizin işaretçiyi her zaman görüntüle.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY İşaretçiyi yalnızca görünmüyorsa görüntüle başka işaretçilerle çakışıyor. Bu türden iki işaretçi çakışırsa, diğer işaretçilerden en yüksek zIndex değeri gösterilir. Bunların zIndex öğesi aynıysa dikey alt ekran konumu gösteriliyor.
  • REQUIRED_AND_HIDES_OPTIONAL Şunlardan bağımsız olarak işaretçiyi her zaman görüntüle: çakışmayı ayarlayın ve tüm OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçilerini veya etiketlerini gizleyin bir reklam öğesi seçin.

Aşağıdaki örnekte, bir işaretçi için çakışma davranışı ayarlama 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 belirleyin

Vektör haritalarında, bir işaretçinin göründüğü rakımı ayarlayabilirsiniz. Bu 3D harita içeriğiyle ilişkili olarak işaretçilerin doğru görünmesini sağlamak için yararlı olabilir. To bir işaretçi için rakım değeri olarak bir LatLngAltitude belirtin. MarkerView.position seçeneği:

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

İşaretçi görünürlüğünü harita yakınlaştırma düzeyine göre denetleyin

İşaretçileri görme görünürlük değişikliği (uzaklaştırmadan başlayın):

Gelişmiş işaretçinin görünürlüğünü kontrol etmek için zoom_changed oluşturun işleyiciyi seçin ve AdvancedMarkerElement.map öğesini Yakınlaştırma düzeyi, aşağıda gösterildiği gibi belirtilen düzeyi aşarsa null örnek:

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

İşaretleri tıklanabilir ve erişilebilir hale getirme