logo标签列表

禁用嵌入式谷歌地图中的鼠标滚轮缩放

google-mapsscrollwheel
202

我正在处理一个WordPress网站，作者通常在大多数文章中使用iFrames嵌入Google地图。

是否有一种使用Javascript在所有这些地图上禁用鼠标滚轮缩放的方法？

32
将地图选项中的 scrollwheel 设为 false。 - Anto Jurković
或者通过JS直接禁用它：map.disableScrollWheelZoom(); - Th3Alchemist
4
很抱歉，由于安全限制，无法对地图进行脚本访问。据我所知，也没有可用的URL参数来禁用它。我不能为你做到这一点。 - Dr.Molle
有完全相同的问题。想要禁用嵌入iframe地图上的鼠标滚动事件。但还没有找到解决方法。 - Grzegorz
8
这是嵌入式地图，不确定为什么有人发布使用Maps JS库的解决方案。 - zanderwar
30个回答
7
这是我的方法。我发现它很容易在各种网站上实现并且经常使用。
CSS和JavaScript：
<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

在HTML中，您需要将iframe包装在一个div中。 <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" > 

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}
.scrolloff iframe   {
        pointer-events: none ;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

希望这能帮助任何寻找简单解决方案的人。
4
为了禁用嵌入式谷歌地图上的鼠标滚轮缩放，您只需将iframe的css属性pointer-events设置为none：
<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

这就是全部内容了，相当不错，不是吗？
<div id="googlemap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
2
它还将禁用双击缩放 :) - w3debugger
还禁用了缩放、放大、缩小、方向等功能。 - zanderwar
4

对我来说，最好的解决方案是这样使用：

HTML：

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS：

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

结果

注意事项：

最好在鼠标滚轮被停用时添加一个带有更暗的透明度的叠层，并带有一个文本：“点击浏览”。 但是当它被激活（在单击后）时，透明度和文本将会消失，用户可以像预期的那样浏览地图。 如何实现这一点？

3

添加样式pointer-events:none;这个可以很好地工作。

<iframe style="pointer-events:none;" src=""></iframe>
3
这里是我的简单解决方案。
将您的iframe放在一个名为“maps”的div中。
这将是您的iframe的CSS。
.maps iframe { pointer-events: none }

这里有一段Javascript代码，当你将鼠标悬停在div元素上至少1秒钟时（最适合我 - 您可以根据需要进行设置），它将把iframe的pointer-events属性设置为“auto”，并在鼠标离开元素时清除超时/将其设置为“none”。

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

干杯。
3
我创建了一个非常简单的jQuery插件来解决这个问题。 请在https://diazemiliano.github.io/googlemaps-scrollprevent查看。 

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

3
最简单的方法是使用伪元素，例如:before或:after。
这种方法不需要任何额外的HTML元素或jQuery。
如果我们有以下HTML结构:
<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

我们需要做的只是将包装器相对于我们将创建的伪元素定位，以防止滚动。

.map_wraper{
    position:relative;
}

在此之后，我们将创建一个伪元素，该元素将定位在地图上方，从而防止滚动：
.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

完成了，无需jquery或额外的HTML元素！这里是一个工作的jsfiddle示例：http://jsfiddle.net/e6j4Lbe1/

聪明的想法。然而，和其他答案一样，这会捕获所有事件，而不仅仅是鼠标滚轮事件。 - likeitlikeit
我很高兴它对你有帮助！ - Andrei
2
主题的变化：使用jQuery的简单解决方案，无需编辑CSS。
// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
    $(iframe).parent().hover( // make inactive on hover
        function() { $(iframe).css('pointer-events', 'none');
    }).click( // activate on click
        function() { $(iframe).css('pointer-events', 'auto');
    }).trigger('mouseover'); // make it inactive by default as well
});

悬停监听器附加到父元素，因此如果当前的父元素更大，则可以在第三行之前简单地使用div包装iframe。

希望对某些人有用。

2

使用 @nathanielperales 的答案后，我添加了悬停功能，因为当用户失去对地图的焦点时，它可以更好地停止滚动 :) 

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}
问题是我们失去了导航功能，在移动设备上对我来说非常重要。我创建了一个非常简单的jQuery插件，您可以根据需要进行修改。请访问https://github.com/diazemiliano/mapScrollOff。 - Emiliano Díaz
1
这将为您提供一个响应式的谷歌地图，它将停止iframe上的滚动，但一旦点击就可以让您缩放。请将此复制并粘贴到您的html中，但用您自己的iframe链接替换它。这里有一篇关于它的文章和示例：在嵌入的谷歌地图iframe上禁用鼠标滚轮缩放。
<style>
    .overlay {
    background:transparent;
    position:relative;
    width:100%; /* your iframe width */
    height:480px; /* your iframe height */
    top:480px; /* your iframe height */
    margin-top:-480px; /* your iframe height */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接