3D harita kontrolleri ve keşif

Platform seçin: Android iOS JavaScript

Denetimlere Genel Bakış

Maps JavaScript API'deki Photorealistic 3D Maps aracılığıyla gösterilen haritalarda, kullanıcının haritayla etkileşimini destekleyen kullanıcı arayüzü öğeleri bulunur. Kontroller olarak bilinen bu öğeleri kullanıcı arayüzüne ekleyip eklemeyeceğinizi seçebilirsiniz. Kullanıcı arayüzü kontrollerini devre dışı bıraksanız bile kullanıcı, klavye kısayollarını kullanarak haritada gezinebilir.

Maps JavaScript API'deki Photorealistic 3D Maps, ö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 Photorealistic 3D Maps tarafından gösterilen varsayılan denetim grubu gösterilmektedir:

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

Maps JavaScript'teki Photorealistic 3D Maps'te 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.
  • Eğme kontrolü, kameranın eğimini değiştirmenize olanak tanır.
  • Döndürme kontrolü, kameranın yönünü değiştirmenize olanak tanır.
  • Taşıma kontrolünde, haritanın merkezini değiştirmek için "←", "→", "↑" ve "↓" düğmeleri gösterilir.

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,
  defaultUIDisabled: 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>

Önceden ayarlanmış kamera rotaları

Maps JavaScript'teki Photorealistic 3D Maps, iki hazır kamera yolu sunar. Kamera yolları, animasyonun süresi değiştirilerek (böylece hız artırılır veya azaltılır) ya da daha sinematik deneyimler oluşturmak için birleştirilerek özelleştirilebilir.

Maps JavaScript'teki fotogerçekçi 3D Haritalar aşağıdaki kamera yollarını destekler:

  • flyCameraTo animasyonu, harita merkezinden belirtilen bir hedefe doğru uçar.
  • flyCameraAround animasyonu, haritada belirtilen sayıda tur boyunca bir nokta etrafında döner.

İlgi çekici bir noktaya uçmak, etrafında dönmek ve belirtilen zamanda durmak için iki mevcut yol birleştirilebilir.

Git

Aşağıdaki kod örneğinde, kameranın bir konuma uçmasını sağlayacak şekilde nasıl animasyon oluşturulacağı gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Uçarak dolaşma

Aşağıdaki kod örneğinde, kameranın bir konumun etrafında uçmasını sağlayacak şekilde nasıl animasyon oluşturulacağı gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Animasyonları birleştirme

Aşağıdaki kod örneğinde, kamerayı bir konuma uçurmak ve ilk animasyon sona erdiğinde konumun etrafında döndürmek için animasyonların nasıl birleştirileceği gösterilmektedir:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Sonraki adımlar