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中找到此问题。任何人都知道是否可以这样做或建议如何处理它？</ p>

Answer 1

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

Answer 2

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

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

我现在发现的唯一解决方法是@bennedich在上一个回答中说，我在街景div上放置了一个空的/透明的div。

当用户点击街道视图区域的任何地方时，我通过使用jQuery在mousedown事件中隐藏此空div（使用css visibility属性）并且当用户将鼠标移出时我启用控件我将这个空div放回过度。这基本上意味着每次用户想要与街景控件进行交互时，他必须单击一次。这不是最好的解决方案，但它比滚动时抓住鼠标更好

Answer 3

不知道javascript的方式，但是使用html和css，你可以在地图/街景上放置一个z-index较高的隐形div。

Answer 4

Google正在发布补丁来解决此问题。

目前有效的修复方法是将版本号明确设置为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;
}

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

5 个答案: