Question

在移动设备上，如果我想通过点击Google地图上的某个位置滚动页面并向下滚动，我仍会收到点击事件。

我看到＆＃34;用两根手指移动地图＆＃34;消息，页面按预期滚动但我收到后点击事件。我使用此单击事件添加标记。所以在这一点上，它搞乱了整个页面的行为。

这是一个简单的jsfiddle来重现（当然，在移动模式下，在chrome https://developers.google.com/web/tools/chrome-devtools/device-mode/上）：

只需在点击地图时向下滚动，然后在文字＆＃34;点击事件＆＃34;会弹出。

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

https://jsfiddle.net/83o1my1p/

Answer 1

我相信Google问题跟踪器中已经报告过此问题。看看以下错误：

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

随意添加明星以表达您的兴趣并订阅通知。另请注意，提交错误的人也找到了解决方法：

滚动后可以阻止点击，就像在桌面上使用时在dragend事件后阻止它们一样。正如我上面所说的，我通过处理mousedown事件并将其位置与click事件的位置进行比较来自行解决。

我希望这有帮助！

Answer 2

以下是我使用过的工作。

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

Answer 3

我的解决方案是使用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;
});

谷歌地图在手机上使用gestureHandling =合作仍然会触发点击事件

3 个答案: