Ç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çiler'in şu özelliklerini nasıl kontrol edeceğiniz gösterilmektedir:

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

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

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

Çarpışma davranışını belirlemek için AdvancedMarkerElement.collisionBehavior değerini aşağıdakilerden birine ayarlayın:

  • REQUIRED: (varsayılan) Çarpışmalardan bağımsız olarak işaretçiyi her zaman göster.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY İşaretçiyi, yalnızca diğer işaretçilerle çakışmadığında görüntüleyin. Bu türdeki iki işaretçi çakışırsa daha yüksek zIndex değerine sahip olan gösterilir. Ekran konumu aynıysa zIndex dikey ekran konumuna sahip olan gösterilir.
  • REQUIRED_AND_HIDES_OPTIONAL Çarpışmalardan bağımsız olarak işaretçiyi her zaman görüntüleyin ve işaretçiyle çakışacak OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçisini veya etiketleri gizleyin.

Aşağıdaki örnekte, bir işaretçi için çakışma davranışı ayarlanma şekli 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 rakımını ayarla

Vektör haritalarında, bir işaretçinin göründüğü rakımı ayarlayabilirsiniz. Bu, işaretçilerin 3D harita içeriğine göre doğru şekilde görüntülenmesini sağlamak için yararlıdır. Bir işaretçinin rakımını ayarlamak için MarkerView.position seçeneğinin değeri olarak LatLngAltitude değerini 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

İşaretçilerin görünürlük değişikliğine bakın (uzaklaştırmayla başlayın):

Bir Gelişmiş İşaretçi'nin görünürlüğünü kontrol etmek için bir zoom_changed işleyicisi oluşturun ve aşağıdaki örnekte gösterildiği gibi yakınlaştırma, belirtilen düzeyi aşarsa AdvancedMarkerElement.map özelliğini null değerine ayarlamak için bir koşullu 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