İşaretçiler

Kullanıcının dikkatini haritadaki bir konuma çekmek için işaretçiler kullanın. Bu kılavuzda, 3D haritalarda işaretçilerin nasıl kullanılacağı ve özelleştirileceği gösterilmektedir. İşaretçilerin şeklini, boyutunu, rengini ve göründükleri yüksekliği kontrol edebilirsiniz. Aşağıdaki örnekte temel bir işaretçi gösterilmektedir:

Maps JavaScript'teki 3D Haritalar, her biri belirli kullanımlar için optimize edilmiş iki farklı işaretçi sınıfı sağlar. Aşağıdaki tabloda, mevcut iki sınıf arasındaki farklar ve denge unsurları gösterilmektedir:

Kapasite	MarkerElement	Marker3DElement
Özelleştirme	Yüksek (Özel HTML öğelerini, temel animasyon API'lerini vb. destekler.)	Düşük (Daha az özelleştirilebilir)
Performans	Daha düşük etkileşim performansı (çok sayıda işaretçiyle FPS düşüşleri)	Daha yüksek etkileşim performansı (Büyük veri kümelerini oluşturmak için optimize edilmiştir)
Önerilen kapasite	Yaklaşık 1.000 işaretçiye kadar güvenilir etkileşim performansı	1.000'den fazla işaretçiyi işlemek için önerilir.

Rengi, ölçeği ve simge resmini özelleştirme

Varsayılan işaretçinin arka planını, glifini, kenarlık rengini ve boyutunu özelleştirin.

Varsayılan işaretçi simgesini özel bir SVG kaynağıyla değiştirin.

İşaretçi yüksekliğini ayarlama

İşaretçiyi uzatarak ve yüksekliği ayarlayarak işaretçi yüksekliğini belirleyebilirsiniz.

İşaretçilerin tıklama ve klavye etkinliklerine yanıt vermesini sağlama

click etkinlik dinleyicisi ekleyerek işaretçinin tıklama ve klavye etkinliklerine yanıt vermesini sağlayın.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

İşaretçi çarpışma davranışını ayarlama

Bir işaretçinin başka bir işaretçiyle veya harita etiketiyle çarpıştığında nasıl davranacağını belirtin.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

İşaretçi performansı

Özel HTML işaretçileri (MarkerElement), standart 3D işaretçilere (Marker3DElement) kıyasla daha düşük performans sunar. 1.000'den fazla işaretçi içeren uygulamalarda optimum performans sağlamak için Marker3dElement sınıfının kullanılması önemle tavsiye edilir.

Sonraki adım

• İşaretçi ekleme