Deaktivieren Sie Strg + Bildlauf zum Zoomen von Google Maps

Weiß jemand, wie man das CTRL+ deaktiviert Scroll?

Wenn das Mausrad bewegt wurde, wurde die Karte zuerst vergrößert / verkleinert. Jetzt werden Sie aufgefordert, CTRL+ Mausrad zu drücken, um die Ansicht zu vergrößern oder zu verkleinern.

Wie deaktivieren wir diese Funktion? Ich kann anscheinend nichts in der Dokumentation finden:

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

Sie müssen gestureHandling: 'greedy'an Ihre Kartenoptionen übergeben.

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

Beispielsweise:

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

Aktualisieren! Seit Google Maps müssen 3.35.6Sie die Eigenschaft in einen Options-Wrapper einschließen:

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

Danke ealfonsofür die neuen Infos

Wenn Sie das Scrollen zum Zoomen vollständig deaktivieren können, können Sie verwenden scrollwheel: false. Der Benutzer kann die Karte weiterhin durch Klicken auf die Zoomschaltflächen zoomen, wenn Sie ihnen die Zoomsteuerung ( zoomControl: true) zur Verfügung stellen.

Dokumentation: https://developers.google.com/maps/documentation/javascript/reference (suchen Sie auf der Seite nach "Scrollwheel")

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

Wenn Sie nur die Überlagerung ausblenden und dennoch die Möglichkeit zum Scrollen und Zoomen (wie zuvor) deaktivieren möchten, können Sie die Überlagerung mithilfe von CSS ausblenden:

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

Beachten Sie, dass dies auch für Mobilgeräte ausgeblendet wird, sodass Sie Folgendes verwenden können, um sicherzustellen, dass "Verschieben Sie die Karte mit zwei Fingern" angezeigt wird:

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

Das Verschachteln gestureHandlinginnerhalb einer optionsEigenschaft funktionierte für mich in Version "3.35.6".

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

Ich konnte das gestureHandling: 'greedy'Update nicht zum Laufen bringen, da ich eine Überlagerung über der Karte hatte. Am Ende habe ich das mousewheelEreignis erkannt und die ctrlEigenschaft auf true gesetzt.

// 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 });
}