在 Google Map API 中挂钩鼠标滚轮事件答案

【问题标题】：Hooking into mousewheel event in Google Map API在 Google Map API 中挂钩鼠标滚轮事件
【发布时间】：2013-09-17 20:34:50
【问题描述】：

是否可以在 Google Map API 中挂钩鼠标滚轮事件？无需赘述，我需要鼠标滚轮像通常在 Google 地图中一样进行缩放，但我还需要附加到鼠标滚轮事件以用于其他目的。

但是，每当我在 MapOptions 中将滚轮设置为 true 时，Google Map API 都会占用所有鼠标滚轮事件并拒绝共享它们（您不觉得非常自我中心吗？）！

收听诸如 zoom_changed 之类的 Google Map 事件将不起作用，因为如果地图处于最小或最大缩放级别，它们不会触发，这是我需要的。更具体地说，我需要知道用户是否在已经处于最大缩放级别时尝试拉近。

这“感觉”是可以解决的，但我的直觉并不总是正确的:-)

有什么想法吗？

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

您可以通过使用普通的 DOM 事件侦听器来做到这一点。唯一的技巧是您必须使用 capturing 事件侦听器，以便在 Maps API 之前看到事件。这是因为 Maps API 似乎调用了event.stopPropagation()，所以普通的事件侦听器不会看到该事件。通过使用捕获侦听器，您会首先看到它。

这是一个示例，假设您有一个用于地图的 #map_canvas DIV 和一个用于事件日志的 #log DIV：

function initialize() {
    var $map = $('#map_canvas');
    var latLng = new google.maps.LatLng( 40.708762, -74.006731 );

    var map = new google.maps.Map( $map[0], {
        zoom: 15,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    function wheelEvent( event ) {
        $('#log').append( '<div>wheel!</div>' );
    }

    $map[0].addEventListener( 'mousewheel', wheelEvent, true );
    $map[0].addEventListener( 'DOMMouseScroll', wheelEvent, true );
};

$( initialize );

请注意，该代码同时监听 Firefox 的 DOMMouseScroll 事件和其他浏览器的 mousewheel 事件。您需要注意这两个事件在 event 对象中的差异。

这是fiddle。

【讨论】：

谢谢，这太棒了，而且似乎完全符合我的要求。将此标记为答案！