在Google Map API中连接鼠标滚轮事件

Question

是否可以在Google Map API中挂钩鼠标轮事件？没有详细说明,我需要鼠标滚轮像谷歌地图中一样进行缩放,但我还需要附加到鼠标滚轮事件以用于其他目的.

但每当我在MapOptions中将scrollwheel设置为true时,Google Map API会消除所有mousewheel事件并拒绝分享它们(你认为这非常以自我为中心？)!

听像zoom_changed这样的谷歌地图事件不会起作用,因为如果地图处于最小或最大缩放级别,它们不会触发,这是我需要的.更具体地说,我需要知道用户是否已经在最大缩放级别时尝试缩放.

这种"感觉"可以解决,但我的直觉并不总是发现:-)

有任何想法吗？

Answer 1

您可以使用普通的DOM事件侦听器来完成此操作.唯一的技巧是你必须使用捕获事件监听器,这样你才能在Maps API之前看到事件.这是因为Maps API似乎在调用event.stopPropagation(),因此普通的事件侦听器不会看到该事件.通过使用捕获侦听器,您首先会看到它.

这是一个例子,假设你有一个#map_canvas地图的#logDIV和一个事件日志的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 );

请注意,代码会同时监听DOMMouseScrollFirefox的mousewheel事件和其他浏览器的事件.您将需要event处理这两个事件的对象差异.

这是小提琴.