Mengontrol Fungsi Zoom dan Geser

Pilih platform: Android iOS JavaScript

Ringkasan

Penggunaan peta di halaman web mungkin memerlukan opsi tertentu untuk mengontrol cara pengguna berinteraksi dengan peta untuk melakukan zoom dan menggeser. Opsi ini, seperti gestureHandling, minZoom, maxZoom, dan restriction, ditentukan dalam antarmuka MapOptions.

Perilaku Default

Peta berikut menunjukkan perilaku default untuk interaksi peta dengan instance peta yang dibuat hanya dengan opsi zoom dan center yang ditentukan.

Berikut adalah kode untuk peta ini.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

Mengontrol Penanganan Gestur

Jika pengguna men-scroll halaman yang berisi peta, tindakan scroll dapat memperbesar peta secara tidak sengaja. Perilaku ini dapat dikontrol menggunakan opsi peta gestureHandling.

gestureHandling: cooperative

Peta di bawah ini menggunakan opsi gestureHandling yang ditetapkan ke cooperative, yang memungkinkan pengguna men-scroll halaman secara normal, tanpa melakukan zoom pada peta atau menggesernya. Pengguna dapat melakukan zoom pada peta dengan mengklik kontrol zoom. Pengguna juga dapat melakukan zoom dan menggeser dengan menggunakan gerakan dua jari pada peta untuk perangkat layar sentuh.

Berikut adalah kode untuk peta ini.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

Lihat Contoh

gestureHandling: auto

Peta di bagian atas halaman tanpa opsi gestureHandling memiliki perilaku yang sama seperti peta sebelumnya dengan gestureHandling ditetapkan ke cooperative, karena semua peta di halaman ini berada dalam <iframe>. Nilai gestureHandling default auto beralih antara greedy dan cooperative berdasarkan pada apakah peta dimuat dalam <iframe>.

Peta dimuat dalam <iframe> Perilaku
ya cooperative
tidak greedy

gestureHandling: greedy

Berikut adalah peta dengan gestureHandling yang ditetapkan ke greedy. Peta ini bereaksi terhadap semua gestur sentuh dan peristiwa scroll tidak seperti cooperative.

gestureHandling: none

Opsi gestureHandling juga dapat ditetapkan ke none untuk menonaktifkan gestur pada peta.

Menonaktifkan fungsi Geser dan Zoom

Untuk sepenuhnya menonaktifkan kemampuan menggeser dan melakukan zoom pada peta, dua opsi, gestureHandling dan zoomControl, harus disertakan.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

Peta di bawah ini menunjukkan kombinasi gestureHandling dan zoomControl dalam kode di atas.

Membatasi Batas Peta dan Zoom

Anda dapat mengaktifkan gestur dan kontrol zoom, tetapi membatasi peta ke batas tertentu atau zoom minimum dan maksimum. Untuk melakukannya, Anda dapat menetapkan opsi restriction, minZoom, dan maxZoom. Kode dan peta berikut menunjukkan opsi ini.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js