Çarpışma davranışını, irtifayı ve görünürlüğü kontrol etme

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ışmadan 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 ö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. Aynı zIndex değerine sahiplerse dikey ekran konumu daha düşük olan görüntü 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çinin yüksekliğini ayarlama

Vektör haritalarda, işaretçilerin göründüğü irtifayı 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 yüksekliğini ayarlamak için MarkerView.position seçeneğinin değeri olarak 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