web-dev-qa-db-fra.com

Désactiver le Ctrl + Faites défiler jusqu'à Zoom google maps

Est-ce que quelqu'un sait comment désactiver le CTRL + Scroll?

D'abord, lorsque la molette de la souris est déplacée, la carte effectue un zoom avant/arrière. Mais maintenant, il faut appuyer sur CTRL + Molette de la souris Faites défiler pour zoomer/dézoomer.

Comment désactivons-nous cette fonctionnalité? Je n'arrive pas à trouver quoi que ce soit dans la documentation:

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

enter image description here

javascriptgoogle-maps
78
Dawood Awan

Vous devez passer gestureHandling: 'greedy' à vos options de carte.

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

Par exemple:

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

Si vous acceptez de désactiver complètement le défilement pour zoomer, vous pouvez utiliser scrollwheel: false. L'utilisateur pourra toujours zoomer sur la carte en cliquant sur les boutons de zoom si vous lui fournissez le contrôle de zoom (zoomControl: true).

Documentation: https://developers.google.com/maps/documentation/javascript/reference (Recherchez "scrollwheel" dans la page)

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

Je ne pouvais pas obtenir le correctif gestureHandling: 'greedy' pour fonctionner car j'avais une superposition sur la carte. J'ai fini par détecter l'événement mousewheel et à définir la propriété ctrl sur 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 });
}
4
MisterMystery

Si vous souhaitez uniquement masquer la superposition tout en désactivant la possibilité de faire défiler et zoomer (comme avant), vous pouvez utiliser CSS pour masquer la superposition:

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

Notez que cela le masquera également pour le mobile, vous pouvez donc utiliser quelque chose comme ceci pour vous assurer qu'il affiche "utilisez deux doigts pour déplacer la carte":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}
1
Chumtarou

L'imbrication de gestureHandling dans une propriété options a fonctionné pour moi sur la version "3.35.6". 

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