Mengontrol peta dan kamera

Pilih platform: Android iOS JavaScript

Anda dapat mengontrol pergeseran kamera, ketinggian maksimum, atau membuat batas lintang dan bujur yang membatasi pergerakan pengguna dalam peta tertentu. Anda dapat melakukannya menggunakan batasan kamera.

Contoh berikut menampilkan peta dengan batas lokasi yang ditetapkan untuk membatasi pergerakan kamera:

Membatasi batas peta

Anda dapat membatasi batas geografis kamera dengan menyetel opsi bounds.

Contoh kode berikut menunjukkan cara membatasi batas peta:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Membatasi akses kamera

Anda dapat membatasi pergerakan kamera dengan menyetel salah satu opsi berikut:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

Contoh kode berikut menunjukkan cara membatasi kamera:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

Membatasi batas peta dan kamera

Anda dapat membatasi batas peta dan kamera secara bersamaan. Contoh kode berikut menunjukkan cara membatasi batas peta dan kamera:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Jalur kamera preset

Peta 3D 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 di Maps JavaScript mendukung jalur kamera berikut:

• Animasi flyCameraTo terbang dari tengah 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 ke 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,
    repeatCount: 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-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

Mengontrol penanganan gestur

Saat pengguna men-scroll halaman yang berisi peta, tindakan scroll dapat menyebabkan peta diperbesar secara tidak sengaja. Anda dapat mengontrol perilaku ini dengan menetapkan opsi peta gestureHandling.

gestureHandling: cooperative

Penanganan gestur "Kooperatif" memungkinkan pengguna men-scroll halaman tanpa memengaruhi zoom atau geser peta. Untuk melakukan zoom, pengguna dapat menggunakan kontrol, gestur dua jari (untuk perangkat layar sentuh), atau dengan menahan CMD/CTRL sambil men-scroll.

Kode berikut menunjukkan cara menyetel penanganan gestur ke "kooperatif":

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

Penanganan gestur "Greedy" bereaksi terhadap semua peristiwa scroll dan gestur sentuh.

gestureHandling: auto

Penanganan gestur "Otomatis" mengubah perilaku peta, bergantung pada apakah peta dimuat dalam <iframe> atau tidak, dan apakah halaman dapat di-scroll.

• Jika peta berada dalam <iframe>, penanganan gestur akan "kooperatif".
• Jika peta tidak berada dalam <iframe>, penanganan gestur akan "rakus".