6

我正在构建一个站点，并且我有一个页面，该页面获取一个地址并使用它来生成 2D 路线图样式的 google-map，然后在它旁边是该地址的街景。

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

为 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 中找到该问题。任何人都知道这是否可以完成或关于如何处理它的建议？

4

5 回答 5

11

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

于 2011-04-19T20:13:22.730 回答
3

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

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

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

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

于 2010-10-11T03:47:15.833 回答
0

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

于 2010-07-27T22:17:10.073 回答
0

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

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

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

于 2016-11-24T10:32:06.597 回答
0

我的解决方案如下。一旦使用“wheel”事件在街景上滚动鼠标，然后人工进行滚动并将叠加层置于前面。

$('.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;
}
于 2018-05-04T22:54:19.693 回答