Ç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çinin yüksekliğini ayarlama
  • İşaretçi görünürlüğünü harita yakınlaştırma seviyesine göre kontrol etme

İşaretçi için çarpış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 haritalarda desteklenir.

Çakışma davranışını ayarlamak için AdvancedMarkerElement.collisionBehavior değerini 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 örtüşmüyorsa gösterin. Bu türden iki işaretçi çakışırsa zIndex değeri daha yüksek olan işaretçi gösterilir. zIndex öğeleri aynıysa dikey ekran konumu daha düşük olan ekran gösterilir.
  • 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 çarpış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 belirleyin

Vektör haritalarında, bir işaretçinin göründüğü rakımı ayarlayabilirsiniz. Bu, işaretçilerin 3D harita içeriğiyle ilgili olarak doğru şekilde görünmesi 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 seviyesine göre kontrol etme

İşaretçilerin görünürlüğünün değiştiğini görebilirsiniz (yakınlaştırmayı azaltarak başlayın):

Gelişmiş İşaretçi'nin görünürlüğünü kontrol etmek için bir zoom_changeddinleyici oluşturun ve yakınlaştırma belirtilen seviyeyi aşarsa AdvancedMarkerElement.map değerini null olarak ayarlayacak koşullu bir işlev ekleyin. Aşağıdaki örnekte gösterildiği gibi:

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