如何禁用Google街景視圖拖動/滑動

Question

如何禁用街景視圖拖動/滑動？這一點對移動設備尤爲重要，通過手指在屏幕上滑動顯示街景視圖和整個網頁。事實上，如果您嘗試使用手指滾動頁面來觸摸街景視圖，那麼您將滾動街景視圖而不是頁面。 如果街景視圖是全角，這可能是一個可用性問題。

Answer 1

Google API不提供此選項，但是我通過在街景視圖頂部放置一個隱形div來防止基礎街景視圖接收成功。我創建了一個切換按鈕「拖動街景/拖動網頁」），該按鈕可以根據街景視圖的啓用/禁用狀態動態顯示/隱藏街景視圖控件。因爲在我的上下文中，需要和顯示切換按鈕，因此僅在移動觸摸設備中顯示切換按鈕。在桌面設備中，默認情況下，始終可以導航街景視圖，因爲這不存在問題。 （這裏使用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); 
      } 
    }); 
}