Question

谷歌街景的问题在这里问题：https://jsfiddle.net/d8qgfcvf/4/

我试图模拟常规谷歌地图如何做到这一点，通过在它上面实现一个z-index元素，以便能够在通过StreetViewPanorama时滚动页面，但这个例子无法拖动StreetView就像你可以拖动常规地图：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在滚动时的行为方式相同，并完成了此操作：

map-street的ID是容纳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 &#8984; + 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地图在滚动时为基本地图提供的内容，但是，似乎基本的Google地图允许您拖动（在地图上）即使叠加层可见。这部分我不能，因为我的生活，弄清楚，因为如果我禁用css指针事件比其他jquery鼠标事件不起作用。

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

如何在StreetViewPanorama上禁用滚轮而不在滚动时捕捉鼠标（同时仍然允许管理StreetView地图）？

或

如何保持街景视图的滚动，但像谷歌地图一样，并且有覆盖（虽然仍然允许滚动页面），但仍然允许拖动地图（就像基本谷歌地图的确切方式一样））？

更愿意回答第二个问题，但要么会做。如果有一种方法可以通过block-scrolling div元素拖动StreetViewPanorama，它也可能会修复它（如果没有办法通过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 &#8984; + 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();
        }
      }
    });
  });

});

Google地图街景全景滚轮false仍会捕捉滚轮

1 个答案: