web-dev-qa-db-ja.com

Ctrl +スクロールしてGoogleマップをズームする

誰もが無効にする方法を知っていますか CTRL + Scroll？

最初にマウスホイールを動かすと、地図はズームイン/ズームアウトします。しかし今、それは押すように求めます CTRL +マウスホイールズームイン/ズームアウトまでスクロールします。

この機能を無効にする方法私はドキュメンテーションで何かを見つけることができないようです：

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

enter image description here

javascriptgoogle-maps
78
Dawood Awan

あなたはあなたのマップオプションにgestureHandling: 'greedy'を渡す必要があります。

ドキュメント： https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

例えば：

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

Scroll-to-zoomを完全に無効にしても問題ない場合は、scrollwheel: falseを使用できます。ズームコントロール（zoomControl: true）を指定している場合、ユーザーはズームボタンをクリックして地図をズームできます。

ドキュメント： https://developers.google.com/maps/documentation/javascript/reference （ "scrollwheel"のページを検索）

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

地図の上にオーバーレイがあるので、私はgestureHandling: 'greedy'修正をうまく動かすことができませんでした。私はmousewheelイベントを検出し、ctrlプロパティを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

オーバーレイを非表示にするだけでスクロールとズームの機能を無効にしたい場合（前のように）、CSSを使用してオーバーレイを非表示にすることができます。

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

これはモバイルでも非表示になるので、「地図を移動するには2本の指を使ってください」と表示されるように、このようなものを使用してください。

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

gestureHandlingプロパティ内にoptionsを入れ子にすると、バージョン "3.35.6"でうまくいきました。

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