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 varsayılan olarak harita kullanıcı arayüzünde 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ılabileceğ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 denetim grubu gösterilmektedir:

Kontrollerin bulunduğu haritanın görüntüsü

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

  • 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 denetimi, 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 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