Ctrl + Scroll to Scroll Googleマップを無効にする


95

CTRL+ を無効にする方法を知っている人はいますScrollか?

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

この機能を無効にするにはどうすればよいですか?ドキュメントに何も見つからないようです:

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

ここに画像の説明を入力してください



上記の機能に関連しない@BrajeshKanungo-これはGoogleマップで導入された新機能です-無効にしたいと思います。
Dawood Awan 2017

使用しているAPIのバージョンを教えてください。
Brajesh Kanungo 2017


これは私たちのサイトにも表示されたばかりなので、おそらくGoogle APIの更新
Tom

回答:


153

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

更新!Googleマップで3.35.6は、プロパティをオプションラッパーに入れる必要があります。

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

ealfonso新しい情報をありがとう


@DiegoAndrade私は詳細を知りません。多分それは当時実装されていませんでした。ただし、バージョン3.29(凍結)、3.30(リリース)、およびそれ以上(3.exp、実験的)に存在します。
カノ2017年

はい@Kano、これらのドキュメントではこの機能はまだ存在していますが、私のテストでは機能していません。彼らがなぜこれを削除したのか本当にわかりません:(
Diego Andrade '23

1
私はそれが存在することを知っています。それがポイントです。で始まる3.30それは働いていません。私はこれらすべてのバージョンをテストしました。とにかく、今ではで動作してい3.26ます。
Diego Andrade

3
最後に正しい答え。これを長時間ググってくれました。グーグルがこれをデフォルトにしない理由は私を超えています。
2018年

2
ビンゴ、これは完璧なソリューションです。
Nカーン

17

スクロールしてズームを完全に無効にしても問題ない場合は、を使用できます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
});

7

オーバーレイを非表示にするだけで、スクロールとズームの機能を無効にする場合(以前と同様)、CSSを使用してオーバーレイを非表示にすることができます。

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

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

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

ありがとうございました。多くの人がこれを望まないことに驚いています。これは、私にとって地図体験を事実上破壊する、非常に煩わしいオーバーレイメッセージです。
BaseZen

5

プロパティgestureHandling内でのネストは、optionsバージョン「3.35.6」で機能しました。

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

4

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 });
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.