Jquery 如何使用Google Maps API禁用鼠标滚轮缩放

我正在使用谷歌地图API（v3）在一个页面上绘制一些地图。我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放，但我不确定如何操作

我已禁用scaleControl（即删除了缩放UI元素），但这并不阻止滚轮缩放

这是我函数的一部分（它是一个简单的jQuery插件）：

---

在Maps API的第3版中，您只需在以下属性中将

滚动轮

选项设置为false：

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

如果您使用的是Maps API的版本2，则必须按如下方式使用API调用：

map.disableScrollWheelZoom();

在Maps API的第3版中，默认情况下启用了

scrollwheel

缩放，但在第2版中，除非通过

enableCollwheelZoom（）

API调用显式启用，否则它将被禁用。

完成此任务（感谢堆！）。但我想完全禁用缩放功能。我发现我必须使用这四个选项：

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

---

请参阅：

在我的例子中，关键是在init中设置

'scrollwheel'：false

。注意：我正在使用。下面是我的init函数标题：

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->

---

以防您希望动态地执行此操作

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

---

有时你必须在地图上显示一些“复杂”（或者地图是布局的一小部分），这个滚动缩放在中间，但是一旦你有了一个干净的地图，这种缩放方法是很好的。

保持简单！原始谷歌地图变量，没有额外的东西

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

---

为了以防万一，您正在使用该库，这使得地理编码和自定义PIN等操作变得更简单，下面介绍如何使用从前面的答案中学习的技术解决此问题

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}

---

我创建了一个更完善的jQuery插件，它允许你用一个漂亮的按钮锁定或解锁地图

此插件使用透明覆盖div禁用Google Maps iframe，并添加一个用于解锁的按钮。必须按住650毫秒才能解锁

为了方便起见，您可以更改所有选项。查一下

这里有一些例子。

（函数（）{
$（函数（）{
$（“#btn开始”）。单击（函数（）{
$（“iframe[src*='google.com/maps']）。滚动防止({
打印日志：对
}).start（）；
返回$（“#btn停止”）。单击（函数（）{
返回$（“iframe[src*='google.com/maps']）；
});
});
返回$（“#btn开始”）。触发（“单击”）；
});
}).打电话（这个）
.embed容器{
职位：相对！重要；
填充底部：56.25%！重要；
高度：0！重要；
溢出：隐藏！重要；
最大宽度：100%！重要；
}
.嵌入容器iframe{
位置：绝对！重要；
顶部：0！重要；
左：0！重要；
宽度：100%！重要；
身高：100%！重要；
}
.mapscroll wrap{
位置：静态！重要；
}


以防万一，任何人都对这方面的纯css解决方案感兴趣。下面的代码将透明div覆盖在地图上，并在单击时将透明div移动到地图后面。一旦单击，覆盖将阻止缩放，并且在地图后面将启用缩放

请参阅我的博客文章，了解它的工作原理，并使用钢笔进行演示

免责声明：这主要是为了学习，可能不是制作网站的最佳解决方案

HTML:

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

对于那些想知道如何禁用Javascript谷歌地图API的人

如果单击地图一次，它将启用缩放滚动。并在鼠标退出div后禁用

以下是一些示例
var映射；
var元素=document.getElementById（'map-canvas'）；
函数initMaps（）{
map=新的google.maps.map（元素{
缩放：17，
滚轮：错误，
中心：{
lat:parseFloat（-33.915916），
液化天然气：液化天然气（151.147159）
},
});
}
//开始重要的部分
//禁用地图上的滚动（更平滑的用户体验）
jQuery（'.map container'）.on（“mouseleave”，function（））{
setOptions（{scrollwheel:false}）；
});
jQuery（'.map container'）.on（“mousedown”，function（））{
setOptions（{scrollwheel:true}）；
});
//结束重要部分
.big占位符{
背景色：#1da261；
高度：300px；
}

一个简单的解决方案：


//在地图中禁用鼠标滚动
//仅在单击时启用指针事件；
$（'.gmap wrapper'）。在（'click'，函数（）{
$（'.gmap wrapper iframe'）.removeClass（'scrolloff'）；//单击时将指针事件设置为true
});
//当鼠标离开画布区域时，要禁用指针事件；
$（“.gmap包装器”）.mouseleave（函数（）{
$（'.gmap wrapper iframe'）.addClass（'scrolloff'）；//当鼠标离开映射区域时，将指针事件设置为无
});
.scrolloff{指针事件：无；}
使用这段代码，它将为您提供谷歌地图的所有颜色和缩放控制。（scaleControl:false和滚轮：false将阻止鼠标滚轮放大或缩小）


函数initMap（）{
//在夜间模式下设置地图样式。
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:23.684994，lng:90.356331}，
缩放：8，
scaleControl:false，
滚轮：错误，
风格：[
{elementType:'geometry'，样式：[{color:'F1F2EC'}]}，
{elementType:'labels.text.stroke'，样式器：[{color:'877F74'}]}，
{elementType:'labels.text.fill'，样式器：[{color:'877F74'}]}，
{
featureType:“administrative.Location”，
elementType:'labels.text.fill'，
斯特勒
<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

function init() { 
    var mapOptions = {  
        scrollwheel: false, 

scrollwheel: false

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});