Question

＆＃13;

$(document).ready(function() {
  $('#map').addClass('scrolloff');

  $('#overlay').on("mouseup",function(){          
    $('#map').addClass('scrolloff'); 
  });

  $('#overlay').on("mousedown",function(){        
    $('#map').removeClass('scrolloff');
  });

  $("#map").mouseleave(function () {              
    $('#map').addClass('scrolloff');            
  });
});

＆＃13;

 

.scrolloff {
	pointer - events: none;
}
iframe {
	width: 100 % ;
	height: 260 px;
}

＆＃13;

<div class="overlay" class="map-container">
	<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2549.8391302717027!2d-74.51093153882466!3d40.53525165221866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3c0b7401dac15%3A0x209d581c4bc2ba2a!2s11+Cedar+Grove+Ln%2C+Somerset%2C+NJ+08873%2C+USA!5e0!3m2!1sen!2sin!4v1456722671076" allowfullscreen></iframe>
</div>

＆＃13;

我附上了我正在处理的完整代码我只是简单地应用了指针事件函数的概念来停止google的滚动。但我的代码不适用于这些iframe。我必须将相同的代码应用于他们正在顺利工作的其他项目。但它不适用于这些iframe。如果我更改了iframe地址，那么它正在运行。

Answer 1

我在pointer-events css属性中看到了空格 指针 - 事件：无;

它应该是： 指针 - 事件：无;

Answer 2

一个带有.overlay的div恰好在每个gmap iframe之前代码将是这样的。

 <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，它对指针事件变得透明，再次激活地图！

我希望得到你的帮助:)。

Answer 3

如果您使用iframe代码，请尝试以下操作：

HTML：将iframe包装到div;
CSS：添加.scrolloff {pointer-events：none};
Javascript：添加以下代码;

jQuery(document).ready(function() {
    jQuery('.map-canvas').addClass('scrolloff');
    jQuery('.my-map').on('click', function() {
        jQuery('.map-canvas').removeClass('scrolloff');
    });
 
    jQuery('.map-canvas').mouseleave(function() {
        jQuery('.map-canvas').addClass('scrolloff');
    });
});

.scrolloff{pointer-events:none}

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

<div class="map-canvas"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2875.295699663181!2d11.09368201550548!3d43.89114207911383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132af65dc5ef10bb%3A0x4983a428073d6747!2sVia+Ermolao+Rubieri%2C+29%2C+59100+Prato+PO!5e0!3m2!1sit!2sit!4v1465019144237" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

滚动关闭功能无法在谷歌地图上运行

3 个答案: