Ç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çi başka bir işaretçiyle çakıştığında (çakıştığında) nasıl görüntüleneceğini kontrol eder. Çarpışma davranışı yalnızca vektör haritalarında desteklenir.

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

  • 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 diğer işaretçilerle çakışmıyorsa görüntüleyin. Bu türden iki işaretçi çakışırsa zIndex değeri daha yüksek olan işaretçi gösterilir. Bunlar aynı zIndex değerine sahipse dikey ekran konumu daha düşük olan ekran gösterilir.
  • REQUIRED_AND_HIDES_OPTIONAL Çarpışma fark etmeksizin işaretçiyi her zaman görüntüleyin ve işaretleyiciyle çakışan tüm OPTIONAL_AND_HIDES_LOWER_PRIORITY işaretçilerini 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 haritalarında, bir işaretçinin göründüğü rakımı ayarlayabilirsiniz. Bu, işaretçilerin 3D harita içeriğiyle ilişkili olarak doğru şekilde görünmesini 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 bir 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

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

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

Bir Gelişmiş İşaretçinin görünürlüğünü kontrol etmek için bir zoom_changed işleyici oluşturun ve yakınlaştırma, aşağıdaki örnekte gösterildiği gibi belirtilen düzeyi aşıyorsa AdvancedMarkerElement.map öğesini null olarak ayarlamak için 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

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