谷歌地圖街景全景滾輪虛假仍抓住滾輪

Question

的jsfiddle谷歌街景的問題在這裏：https://jsfiddle.net/d8qgfcvf/4/

我傷心嘗試的jsfiddle來模擬實現頂部的z-index元素經常谷歌地圖是如何做到這一點，它能夠滾動在StreetViewPanorama的網頁時，但這個例子是不是能夠拖動街景就像你可以拖動常規地圖：https://jsfiddle.net/Ltjz44gg/3/

好，一直纏鬥在StreetViewPanorama的谷歌地圖上的這個滾輪問題視圖。因爲我正在使用基本地圖和StreetViewPanorama。這裏是我的代碼的基礎：

var theMapOptions = 
{ 
    backgroundColor  : "#B0C0C6", 
    zoom    : 16, 
    maxZoom    : 20, 
    minZoom    : 2, 
    disableDefaultUI : true, 
    center    : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    mapTypeId   : google.maps.MapTypeId.ROADMAP, 
    mapTypeControl  : false, 
    zoomControl   : true, 
    panControl   : true, 
    streetViewControl : true, 

    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 

    zoomControlOptions: { 
     style : google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.TOP_LEFT 
    } 
}; 

var theStreetMapOptions = 
{ 
    position : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    pov: { 
     heading: 135, 
     pitch: -10 
    }, 
    scrollwheel: false, // If I remove this scrolling occurs in map, if I keep it the page is still not able to be scrolled, why? 
    motionTrackingControlOptions: { 
     position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}; 

var theMap = new google.maps.Map(document.getElementById('mapID'), theMapOptions); 
// A custom styles json array (not included, since it's irrelevant) 
theMap.setOptions({styles: styles}); 


var theMapMarkerOptions = 
{ 
    map   : theMap, 
    position : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    draggable : false, 
    visible  : true 
} 

var theMapMarker = new google.maps.Marker(theMapMarkerOptions); 
theMapMarker.Map = theMap; 

theMapMarker.setMap(theMap); 

var theStreetMap = new google.maps.StreetViewPanorama(document.getElementById('map-street'), theStreetMapOptions); 
theMap.setStreetView(theStreetMap); 

然而，這種輸出時，該滾輪仍然被抓，我不能夠再滾動網頁，如果我的鼠標是StreetViewPanorama的地圖內。所以我在這裏下了另一個路徑，嘗試在地圖上設置覆蓋div，以與Google滾動時基本相同的方式執行操作，並完成了以下操作：

map-street的ID是容器它包含StreetViewPanorama地圖btw。

HTML：

<div id="mapID" class="col-xs-24 col-md-12"></div> 
<div id="map-street" class="col-xs-24 col-md-12"><div class="block-scrolling fade"><p></p></div></div> 

少：

.transition (@transition) { 
    -webkit-transition: @transition; 
    -moz-transition: @transition; 
    -ms-transition:  @transition; 
    -o-transition:  @transition; 
} 

.block-scrolling { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.3); 
    z-index: 2; 
    .transition(all .25s linear); 
    p { 
     position: relative; 
     text-align: center; 
     top: 50%; 
     transform: translateY(-50%); 
     color: white; 
     font-size: 26px; 
    } 
} 

的jQuery：

// Need to simulate scroll over google map for StreetViewPanorama, so this code is needed! 
$(document).on('keydown keyup', function(e) { 
    var io = e.type == 'keydown' ? 0 : 1; 

    if ((e.ctrlKey || e.metaKey) && $('.block-scrolling').data('mouseover')) { 
     e.preventDefault(); 

     console.log($('.block-scrolling').data('mouseover')); 

     if (io === 0) 
      $('.block-scrolling').css({zIndex: -1}); 
     else 
      $('.block-scrolling').removeClass('in').css({zIndex: 2}); 

     return false; 
    } 
    else 
     $('.block-scrolling').css({zIndex: 2}); 

    return true; 
}); 


$(".block-scrolling").mouseenter(function() { 
    clearTimeout($(this).data('timeoutId')); 
    $(this).data('mouseover', true); 
}).mouseleave(function(){ 
    var scrollingElement = $(this), 
     timeoutId = setTimeout(function(){ 
      scrollingElement.data('mouseover', false); 
     }, 50); 
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
    scrollingElement.data('timeoutId', timeoutId); 
}); 

$(".block-scrolling").on('scroll wheel DOMMouseScroll mousewheel touchstart', function(e) { 

    var $this = $(this), 
     $text = e.type == 'touchstart' ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map'); 

    clearTimeout($.data(this, 'scrollTimer')); 
    $this.find('p').html($text); 
    $this.addClass('in'); 

    var scrollingElement = $(this); 

    if (e.type == 'touchstart') 
    { 
     if (e.hasOwnProperty('touches') && e.touches.length && e.touches.length > 1) 
      $this.css({zIndex: -1}); 
    } 

    $.data(this, 'scrollTimer', setTimeout(function() { 
     scrollingElement.removeClass('in'); 
    }, 2000)); 
}); 

jQuery代碼是非常接近的是谷歌地圖提供了基本的地圖時，在其上滾動，但是，似乎基本谷歌地圖允許你拖動（在地圖上），即使覆蓋是可見的即這部分我不能，對我來說，弄清楚，因爲如果我禁用CSS指針事件比其他jQuery鼠標事件不起作用。

如果scrollwheel：false實際工作並允許網頁在滾動時如果鼠標在該StreetViewPanorama貼圖元素（map-street）之上仍然滾動，那麼將會更好。如果它實際上與谷歌地圖的實際工作方式一樣，在實際顯示普通地圖的時候會很好，因爲根本不需要scrollwheel: false。但沒有滾輪：false，全景視圖會在該視圖上將鼠標捕捉到滾動中。

如何禁用StreetViewPanorama上的滾輪並且不滾動鼠標（同時仍允許管理StreetView地圖）？

或者

如何保持滾動的街景，但不喜歡谷歌地圖沒有，並具有覆蓋（同時仍然允許滾動頁面），但仍允許地圖被拖動（如精確基本谷歌地圖的方式）？

寧願回答第二個問題，但要麼會做。如果有方法拖動StreetViewPanorama，但可能會修復它的block-scrolling div元素（如果無法通過StreetViewPanorama選項執行此操作）。

Answer 1

我改變了你的代碼，使其工作。
https://jsfiddle.net/Ltjz44gg/19/

StreetViewPanorama不理解gestureHandling選項，它不能偵聽mouseout。所以你只能做出「怪異」的解決方案。

事情是這樣的：
更新CSS：

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.block-scrolling { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.3); 
    z-index: 2; 
    -webkit-transition: (all .25s linear); 
    -moz-transition: (all .25s linear); 
    -ms-transition:  (all .25s linear); 
    -o-transition:  (all .25s linear); 
    opacity: 0; 
    pointer-events: none; 
} 
.block-scrolling.show{ 
    opacity: 1; 
} 
.block-scrolling.hide{ 
    opacity: 0; 
} 
.block-scrolling p { 
     position: relative; 
     text-align: center; 
     top: 50%; 
     transform: translateY(-50%); 
     color: white; 
     font-size: 26px; 
     -webkit-user-select: none; 
     -moz-user-select: none;  
     -ms-user-select: none;  
     user-select: none; 
    } 

div[class^='col'], div[class*=' col'] { 
    height: 300px; 
} 

.col-xs-24 { 
    float: left; 
    width: 100%; 
} 

@media (min-width: 992px) { 
    .col-md-12 { 
    float: left; 
    width: 50%; 
    } 
} 

更新JS：

var theMapOptions = { 
    backgroundColor : "#B0C0C6", 
    zoom  : 16, 
    maxZoom  : 20, 
    minZoom  : 2, 
    disableDefaultUI : true, 
    center  : new google.maps.LatLng(37.869085, -122.254775), 
    mapTypeId  : google.maps.MapTypeId.ROADMAP, 
    mapTypeControl : false, 
    zoomControl  : true, 
    panControl  : true, 
    streetViewControl : true, 

    panControlOptions: { 
    position: google.maps.ControlPosition.TOP_LEFT 
    }, 

    zoomControlOptions: { 
    style : google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.TOP_LEFT 
    } 
}; 

var theStreetMapOptions = { 
    position : new google.maps.LatLng(37.869085, -122.254775), 
    pov: { 
    heading: 135, 
    pitch: -10 
    }, 
    motionTrackingControlOptions: { 
    position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}; 

var theMap = new google.maps.Map(document.getElementById('mapID'), theMapOptions); 
// A custom styles json array (not included, since it's irrelevant) 
// theMap.setOptions({styles: styles}); 

var theMapMarkerOptions = { 
    map  : theMap, 
    position : new google.maps.LatLng(37.869085, -122.254775), 
    draggable : false, 
    visible : true 
}; 

var theMapMarker = new google.maps.Marker(theMapMarkerOptions); 
theMapMarker.Map = theMap; 

theMapMarker.setMap(theMap); 

var theStreetMap = new google.maps.StreetViewPanorama(document.getElementById('map-street'), theStreetMapOptions); 
theMap.setStreetView(theStreetMap); 

jQuery(document).ready(function($) { 
    var ctrl = false, mouseover = false; 
    var waitForScroll = function() { 
    $('.block-scrolling').removeClass('show hide'); 
    }; 
    var disableScroll = function() { 
    $('.block-scrolling').removeClass('hide').addClass('show'); 
    }; 
    var enableScroll = function() { 
    $('.block-scrolling').removeClass('show').addClass('hide'); 
    }; 

    theMap.addListener('idle', function(e){  
    $('#map-street .widget-scene').on('scroll wheel DOMMouseScroll mousewheel touchstart touchmove', function(e) { 
     var $overlay = $('.block-scrolling'), 
     $text = e.type.indexOf('touch') >=0 ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map'); 
     $overlay.find('p').html($text); 
     if (ctrl || (e.type.indexOf('touch') >=0 && e.hasOwnProperty('touches') && e.touches.length > 1)) { 
     enableScroll(); 
     } else { 
     e.stopPropagation(); 
     disableScroll(); 
     } 
    }).on('mouseenter', function(e){ 
     $(this).focus(); 
    }).on('mouseleave touchend', function(e){ 
     waitForScroll(); 
    }).on('keydown keyup', function(e) { 
     var io = e.type == 'keydown' ? 0 : 1; 
     if ((e.ctrlKey || e.metaKey || e.which === 17 || e.which === 91)) { 
     ctrl = false; 
     if (io === 0) { 
      ctrl = true; 
      enableScroll(); 
     } 
     if (io === 1) { 
      waitForScroll(); 
     } 
     } 
    }); 
    }); 

});