javascript - street - Deshabilite Ctrl+Desplazarse para hacer zoom en google maps

street view google maps js

Question

¿Alguien sabe cómo deshabilitar CTRL + Scroll ?

Primero, cuando se movía la rueda del mouse, el Mapa se acercaría / alejaría. Pero ahora pide presionar CTRL + Desplazamiento de la rueda del mouse para acercar / alejar.

¿Cómo deshabilitamos esta función? Parece que no puedo encontrar nada en la documentación:

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

Answer 1

Anidar el gestureHandling dentro de una propiedad de options funcionó para mí en la versión "3.35.6".

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

Answer 2

No pude obtener el gestureHandling: ''greedy'' la gestureHandling: ''greedy'' me funcionó porque tenía una superposición en el mapa. Terminé detectando el evento mousewheel y estableciendo la propiedad ctrl en 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 });
}

Answer 3

Si está de acuerdo con deshabilitar por completo el desplazamiento para hacer zoom, puede usar scrollwheel: false . El usuario aún podrá hacer zoom en el mapa haciendo clic en los botones de zoom si le proporciona el control de zoom ( zoomControl: true ).

Documentación: https://developers.google.com/maps/documentation/javascript/reference (busque en la página "scrollwheel")

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

Answer 4

Si solo desea ocultar la superposición pero deshabilita la capacidad de desplazamiento y zoom (como antes), puede usar CSS para ocultar la superposición:

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

Tenga en cuenta que esto también lo ocultará para dispositivos móviles, por lo que podría usar algo como esto para asegurarse de que muestra "use dos dedos para mover el mapa":

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

Answer 5

gestureHandling: ''greedy'' pasar gestureHandling: ''greedy'' a sus opciones de mapa.

Documentación: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

Por ejemplo:

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