Deaktivieren Sie Strg + Bildlauf zum Zoomen von Google Maps

95

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

javascript google-maps

— Dawood Awan
quelle

Dieser Link kann Ihnen helfen stackoverflow.com/questions/21992498/…

— Brajesh Kanungo

@BrajeshKanungo, das nicht mit der oben genannten Funktion zusammenhängt - dies ist eine neue Funktion, die von Google Maps eingeführt wurde - ich möchte sie deaktivieren.

— Dawood Awan

Ok, können Sie mir sagen, welche API-Version Sie verwenden?

— Brajesh Kanungo

die neueste Version - maps.googleapis.com/maps/api/js?v=3.exp

— Dawood Awan

Dies ist gerade auch auf unserer Website erschienen, also wahrscheinlich ein Update auf Googles API

— Tom

153

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

— kano
quelle

@DiegoAndrade Mir sind die Details nicht bekannt. Vielleicht wurde es damals nicht implementiert. Aber es ist in Versionen 3.29(eingefroren), 3.30(Release) und höher ( 3.exp, experimentell) vorhanden.

— Kano

Ja @Kano, in diesen Dokumenten ist diese Funktion noch vorhanden, aber bei meinen Tests hier funktioniert sie nicht. Ich weiß wirklich nicht, warum sie das entfernt haben :(

— Diego Andrade

1

Ich weiß, dass es vorhanden ist. Das ist der Punkt. Beginnen mit 3.30Es funktioniert nicht. Ich habe alle diese Versionen getestet. Wie auch immer, es funktioniert jetzt mit 3.26.

— Diego Andrade

3

Endlich die richtige Antwort. Ich habe lange dafür gegoogelt. Warum Google dies nicht zum Standard gemacht hat, ist mir ein Rätsel.

— woens

2

Bingo, das ist die perfekte Lösung.

— N Khan

17

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

— Brendan Benson
quelle

7

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

— Chumtarou
quelle

Danke dir. Ich bin überrascht, dass mehr Leute das nicht wollen. Es ist eine sehr ablenkende Overlay-Nachricht, die das Kartenerlebnis für mich praktisch zerstört.

— BaseZen

5

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

— ealfonso
quelle

4

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

— MisterMystery
quelle