滚动功能在谷歌地图上不起作用

The Scroll off function is not working on google map

本文关键字：不起作用 谷歌地图 功能 滚动      更新时间：2023-09-26

$(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');            
  });
});
 
.scrolloff {
	pointer - events: none;
}
iframe {
	width: 100 % ;
	height: 260 px;
}
   
<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>

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

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

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

div 在每个 gmap iframe 之前都有一个 .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，它将对指针事件透明，从而再次激活地图！

我希望得到帮助你:)

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

  1. HTML：将 iframe 包装到div ;
  2. CSS： add .scrolloff{pointer-events：none};
  3. 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>

相关文章：