6

Google Map API でマウスホイール イベントにフックすることは可能ですか? 詳細は省きますが、通常の Google マップのようにズームするにはマウスホイールが必要ですが、別の目的でマウスホイール イベントにアタッチする必要もあります。

しかし、MapOptions で scrollwheel を true に設定すると、Google Map API はすべてのマウスホイール イベントを使い果たし、それらの共有を拒否します (非常に自己中心的だと思いませんか?)。

zoom_changed のような Google マップのイベントをリッスンしても機能しません。これは、マップが最小または最大のズーム レベルにある場合に発生しないためです。これは私が必要とするものです。より具体的には、既に最大ズーム レベルに達しているときに、ユーザーがズームしようとしたかどうかを知る必要があります。

これは解決可能だと「感じ」ますが、私の直感は常に正しいとは限りません:-)

何か案は？

4

1 に答える 1

8

これは、通常の 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これら 2 つのイベントのオブジェクトの違いに注意する必要があります。

これがフィドルです。

于 2013-09-17T22:37:19.333 に答える