可以在自定义街景视图中禁用 ScrollWheel 吗?
我正在构建一个网站,我有一个页面,它接受一个地址并使用它来生成 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 中找到解决此问题的方法。有人知道这是否可以完成或关于如何处理它的建议吗?
I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//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 );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
有一个关于 Gmaps API v3 问题的功能请求,要求将
scrollwheel: false
添加到街景 http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557。此问题现已修复,只需在StreetViewPanorama
选项中使用scrollwheel: false
即可。There was a feature request with Gmaps API v3 issues to add
scrollwheel: false
to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just usescrollwheel: false
within yourStreetViewPanorama
options.我遇到了同样的问题,当用户使用鼠标滚轮向下滚动时,光标会被谷歌街景捕获并开始缩放而不是向下滚动页面。
在谷歌地图中,他们提供了可以禁用此功能的滚轮属性,但不幸的是,这似乎并未在街景视图中实现。
到目前为止,我发现的唯一解决方法是正如 @bennedich 在之前的答案中所说,我在街景 div 上放置了一个空/透明的 div。
当用户单击街景区域上的任意位置时,我通过使用 jQuery 在 mousedown 事件上隐藏此空 div(使用 css 可见性属性)来启用控件,并且当用户将鼠标移出时,我将这个空 div 放回原处。这基本上意味着每次用户想要与街景控件交互时,他都必须单击它一次。这不是最好的解决方案,但比滚动时鼠标卡住要好
I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as @bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling
不知道 javascript 方式,但是使用 html 和 css,您可以在地图/街景上放置一个具有更高 z-index 的不可见 div。
Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.
谷歌发布了一个补丁来解决这个问题。
目前有效的修复方法是将版本号显式设置为 3.25,以便
scrollwheel: false
正常工作。例子:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25
There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for
scrollwheel: false
to work.Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25
我的解决方案如下。一旦使用“滚轮”事件在街景视图上滚动鼠标,然后人为地进行滚动并将覆盖层置于前面。
My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.