Peta Vektor

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

Peta vektor adalah peta Google yang sama dengan yang biasa digunakan pengguna Anda, dan menawarkan sejumlah keunggulan dibandingkan 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 Tampilan Overlay WebGL, kontrol arah dan kemiringan terprogram, kontrol kamera yang ditingkatkan, serta zoom pecahan yang lebih halus.

Mulai menggunakan Peta Vektor

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 melakukan zoom 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 menetapkan 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 pecahan diaktifkan; ini sangat berguna jika Anda belum secara eksplisit menetapkan isFractionalZoomEnabled ke true atau false. Contoh kode berikut memeriksa apakah zoom pecahan 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');
  }
});