谷歌地图街景全景滚轮虚假仍然捕捉滚轮

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 Map内,则无法再滚动网页.所以我在这里尝试另外一条路径尝试在地图上设置一个叠加div,其行为方式与基本Google Map在滚动时的行为方式相同,并且完成了以下操作:

id of map-street是容纳StreetViewPanorama Map 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代码非常接近google地图在滚动时为基本地图提供的内容,但是,似乎基本的谷歌地图允许你拖动(在地图上)即使叠加层可见.这部分我不能,为我的生活,弄清楚,因为如果我禁用css指针事件比其他jquery鼠标事件不起作用.

这里最好的是,如果滚轮:false实际工作,并且如果滚动时鼠标位于StreetViewPanorama Map元素(map-street)上,则允许网页仍然滚动.如果它的工作方式与谷歌地图实际工作方式相同,实际显示一个普通的地图,根本就没有必要scrollwheel: false.但是没有scrollwheel:false,全景视图会将鼠标捕捉到该视图上的滚动.

如何禁用StreetViewPanorama上的滚轮而不是滚动鼠标(同时仍然允许管理StreetView地图)？

要么

如何保持街景视图的滚动,但像谷歌地图一样,并且有一个叠加(虽然仍然允许滚动页面),但仍然允许拖动地图(就像基本谷歌地图的确切方式)？

宁愿回答第二个问题,但要么会做.如果有办法拖动StreetViewPanorama虽然block-scrollingdiv元素也可能修复它(如果没有办法通过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();
        }
      }
    });
  });

});