Ç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çi'lerin aşağıdaki özelliklerini nasıl kontrol edeceğiniz gösterilmektedir:

  • İşaretçi için çarpışma davranışını ayarlama
  • İşaretçi yüksekliğini belirleyin
  • İşaretçi görünürlüğünü harita yakınlaştırma seviyesine göre kontrol etme

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

Çarpışma davranışı, bir işaretçi başka bir işaretçiyle çarpıştığında (örtüştüğünde) nasıl gösterileceğini kontrol eder. Ç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ışmadan bağımsız olarak işaretçiyi her zaman göster.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY İşaretçiyi yalnızca görünmüyorsa görüntüle diğer işaretçilerle çakışıyor. Bu türden iki işaretçi çakışırsa zIndex değeri daha yüksek olan işaretçi gösterilir. Bunların zIndex öğesi aynıysa alt dikey ekran konumu gösteriliyor.
  • REQUIRED_AND_HIDES_OPTIONAL Çarpışmadan bağımsız olarak işaretçiyi her zaman gösterin ve işaretçiyle örtüşecek OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçileri veya etiketleri gizleyin.

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 haritalarda, işaretçilerin göründüğü irtifayı 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çinin rakımını değiştirirseniz, LatLngAltitude 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çilere bakın 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

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