可以在自定义街景视图中禁用 ScrollWheel 吗？

Question

我正在构建一个网站，我有一个页面，它接受一个地址并使用它来生成 2D 路线图样式的谷歌地图，然后在它旁边是该地址的街景。

我的问题是，这两个地图几乎跨越了网站的整个宽度，用户在向下滚动页面时可能会将鼠标移到上面，并因无法进一步向下滚动（在放大地图时）而感到困惑。

为 2D 地图禁用此功能非常困难，

    //works to disable scroll wheel in 2D map   
var mapOptions = {
  zoom: 12,
  center: latlng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );

//not working to disable scroll wheel in panorama
var panoramaOptions = {
  position: results[0].geometry.location,
  scrollwheel: false
};

panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );

但街景视图似乎不允许我使用这些选项禁用滚轮，而且我无法在 google-docs 中找到解决此问题的方法。有人知道这是否可以完成或关于如何处理它的建议吗？

Answer 1

有一个关于 Gmaps API v3 问题的功能请求，要求将 scrollwheel: false 添加到街景 http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557。此问题现已修复，只需在 StreetViewPanorama 选项中使用 scrollwheel: false 即可。

Answer 2

我遇到了同样的问题，当用户使用鼠标滚轮向下滚动时，光标会被谷歌街景捕获并开始缩放而不是向下滚动页面。

在谷歌地图中，​​他们提供了可以禁用此功能的滚轮属性，但不幸的是，这似乎并未在街景视图中实现。

到目前为止，我发现的唯一解决方法是正如 @bennedich 在之前的答案中所说，我在街景 div 上放置了一个空/透明的 div。

当用户单击街景区域上的任意位置时，我通过使用 jQuery 在 mousedown 事件上隐藏此空 div（使用 css 可见性属性）来启用控件，并且当用户将鼠标移出时，我将这个空 div 放回原处。这基本上意味着每次用户想要与街景控件交互时，他都必须单击它一次。这不是最好的解决方案，但比滚动时鼠标卡住要好

Answer 3

不知道 javascript 方式，但是使用 html 和 css，您可以在地图/街景上放置一个具有更高 z-index 的不可见 div。

Answer 4

谷歌发布了一个补丁来解决这个问题。

目前有效的修复方法是将版本号显式设置为 3.25，以便 scrollwheel: false 正常工作。

例子：
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

Answer 5

我的解决方案如下。一旦使用“滚轮”事件在街景视图上滚动鼠标，然后人为地进行滚动并将覆盖层置于前面。

$('.streetViewOverlay').click(function(e) {
   $(this).addClass('streetViewOverlayClicked');
});

document.querySelector('#street-view').addEventListener("wheel", function(evt) {
    $(document).scrollTop($(document).scrollTop() + evt.deltaY);
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});



$('#street-view').mouseleave(function() {
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});


var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          zoom: 1,
          gestureHandling: 'cooperative',
           scrollwheel: false
        });
  }

.streetViewOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.streetViewOverlayClicked {
    z-index: 1;
}