Question

如何禁用街景拖动/滑动？这在移动设备上尤其重要，在移动设备上，通过用手指在屏幕上滑动来滚动街景和整个网页。实际上，如果您尝试滚动页面用手指触摸有街景视图的点，则会滚动街景视图而不是页面。如果街景视图为全宽，则可能是可用性问题。

Answer 1

Google API不提供此选项，但我通过在街景视图顶部放置一个不可见的div来防止基础街景视图被接收，从而使其工作。我创建了一个切换按钮“拖动街景/拖动网页”。该按钮可以根据街景的启用/禁用状态动态显示/隐藏街景控件。

示例：http://www.genovaperte.it/item/antico-forno-ursida/ 请从移动触摸设备上查看，因为在我的上下文中，只需要移动触摸设备就需要切换按钮。在桌面设备中，默认情况下街景视图始终可导航，因为没有此问题。

代码概要（这里使用jQuery和Modernizr）：

CSS：

.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px @firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */

HTML：

<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>

JS：

function toggleStreetViewControls(state) {
    mapDiv = $("#directory-main-bar");
    if(!state) {
        $('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
        mapDiv.addClass('hide-gmnoprint');
    }
    else {
        $('.prevent-dragging').remove();
        mapDiv.removeClass('hide-gmnoprint');
    }
}

if (Modernizr.touch){
    var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
    $('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
        mapDiv.addClass('hide-gmnoprint');
    }
    swDraggableButton.click(function () {
            if($(this).hasClass('active')){
                    $(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
                    toggleStreetViewControls(false);
            } else {
                    $(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
                    toggleStreetViewControls(true);
            }
    });
}

如何停用Google街景拖动/滑动

1 个答案: