gestureHandling = cooperativeでモバイル上のGoogleマップでもクリックイベントが発生する

Question

モバイルデバイスでは、Googleマップのどこかをクリックしてスクロールしてページをスクロールしたい場合でも、引き続きクリックイベントが発生します。

"マップを移動するために2本の指を使用する"メッセージが表示され、ページが予想どおりにスクロールしていますが、その後にクリックイベントが表示されます。そして、このクリックイベントを使ってマーカーを追加します。したがって、この時点では、ページ全体の動作が乱れています。ここで

は（当然のモバイル上、またはクロムhttps://developers.google.com/web/tools/chrome-devtools/device-mode/にモバイルモード）を再生するための簡単なjsfiddleです：

「イベントをクリックして」テキストをマップし、アラートをクリックするとポップアップしますしながら、ジャストスクロールダウン。

google.maps.event.addListener(map, 'click', function (evt) { 
    alert("Click Event"); 
}); 

https://jsfiddle.net/83o1my1p/

Answer 1

私の解決方法は、varを使用して、タッチイベントで状態を変更することです。クリックイベントでそれを使用してください：

var dragged = false; 

google.maps.event.addListener(map, 'click', function (evt) { 
    if (!dragged) { 
     // Do stuff here 
    } 
}); 

google.maps.event.addDomListener(canvas, 'touchmove', function (event) { 
    if (event.touches.length == 1) { 
     dragged = true; 
    } 
}); 

google.maps.event.addDomListener(canvas, 'touchend', function(event) { 
    dragged = false; 
}); 

Answer 2

私はこの問題は既にGoogleの問題追跡に報告されていると信じています。

https://issuetracker.google.com/issues/64586414

があなたの関心を表明し、通知をサブスクライブするバグにスターを追加すること自由に感じなさい：以下のバグを見ています。また、バグを報告した人も回避策を見つけたことに注意してください。

クリックは、デスクトップで使用するときにドラッグイベントが発生したときと同様に、スクロール後に防止できます。上で述べたように、私はmousedownイベントを処理し、その場所をclickイベントの場所と比較することで、自分自身で取り組みました。

この情報が役立ちますようにお願いいたします。

Answer 3

ここでは私が使用している作品です。

var mouseDownPos = null; 

google.maps.event.addListener(map, 'mousedown', function(e) { mouseDownPos = e.pixel }); 
google.maps.event.addListener(map, 'click', function(e) { 
    var mouseUpPos = e.pixel; 
    var distance = Math.sqrt(Math.pow(mouseDownPos.x - mouseUpPos.x, 2) + Math.pow(mouseDownPos.y - mouseUpPos.y, 2)); 
    if(distance > 10) return; // Adjust for tolerance 

    // Do what you need here 
});