在嵌入式 Google 地图上禁用鼠标滚轮缩放答案

【问题标题】：Disable mouse scroll wheel zoom on embedded Google Maps在嵌入式 Google 地图上禁用鼠标滚轮缩放
【发布时间】：2014-03-26 09:29:08
【问题描述】：

我正在开发一个 WordPress 网站，作者通常在大多数帖子中使用 iFrame 嵌入 Google 地图。

有没有办法通过使用 Javascript 的所有鼠标滚轮来禁用缩放？

【问题讨论】：

将地图选项scrollwheel设置为false。
或者直接通过JS禁用：map.disableScrollWheelZoom();
恐怕你不能。由于安全限制，没有对地图的脚本访问，并且 AFAIK 没有可用的 URL 参数，可以让您选择禁用它。
有完全相同的问题。想要禁用嵌入 iframe 地图的鼠标滚动事件。还没找到。
这是嵌入式地图，不知道为什么人们发布使用地图 JS 库的解决方案

标签： google-maps scrollwheel

【解决方案1】：

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

所以我解决了这个问题，在每个 gmap iframe 插入之前放置一个 div 和一个 .overlay，请参阅：

<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 */
}

div 将覆盖地图，防止指针事件到达它。但是如果你点击 div，它对指针事件变得透明，再次激活地图！

希望能帮到你:)

【讨论】：

这是一个很好的解决方案。不过，就我而言，我必须指定 z-index 才能正确覆盖。
IMO 是这个问题的最佳解决方案！我们长期以来一直面临这个问题，这是一个很好且非常干净的可重复使用的修复程序！
这应该被标记为答案，虽然可能更容易将覆盖设置为绝对定位到父容器，然后宽度 100% 高度 100%，也不需要背景属性。
我创建了一个非常简单的 jQuery 插件来自动执行此操作。检查它在github.com/diazemiliano/mapScrollOff
是否有一种直接的方法来扩展此解决方案，以便忽略滚轮事件，但不忽略左键单击？这个解决方案很好，但需要用户点击地图顶部的“路线”超链接两次（一次穿透 div，然后再次点击超链接本身。）

【解决方案2】：

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

用一个类（在本例中为 .maps）包装 iframe 并理想地嵌入响应代码：http://embedresponsively.com/ — 将 iframe 的 CSS 更改为 pointer-events: none，然后使用 jQuery 的 click 函数到父元素，您可以更改 iframe 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 方法可以做到这一点。

重新激活指针事件的 JavaScript 方法非常简单。只需给 iFrame 一个 Id（即“iframe”），然后将 onclick 事件应用到 cointainer div：

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>

【讨论】：

感谢“无 API”解决方案。 +1
您也可以添加它以在鼠标离开时将其恢复为原始状态： $('.maps').mouseleave(function() { $('.maps iframe').css ("pointer-events", "none"); });
请注意：使用pointer-events: none 将阻止与地图的任何交互（拖动、导航、点击等）。
@LuBre 是的，明白了，这就是为什么有jQuery的点击功能将其更改为自动。
很好的答案！您要确保启用正确的地图，而不是页面上的全部$(this).find('iframe').css("pointer-events", "auto");

【解决方案3】：

我扩展了@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);

还有here is an jsFiddle example。

【讨论】：

感谢您的剪辑。我最后使用了以下添加：$('.maps.embed-container').find('iframe').css("pointer-events", "none");
感谢您的代码。它实际上解决了我遇到的另一个问题。我从 Google 电子表格中嵌入了一些图表，并且由于某种原因，使用鼠标滚轮滚动整个页面停止工作。您的代码使它再次用鼠标滚轮滚动。再次感谢。

【解决方案4】：

我正在重新编辑#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 example.

【讨论】：

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

【解决方案5】：

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

示例：

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

【讨论】：

那为什么不直接使用图片呢？你加载了很多额外的资产只是为了禁用它。
是的，但我无法点击小部件
请注意，这不适用于 IEcaniuse.com/#search=pointer-events
@deweydb - 这不是违法的吗？
@MattSaunders 不确定当时是否如此，但现在是。您可以直接从 Google API 加载静态地图图像，也许这就是 deweydb 的建议？肯定是解决问题的可行方法。

【解决方案6】：

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

【讨论】：

【解决方案7】：

进行一些研究后，您有 2 个选择。由于嵌入 iframe 的新地图 API 似乎不支持禁用鼠标滚轮。

首先将使用旧的谷歌地图 (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】：

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

您需要在 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创建了一个例子，希望对你有帮助！

【讨论】：

这也适用于 Google Maps Embed API - 只需将 map_canvas 替换为嵌入 iframe。请注意，点击事件在 outer 元素上，但滚动关闭在 inner 元素上（在答案/jsfiddle 中是正确的，以防万一您正在转录而不是复制/粘贴）

【解决方案9】：

我只是在developers.google.com 上注册了一个帐户并获得了一个用于调用 Maps API 的令牌，然后像这样禁用它（滚轮：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 hacks 好多了！

【解决方案10】：

这是一个简单的解决方案。只需将pointer-events: none CSS 设置为<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 禁用了所有点击事件。
点击事件仅对 iframe 禁用。但是如果你使用的是 JS 代码，一旦鼠标进入 div.gmap-holder，点击事件就会再次被激活。
这对我来说非常有用！大多数解决方案与 WordPress 不兼容：onclick 被清除，有时 iframe 的宽度不被尊重，但这就像一个魅力。将 JS 代码放好后，只需引用 id="gmap-holder" 即可。完美的。谢谢马尼什。

【解决方案11】：

这是我的方法。我发现它很容易在各种网站上实现并一直使用它

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>

希望这可以帮助任何寻找简单解决方案的人。

【讨论】：

【解决方案12】：

要在嵌入式谷歌地图上禁用鼠标滚轮缩放，只需将 iframe 的 css 属性指针事件设置为无：

<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>

【讨论】：

它还会禁用双击缩放:)
也禁用放大、缩小、方向等

【解决方案13】：

嗯，对我来说，最好的解决方案就是像这样简单地使用：

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>

RESULT

注意事项：

最好的方法是在鼠标滚轮停用时添加一个具有较深透明度的叠加层，并带有文本：“点击浏览” 但是当它被激活（在您点击它之后）时，带有文本的透明度会消失，并且用户可以按预期浏览地图。任何线索如何做到这一点？

【讨论】：

【解决方案14】：

添加样式pointer-events:none;这工作正常

<iframe style="pointer-events:none;" src=""></iframe>

【讨论】：

【解决方案15】：

最简单的方法是使用: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/

【讨论】：

聪明的主意。但是，与其他一些答案一样，这会捕获所有内容，而不仅仅是鼠标滚轮事件。
我很高兴它能帮到你！

【解决方案16】：

这是我的简单解决方案。

例如，将您的 iframe 放入一个带有“地图”类的 div 中。

这将是你的 iframe 的 CSS

.maps iframe { pointer-events: none }

这里有一个小 javascript，当您将 div 元素悬停至少 1 秒时，它将 iframe 的 pointer-events 属性设置为“自动”（最适合我 - 将其设置为您喜欢的任何值）并清除当鼠标离开元素时，超时/再次将其设置为“无”。

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");
});

干杯。

【讨论】：

【解决方案17】：

我创建了一个非常简单的 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>

【讨论】：

【解决方案18】：

使用@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 插件，您可以根据需要进行修改。检查它在github.com/diazemiliano/mapScrollOff

【解决方案19】：

主题变体：使用 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
});

悬停侦听器附加到父元素，因此如果当前父元素更大，您可以简单地在第 3 行之前用 div 包裹 iframe。

希望它对某人有用。

【讨论】：

【解决方案20】：

我自己偶然发现了这个问题，并在这个问题上使用了两个非常有用的答案的一些混搭： czerasz的答案和massa的答案。

它们都有很多道理，但在我的测试中，我发现其中一个不适用于移动设备并且对 IE 的支持很差（仅适用于 IE11）。这是 nathanielperales 的解决方案，然后由 czerasz 扩展，它依赖于指针事件 css，并且不适用于移动设备（移动设备中没有指针）和it doesn't work on 任何非 v11 版本的 IE。通常我不会在意，但是那里有大量用户，我们想要一致的功能，所以我选择了覆盖解决方案，使用包装器来简化编码。

所以，我的标记看起来像这样：

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

那么样式是这样的：

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

最后是脚本：

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

我还在GitHub gist 中添加了我测试过的解决方案，如果你想从那里获取东西...

【讨论】：

【解决方案21】：

这是一个使用 CSS 和 Javascript 的解决方案（即 Jquery，但也适用于纯 Javascript）。同时，地图是响应式的。滚动时避免地图缩放，但可以通过点击激活地图。

HTML/JQuery Javascript

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
}

玩得开心！

【讨论】：

【解决方案22】：

在 Google 地图 v3 中，您现在可以禁用滚动缩放，从而带来更好的用户体验。其他地图功能仍然可以使用，您不需要额外的 div。我还认为应该为用户提供一些反馈，以便他们在启用滚动时可以看到，所以我添加了地图边框。

// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map'); 

// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
  var mapElement = $(mapSelector);

  // Disable the scroll wheel by default
  map.setOptions({ scrollwheel: false })

  // Enable scroll to zoom when there is a mouse down on the map.
  // This allows for a click and drag to also enable the map
  mapElement.on('mousedown', function () {
    map.setOptions({ scrollwheel: true });
    mapElement.css('border', '1px solid blue')
  });

  // Disable scroll to zoom when the mouse leaves the map.
  mapElement.mouseleave(function () {
    map.setOptions({ scrollwheel: false })
    mapElement.css('border', 'none')
  });
};

【讨论】：

【解决方案23】：

这将为您提供一个响应式 Google 地图，该地图将停止 iframe 上的滚动，但一旦点击就会让您缩放。

将其复制并粘贴到您的 html 中，但将 iframe 链接替换为您自己的链接。他是一篇文章，上面有一个例子：Disable the mouse scroll wheel zoom on embedded Google Map iframes

<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>

【讨论】：

【解决方案24】：

这将是我的方法。

将其放入我的 main.js 或类似文件中：

// Create an array of styles.
var styles = [
                {
                    stylers: [
                        { saturation: -300 }

                    ]
                },{
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        { hue: "#16a085" },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                }
              ],

                // Lagitute and longitude for your location goes here
               lat = -7.79722,
               lng = 110.36880,

              // Create a new StyledMapType object, passing it the array of styles,
              // as well as the name to be displayed on the map type control.
              customMap = new google.maps.StyledMapType(styles,
                  {name: 'Styled Map'}),

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
              mapOptions = {
                  zoom: 12,
                scrollwheel: false,
                  center: new google.maps.LatLng( lat, lng ),
                  mapTypeControlOptions: {
                      mapTypeIds: [google.maps.MapTypeId.ROADMAP],

                  }
              },
              map = new google.maps.Map(document.getElementById('map'), mapOptions),
              myLatlng = new google.maps.LatLng( lat, lng ),

              marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: "images/marker.png"
              });

              //Associate the styled map with the MapTypeId and set it to display.
              map.mapTypes.set('map_style', customMap);
              map.setMapTypeId('map_style');

然后只需在您希望地图显示在页面上的位置插入一个空 div。

<div id="map"></div>

您显然还需要调用 Google Maps API。我只是创建了一个名为 mapi.js 的文件并将其放入我的 /js 文件夹中。这个文件需要在上面的javascript之前调用。

`window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`

当您调用 mapi.js 文件时，请确保您将传感器 false 属性传递给它。

即：<script type="text/javascript" src="js/mapi.js?sensor=false"></script>

API 的新版本 3 出于某种原因需要包含传感器。确保在 main.js 文件之前包含 mapi.js 文件。

【讨论】：

【解决方案25】：

对于谷歌地图 v2 - GMap2：

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

【讨论】：

【解决方案26】：

如果你有一个像这样使用谷歌地图嵌入式 API 的 iframe：

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

你可以添加这个css样式：pointer-event:none; ES。

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

【讨论】：

【解决方案27】：

这是我对@chams 扩展的@nathanielperales 答案的看法，现在由我再次扩展。

HTML

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

jQuery

// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");

// as a safety, allow pointer events on click
$('.maps').click(function() {
  $(this).find('iframe').css("pointer-events", "auto");
});


$('.maps').mouseleave(function() {
  // set the default again on mouse out - disallow pointer events
  $(this).find('iframe').css("pointer-events", "none");
  // unset the comparison data so it doesn't effect things when you enter again
  $(this).removeData('oldmousepos');
});

$('.maps').bind('mousemove', function(e){
  $this = $(this);
  // check the current mouse X position
  $this.data('mousepos', e.pageX);
  // set the comparison data if it's null or undefined
  if ($this.data('oldmousepos') == null) {
    $this.data('oldmousepos', $this.data('mousepos'));
  }
  setTimeout(function(){
    // some left/right movement - allow pointer events
    if ($this.data('oldmousepos') != $this.data('mousepos')) {
      $this.find('iframe').css("pointer-events", "auto");
    }
    // set the compairison variable
    $this.data('oldmousepos', $this.data('mousepos'));
  }, 300);
  console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});

【讨论】：

【解决方案28】：

最简单的一个：

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>

【讨论】：

这个小绝对 div 对我的用例有用，谢谢?

【解决方案29】：

这个免费的小插件可以做到 - https://mapcraftpro.com/

【讨论】：

【解决方案30】：

将此添加到您的脚本中：

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru,
        scrollwheel: false,
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
});
}

【讨论】：

问题在于 Embed API（使用 iframe），而不是 JavaScript API。