3D harita kontrolleri ve keşif

Platform seçin: Android iOS JavaScript

Denetimlere Genel Bakış

Maps JavaScript API'deki 3D Haritalar aracılığıyla gösterilen haritalar, kullanıcıları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 için veya özel kontrollere yer bırakmak amacıyla devre dışı bırakılabilir. Harita keşfi için klavye kısayollarının, kullanıcı arayüzü kontrolleri devre dışı bırakıldığında kullanılabildiğini unutmayın.

Maps JavaScript API'deki 3D Haritalar, önceden ayarlanmış kamera yollarını kullanarak kullanıcılarınıza haritada yol göstermeyi 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 görüntüsü

Aşağıda, Maps JavaScript'teki 3D Haritalar'da bulunan tüm kontrollerin listesi verilmiştir:

  • Yakınlaştırma denetimi, haritanın yakınlaştırma düzeyini değiştirmek için "+" ve "-" düğmelerini gösterir.
  • Taşıma kontrolünde, haritanın merkezini değiştirmek için "←", "→", "↑" ve "↓" düğmeleri gösterilir.
  • 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 kontrollerini açma/kapatma işlemi 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