jquery - 谷歌地图街景全景滚轮错误仍然捕获滚轮

Question

jsfiddle 的 Google 街景问题:https://jsfiddle.net/d8qgfcvf/4/

jsfiddle 我悲伤地​​尝试模拟常规 Google map 如何做到这一点，通过在其顶部实现 z-index 元素，以便能够在 StreetViewPanorama 上滚动页面，但此示例无法拖动像普通 map 一样可以拖动StreetView:https://jsfiddle.net/Ltjz44gg/3/

好的，一直在与 StreetViewPanorama Google map View 中的滚轮问题作斗争。因为我同时使用基本 map 和 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 map 内部，则滚轮仍会被捕获，并且无法再滚动网页。因此，我在这里走了另一条路，尝试在 map 上设置一个覆盖 div，其操作方式与基本 Google map 在滚动时的操作方式相同，并且已完成此操作:

map-street 的 id 是保存 StreetViewPanorama map 的容器。

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 代码非常接近谷歌地图在滚动时为基本 map 提供的内容，但是，即使覆盖层可见，基本谷歌地图似乎也允许您拖动(在 map 上)。这部分我一生都无法弄清楚，因为如果我禁用 css 指针事件，其他 jquery 鼠标事件将不起作用。

这里更好的是，如果滚动轮: false 确实有效，并且在滚动时鼠标位于 StreetViewPanorama map 元素 (map-street) 上，则允许网页仍然滚动。如果它的工作方式与 Google map 实际工作方式相同，那就太好了，在实际显示普通 map 时，根本不需要 scrollwheel: false 。但如果没有滚轮: false，全景 View 会将鼠标捕获到该 View 上的滚动中。

如何禁用 StreetViewPanorama 上的滚轮并且不捕获鼠标滚动(同时仍允许管理 StreetView map )？

或者

如何在街景上保持滚动，但像 Google map 一样并有一个覆盖层(同时仍然允许滚动页面)，但仍然允许拖动 map (就像基本谷歌地图的确切方式一样) )？

希望得到第二个问题的答案，但两者都可以。如果有办法通过 block 滚动 div 元素拖动 StreetViewPanorama 也可能会修复它(如果无法通过 StreetViewPanorama 选项执行此操作)。

Answer 1

我更改了您的代码以使其正常工作。
https://jsfiddle.net/Ltjz44gg/19/

StreetViewPanorama 不理解手势处理选项，并且无法监听鼠标移出。所以你只能做出“奇怪”的解决方案。

类似这样的:
更新的 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();
        }
      }
    });
  });

});