Peta Vektor

Maps JavaScript API menawarkan dua implementasi peta yang berbeda: raster dan vektor. Peta raster dimuat secara default, dan memuat peta sebagai petak ubin gambar raster berbasis piksel, yang dihasilkan oleh sisi server Google Maps Platform, lalu ditayangkan ke aplikasi web Anda. Peta vektor terdiri dari ubin berbasis vektor, yang digambar pada waktu pemuatan pada sisi klien menggunakan WebGL, teknologi web yang memungkinkan browser untuk mengakses GPU pada perangkat pengguna untuk merender grafis 2D dan DD.

Peta vektor adalah peta Google yang sama dengan yang digunakan pengguna Anda, dan menawarkan sejumlah keuntungan dibandingkan dengan peta ubin raster default, terutama ketajaman gambar berbasis vektor dan penambahan bangunan 3D pada tingkat zoom yang dekat. Peta vektor juga mendukung beberapa fitur baru, seperti kemampuan untuk menambahkan konten 3D dengan WebGL Overlay View, kemiringan terprogram dan kontrol heading, kontrol kamera yang ditingkatkan, serta zoom fraksional untuk zoom yang lebih lancar.

Mulai menggunakan Vector Maps

Mengontrol kamera

Gunakan fungsi map.moveCamera() untuk memperbarui kombinasi properti kamera sekaligus. map.moveCamera() menerima satu parameter yang berisi semua properti kamera yang akan diperbarui. Contoh berikut menunjukkan pemanggilan map.moveCamera() untuk menetapkan center, zoom, heading, dan tilt sekaligus:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Anda dapat menganimasikan properti kamera dengan memanggil map.moveCamera() menggunakan loop animasi, seperti yang ditunjukkan di sini:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Zoom Pecahan

Peta vektor mendukung zoom pecahan, yang memungkinkan Anda memperbesar menggunakan nilai pecahan, bukan bilangan bulat. Meskipun peta raster dan vektor mendukung zoom pecahan, zoom pecahan akan diaktifkan secara default untuk peta vektor, dan dinonaktifkan secara default untuk peta raster. Gunakan opsi peta isFractionalZoomEnabled untuk mengaktifkan dan menonaktifkan zoom pecahan.

Contoh berikut menunjukkan pengaktifan zoom pecahan saat menginisialisasi peta:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

Anda juga dapat mengaktifkan dan menonaktifkan zoom pecahan dengan menyetel opsi peta isFractionalZoomEnabled seperti yang ditunjukkan di sini:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Anda dapat menetapkan pemroses untuk mendeteksi apakah zoom fraksional diaktifkan atau tidak. Ini sangat berguna jika Anda belum menetapkan isFractionalZoomEnabled secara eksplisit ke true atau false. Kode contoh berikut memeriksa apakah zoom fraksional diaktifkan atau tidak:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});