3D harita kontrolleri ve keşif

Platform seçin: Android iOS JavaScript

Kontrollere Genel Bakış

Maps JavaScript API'deki 3D Haritalar aracılığıyla görüntülenen haritalar, kullanıcının haritayla etkileşimini desteklemek için keşif kontrolleri olarak bilinen kullanıcı arayüzü öğeleri içerir. Keşif kontrolleri, harita kullanıcı arayüzünde varsayılan olarak gösterilir ancak basitlik sağlamak veya özel kontrollere yer bırakmak için devre dışı bırakılabilir. Kullanıcı arayüzü kontrolleri devre dışı bırakıldığında, Harita Üzerinde Keşif için klavye kısayollarının kullanılabildiğini unutmayın.

Maps JavaScript API'deki 3D haritalar, önceden ayarlanmış kamera yollarını kullanarak kullanıcılarınıza haritada rehberlik etmeyi de destekler. Bu yollar, zengin 3D deneyimler oluşturmak için özelleştirilebilir ve birleştirilebilir.

Keşif kontrolleri

Aşağıdaki resimde, Maps JavaScript API'deki 3D haritalar tarafından gösterilen varsayılan kontrol grubu gösterilmektedir:

Kontrollerin bulunduğu harita resmi

Maps JavaScript'teki 3D haritalarda bulunan tüm kontrollerin listesini aşağıda bulabilirsiniz:

  • Yakınlaştırma kontrolü, haritanın yakınlaştırma seviyesini değiştirmek için "+" ve "-" düğmelerini gösterir.
  • Taşıma kontrolü, haritanın merkezini değiştirmek için "←", "→", "↑" ve "↓" düğmelerini gösterir.
  • Döndürme kontrolleri, kameranın yönünü değiştirmenize olanak tanır.
  • Eğme kontrolü, kameranın eğimini değiştirmenize olanak tanır.
  • Pusula kontrolü, pusulanın kuzey yönünü gösterir ve kameranın kuzey yönüne sıfırlanmasına olanak tanır.

Aşağıdaki kod örneğinde, keşif kontrollerinin nasıl açılıp kapatılacağı gösterilmektedir:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Sonraki adımlar