Question

我在我的网站上使用google map api v3：地图的宽度为100％，高度为450px。因此，当您滚动页面时，由于鼠标滚轮事件缩放地图，它将自动停在地图上。我不想禁用它，因为它是一种很酷的功能，所以我只想在按下ALT键的情况下放大鼠标滚轮的方法。首先，我用这样的jQuery做到了：

<div id="my_map" class="Scrollable" 
onmouseover="hover_div['my_map']=true;" onmouseout="hover_div['my_map']=false;">

＆＃34; hover_div＆＃34;是一个在头部定义的全局数组，＆＃34; map＆＃34;是一个全局变量（＆＃34;滚轮＆＃34;设置为false）

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    if(ev.altKey && hover_div['my_map']){
        var $this = $(this),
            scrollTop = this.scrollTop,
            scrollHeight = this.scrollHeight,
            height = $this.height(),
            delta = (ev.type == 'DOMMouseScroll' ?
                ev.originalEvent.detail * -40 :
                ev.originalEvent.wheelDelta),
            up = delta > 0;

        var prevent = function() {
            ev.stopPropagation();
            ev.preventDefault();
            ev.returnValue = false;
            return false;
        }

        if (!up && -delta > scrollHeight - height - scrollTop) {
            $this.scrollTop(scrollHeight);

                var mapZoom = parseFloat(map.getZoom());
                if(mapZoom > 0){
                mapZoom = mapZoom - 1;
                map.setZoom(mapZoom);
                }
            return prevent();
        } else if (up && delta > scrollTop) {
            $this.scrollTop(0);

                var mapZoom = parseFloat(map.getZoom());
                if(mapZoom < 21){
                mapZoom = mapZoom + 1;
                map.setZoom(mapZoom);
                }
            return prevent();
        }
    }
});

它正常工作，但它从中心缩放而不考虑默认事件的鼠标位置。

我发现这个fiddle会触发谷歌地图鼠标滚轮事件：也许只有按下ALT键才能启动默认事件，但我还没有想到它爱好。

谷歌地图api V3 - 只有按下ALT键才能放大鼠标滚轮

0 个答案: