Nonaktifkan Ctrl + Gulir ke Zoom google maps

97

Apakah ada yang tahu cara menonaktifkan CTRL+ Scroll?

Pertama saat roda mouse digerakkan, Peta akan Memperbesar / memperkecil. Tapi sekarang diminta untuk menekan CTRL+ Gulir Roda Mouse untuk Memperbesar / memperkecil.

Bagaimana cara kami menonaktifkan fitur ini? Sepertinya saya tidak dapat menemukan apa pun di dokumentasi:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

masukkan deskripsi gambar di sini

javascript google-maps Dawood Awan
sumber
tautan ini dapat membantu Anda stackoverflow.com/questions/21992498/…
Brajesh Kanungo
@BrajeshKanungo yang tidak terkait dengan fitur di atas - ini adalah fitur baru yang diperkenalkan oleh Google Maps - Saya ingin menonaktifkannya.
Dawood Awan
Oke, bisakah Anda memberi tahu saya versi API yang Anda gunakan.
Brajesh Kanungo
versi terbaru - maps.googleapis.com/maps/api/js?v=3.exp
Dawood Awan
Ini baru saja muncul di situs kami juga, jadi mungkin pembaruan pada API Google
Tom

Jawaban:

154

Anda harus melewati gestureHandling: 'greedy'opsi peta Anda.

Dokumentasi: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

Sebagai contoh:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});

Memperbarui! Karena Google Maps 3.35.6Anda perlu membungkus properti menjadi pembungkus opsi:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

Terima kasih ealfonsoatas info barunya

kano
sumber
@DiegoAndrade Saya tidak mengetahui detailnya. mungkin itu tidak diterapkan saat itu. Tapi itu ada pada versi 3.29(beku), 3.30(rilis) dan ke atas ( 3.exp, eksperimental).
kano
Ya @Kano, dalam dokumen ini fitur ini masih ada, tetapi pada pengujian saya di sini fitur ini tidak berfungsi. Saya benar-benar tidak tahu mengapa mereka menghapus ini :(
Diego Andrade
1
Saya tahu itu ada. Itulah intinya. Dimulai dengan 3.30Itu tidak berhasil. Saya menguji semua versi ini. Bagaimanapun, itu bekerja sekarang dengan 3.26.
Diego Andrade
3
akhirnya jawaban yang benar. Butuh waktu lama untuk googling untuk ini. Mengapa google tidak menjadikan ini default berada di luar kemampuan saya.
woens
2
Bingo, ini adalah solusi yang tepat.
N Khan
17

Jika Anda setuju dengan menonaktifkan scroll-to-zoom sepenuhnya, Anda dapat menggunakan scrollwheel: false. Pengguna masih dapat memperbesar peta dengan mengklik tombol zoom jika Anda memberi mereka kontrol zoom (zoomControl: true ).

Dokumentasi: https://developers.google.com/maps/documentation/javascript/reference (telusuri halaman untuk "scrollwheel")

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});
Brendan Benson
sumber
7

Jika Anda hanya ingin menyembunyikan overlay tetapi masih menonaktifkan kemampuan untuk menggulir dan memperbesar (seperti sebelumnya), Anda dapat menggunakan CSS untuk menyembunyikan overlay:

.gm-style-pbc {
opacity: 0 !important;
}

Perhatikan bahwa ini juga akan menyembunyikannya untuk seluler sehingga Anda dapat menggunakan sesuatu seperti ini untuk memastikannya menunjukkan "gunakan dua jari untuk memindahkan peta":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}
Chumtarou
sumber
Terima kasih. Saya terkejut lebih banyak orang tidak menginginkan ini. Ini adalah pesan overlay yang sangat mengganggu yang secara virtual menghancurkan pengalaman peta bagi saya.
BaseZen
5

Menyarangkan di gestureHandlingdalam optionsproperti bekerja untuk saya pada versi "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });
ealfonso
sumber
4

Saya tidak bisa mendapatkan gestureHandling: 'greedy'perbaikan untuk saya karena saya memiliki overlay di atas peta. Saya akhirnya mendeteksi mousewheelperistiwa tersebut dan menyetel ctrlproperti menjadi true.

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);         

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}
MisterMystery
sumber