我正在建立一个网站,我有一个页面,它接收一个地址并使用它生成一个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中找到此问题.任何人都知道是否可以这样做或建议如何处理它？
解决方法
我遇到了同样的问题,当用户使用鼠标滚轮向下滚动时,光标会在Google街景中被捕获并开始缩放而不是向下滚动页面.
在Google地图中,他们提供了可以禁用此功能的滚轮属性,但遗憾的是,这似乎并未在街景视图中实现.
我现在发现的唯一解决方法是@bennedich在上一个回答中说,我在街景div上放置了一个空的/透明的div.
当用户点击街道视图区域的任何地方时,我通过使用jQuery在mousedown事件中隐藏此空div(使用css visibility属性)并且当用户将鼠标移出时我启用控件,我将这个空div放回去.这基本上意味着每次用户想要与街景控件进行交互时,他必须单击一次.这不是最好的解决方案,但它比滚动鼠标时更好
