Eksplorasi dan kontrol peta 3D

Pilih platform: Android iOS JavaScript

Ringkasan Kontrol

Peta yang ditampilkan melalui Peta 3D Fotorealistik di Maps JavaScript API berisi elemen UI untuk mendukung interaksi pengguna dengan peta. Elemen ini dikenal sebagai kontrol dan Anda dapat memilih untuk menyertakannya di UI atau tidak. Jika Anda menyembunyikan kontrol UI, pengguna tetap dapat menjelajahi peta menggunakan pintasan keyboard.

Peta 3D Fotorealistik di Maps JavaScript API juga mendukung pemandu pengguna di sekitar peta menggunakan jalur kamera preset. Jalur ini dapat disesuaikan dan digabungkan untuk menciptakan pengalaman 3D yang kaya.

Kontrol eksplorasi

Gambar berikut menunjukkan kumpulan kontrol default yang ditampilkan oleh Peta 3D Fotorealistik di Maps JavaScript API:

Gambar peta dengan kontrol yang ada

Berikut adalah daftar rangkaian kontrol lengkap di Peta 3D Fotorealistik di Maps JavaScript:

  • Kontrol zoom menampilkan tombol "+" dan "-" untuk mengubah tingkat zoom peta.
  • Kontrol kemiringan memungkinkan Anda mengubah kemiringan kamera.
  • Kontrol Putar memungkinkan Anda mengubah arah kamera.
  • Kontrol pindah menampilkan tombol "←", "→", "↑", dan "↓" untuk mengubah pusat peta.

Contoh kode berikut menunjukkan cara mengganti kontrol eksplorasi:

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>

Jalur kamera preset

Peta 3D Fotorealistik di Maps JavaScript menyediakan dua jalur kamera preset. Jalur kamera dapat disesuaikan dengan mengubah durasi animasi (sehingga meningkatkan atau mengurangi kecepatan), atau dengan menggabungkannya untuk menciptakan pengalaman yang lebih sinematik.

Peta 3D Fotorealistik di Maps JavaScript mendukung jalur kamera berikut:

  • Animasi flyCameraTo terbang dari pusat peta ke tujuan yang ditentukan.
  • Animasi flyCameraAround berputar di sekitar titik pada peta dengan jumlah putaran yang ditentukan.

Dua jalur yang tersedia dapat digabungkan untuk terbang ke tempat menarik, berputar di sekitarnya, lalu berhenti saat ditentukan.

Terbang ke

Contoh kode berikut menunjukkan cara menganimasikan kamera untuk terbang ke suatu lokasi:

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
  });
}

Terbang di sekitar

Contoh kode berikut menunjukkan cara menganimasikan kamera untuk terbang di sekitar lokasi:

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

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

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

Menggabungkan animasi

Contoh kode berikut menunjukkan cara menggabungkan animasi untuk menerbangkan kamera ke suatu lokasi, lalu memutar di sekitar lokasi saat animasi pertama berakhir:

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});
}

Langkah berikutnya