Google Maps快速触发dragstart/dragend后丢失mousemove事件监听器问题

问题确认 #

快速点击地图时，Google Maps事件系统会误触发dragstart与dragend事件对，导致地图内部鼠标事件状态紊乱，自定义绑定的mousemove监听器因此失效，仅能响应mousedown；拖拽或缩放地图后，内部状态重置，监听器恢复正常。该问题可在官方事件工具中复现。

解决方案 #

方案1：手动修正异常状态

在mousedown事件中检查地图拖拽状态，若处于非拖拽状态却出现异常，手动触发mouseup重置状态：

google.maps.event.addListener(map, 'mousedown', function(e) {
  if (!map.get('dragging')) {
    google.maps.event.trigger(map, 'mouseup', e);
  }
});

方案2：过滤误触发的dragstart事件

通过判断mousedown与dragstart的时间差，拦截短时间内触发的误判拖拽事件：

let mousedownTimestamp = 0;

google.maps.event.addListener(map, 'mousedown', function() {
  mousedownTimestamp = Date.now();
});

google.maps.event.addListener(map, 'dragstart', function(e) {
  if (Date.now() - mousedownTimestamp < 100) {
    e.preventDefault();
    google.maps.event.trigger(map, 'dragend', e);
  }
});

方案3：基于拖拽状态控制mousemove逻辑

通过标记拖拽状态，仅在非拖拽时处理mousemove逻辑，避免状态异常影响：

let isDragging = false;

google.maps.event.addListener(map, 'dragstart', () => isDragging = true);
google.maps.event.addListener(map, 'dragend', () => isDragging = false);

google.maps.event.addListener(map, 'mousemove', function(e) {
  if (!isDragging) {
    // 此处编写你的mousemove业务逻辑
  }
});

内容的提问来源于stack exchange，提问作者gargara123456