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个回答
259

我遇到了同样的问题：当滚动页面时，指针移到地图上时，地图开始缩放而不是继续滚动页面。 :(

所以我解决了这个问题，在每个gmap iframe插入之前放置一个带有.overlay的div，如下所示：

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

在我的CSS中，我创建了这个类：

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}
这个元素将覆盖地图，防止鼠标事件传递到它上面。但是，如果你点击这个元素，它会对鼠标事件变得透明，从而重新激活地图！
希望能帮到你 :)
9
这是个好的解决方法。对于我的情况，我必须指定一个 z-index 以便正确地叠加它。 - RCNeil
11
虽然将叠加层绝对定位到父容器并设置宽度和高度为100％可能更容易，而且不需要背景属性，但应将此标记为答案。 - hcharge
1
这似乎应该可以工作，但是当div被点击后如何变为“透明”以使指针事件无效对我来说不太清楚。 div上的onclick事件到底应该做什么？ 在我看来，通过将pointer-events设置为none，div被设置为对事件不透明而不是透明。 我错过了什么吗？ - fraxture
4
我已经创建了一个非常简单的jQuery插件来自动化这个过程。 请访问https://github.com/diazemiliano/mapScrollOff进行查看。 - Emiliano Díaz
8
有没有一种简单的方法来扩展这个解决方案，使得滚轮事件被忽略，但左键点击不被忽略？这个解决方案很好，但需要用户在地图顶部的“路线”超链接上点击两次（一次是进入 div，另一次是点击超链接本身）。 - jptsetme
显示剩余11条评论
140

我尝试了讨论中的第一个答案，但无论我怎么做都不起作用，所以我想出了自己的解决方案：

将iframe用类(.maps在此示例中)包装起来，并最好使用embedresponsively代码：http://embedresponsively.com/ — 更改iframe的CSS为pointer-events: none ，然后使用jQuery的click函数到父元素，您可以将iframes CSS更改为pointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

：层叠样式表
.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});
我相信有一种仅使用JavaScript的方法可以实现这个，如果有人想要添加，请随意。
重新激活pointer-events的JavaScript方法非常简单。只需给iFrame（即“iframe”）一个Id，然后在容器div上应用一个onclick事件即可:
onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
5
感谢您提供“无需 API”的解决方案，点赞 +1。 - Severe Torture
21
当鼠标移开时，您还可以添加此代码以将其恢复到原始状态：$('.maps').mouseleave(function() { $('.maps iframe').css("pointer-events", "none"); }); （注：该代码用于在鼠标离开地图区域时取消地图的交互功能） - Luis
5
注意：使用pointer-events: none会防止与地图的任何交互（拖动、导航、点击等）。 - LuBre
1
很棒的答案！您想确保启用正确的地图而不是页面上的所有内容 $(this).find('iframe').css("pointer-events", "auto");。 - Tom Prats
@natanielperales 但是如果鼠标按钮被禁用，jQuery click/html onclick 如何触发以捕获事件？要仅禁用鼠标滚轮，您需要类似于 $("#map").on("mousewheel DOMMouseScroll", mouseRipple); 的东西，其中 mouseRipple 包含 $("#map_container").parent().trigger(e); 如果您仍希望它滚动。 - mpag
显示剩余3条评论
53

我扩展了 @nathanielperales 的解决方案。

以下是行为描述：

  • 单击地图以启用滚动
  • 当鼠标离开地图时，禁用滚动

以下是 JavaScript 代码：

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

这里是一个 jsFiddle 的示例链接。

1
谢谢您提供这段代码。我在结尾处添加了以下内容：$('.maps.embed-container').find('iframe').css("pointer-events", "none"); - lhermann
谢谢你的代码。它实际上解决了我遇到的一个不同的问题。我嵌入了一些来自Google电子表格的图表，但鼠标滚轮滚动出现了问题，整个页面都无法滚动。你的代码让鼠标滚轮再次可以滚动。再次感谢。 - Scott M. Stolz
32

我正在重新编辑#nathanielperales编写的代码，它对我非常有效。简单易懂，但只能工作一次。所以我在JavaScript中添加了mouseleave()。这个想法来自#Bogdan，现在它完美了。试试看。感谢#nathanielperales和#Bogdan。我只是将两个想法结合起来。谢谢你们。我希望这也能帮助其他人...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

灵活应变 - 适应 - 克服

这里是一个jsFiddle示例。

1
最干净的解决方案。不错！但是所有的解决方案都有一个问题：用户必须点击地图两次。如何立即通过点击，使其只需要一次点击？ - Loren
1
也许你可以通过在鼠标“悬停”在地图上一定时间后才切换到 pointer-events: auto 来避免点击？即当鼠标进入 iframe 时启动计时器，并在鼠标离开时重置它。如果计时器达到 X 毫秒，则切换到 pointer-events: auto。每当鼠标离开 iframe 时，只需切换回 pointer-events: none。 - stucampbell
我更喜欢使用dblclick而不是click，不过这也是个好的解决方案。 - Moxet Khan
25

是的，这很容易。我曾经遇到过类似的问题。只需向iframe div添加CSS属性"pointer-events"并将其设置为'none'。

例子:<     iframe style="pointer-events:none" src= ........ >

附注：此修复程序将禁用地图上的所有其他鼠标事件。因为我们不需要地图上的任何用户交互，所以它对我有用。

21
为什么不直接使用图片呢？这样你就只需要加载很少的资源来禁用它们。 - deweydb
2
是的，但我无法点击小部件。 - Jeffrey Nicholson Carré
1
请注意，此代码不适用于IE<11浏览器 - http://caniuse.com/#search=pointer-events - totallyNotLizards
@deweydb - 那不是非法的吗？ - Matt Saunders
@MattSaunders 不确定当时是否如此，但现在是可以的。 您可以直接从Google API加载静态地图图像，也许这就是deweydb所建议的？ 这肯定是解决问题的可行方法。 - azariah
@MattSaunders 这就是 Hassam 提到的内容：https://developers.google.com/maps/documentation/static-maps/intro - user1380540
20
var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
13

经过一些研究，你有两个选项。由于新地图API与iframe嵌入似乎不支持禁用鼠标滚轮。

第一个选择是使用旧版的Google地图(https://support.google.com/maps/answer/3045828?hl=en)。

第二个选择是创建一个JavaScript函数来简化每个评论的地图嵌入，并使用参数（这只是示例代码，仅指定位置而不显示确切解决方案）。

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}
8

我刚刚在developers.google.com注册了一个账户，并获取了调用Maps API所需的令牌，只需要像这样禁用滚轮即可（scrollwheel: false）：

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }
比jQuery的hack好太多了！ - Dániel Kis-Nagy
8

有一种很棒而且简单的解决方案。

您需要在CSS中添加一个自定义类，将指针事件设置为地图画布无效：

.scrolloff{
   pointer-events: none;
}

然后，使用jQuery，您可以根据不同的事件添加和删除该类，例如：

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

我已在jsfiddle创建了一个示例，希望能帮助到您！

1
这也适用于Google Maps嵌入API - 只需将map_canvas替换为嵌入式iframe即可。请注意，单击事件在_outer_元素上，但scrolloff在_inner_元素上（如果您正在转录而不是复制/粘贴，则答案/jsfiddle中是正确的）。 - Jxtps
7
这里有一个简单的解决方案。只需将CSS属性pointer-events: none应用于<iframe>即可禁用鼠标滚轮。
<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

如果您想在用户单击地图时激活鼠标滚动，可以使用以下JS代码。当鼠标移出地图时，它也将再次禁用鼠标滚动。
$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})
请注意，我认为pointer-events禁用了此Iframe的所有点击事件。 - stephanfriedrich
点击事件仅对iframe禁用。但是，如果您使用JS代码，当鼠标进入div.gmap-holder时，单击事件将再次激活。 - Manish Singh
这对我来说非常有效！大多数解决方案与WordPress不兼容：onclick被清除，有时iframe的宽度也无法保持一致，但这个方法非常好用。在将JS代码放置后，只需要引用id =“gmap-holder”即可。完美。谢谢Manish。 - usonianhorizon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接