的翻屏功能不工作的谷歌地图

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

<div class="overlay" class="map-container"> 
 
\t <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地址。

来源

2016-02-29 harsh desai

您可以从以下链接获得更好的主意。 [点击这里]（http://stackoverflow.com/questions/2330197/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api） –

但hw可以使用iframe标签我已经使用了我的框架标签。不是纬度和经度来称呼地图。 –

我看到空间在指针事件css属性 pointer - events：none;

它应该是： pointer-events：none;

来源

2016-02-29 07:24:28

在每个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 */ 
}

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

我希望得到帮你:)

来源

2016-02-29 07:39:55

如果你使用iframe代码，试试这个：

HTML：中格包裹的iframe;
CSS：add .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>

来源

2016-06-04 05:44:41 user3173022

的翻屏功能不工作的谷歌地图

回答

相关问题