我使用谷歌地图API (v3)在页面上绘制一些地图。我想做的一件事是当你在地图上滚动鼠标滚轮时禁用缩放，但我不知道该怎么做。
我已经禁用了scaleControl(即删除缩放UI元素)，但这并不能阻止滚轮缩放。
下面是我的函数的一部分(这是一个简单的jQuery插件):
$.fn.showMap = function(options, addr){
options = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);
// Code cut from this example as not relevant
};
以防有人对纯css解决方案感兴趣。下面的代码将一个透明div覆盖在映射之上，并在单击映射时将透明div移动到映射后面。覆盖防止缩放，一旦点击，在地图后面，缩放是启用的。
请参阅我的博客文章谷歌地图切换缩放与css解释它是如何工作的，钢笔代码依赖。io/daveybrown/pen/yVryMr用于工作演示。
免责声明:这主要是为了学习，可能不是生产网站的最佳解决方案。
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>
CSS:
.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;
}
在Maps API的版本3中，你可以在MapOptions属性中简单地将scrollwheel选项设置为false:
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
如果你正在使用版本2的地图API，你将不得不使用disableScrollWheelZoom() API调用如下:
map.disableScrollWheelZoom();
在Maps API的版本3中，滚动轮缩放默认是启用的，但在版本2中，它是禁用的，除非通过enableScrollWheelZoom() API调用显式启用。
以防有人对纯css解决方案感兴趣。下面的代码将一个透明div覆盖在映射之上，并在单击映射时将透明div移动到映射后面。覆盖防止缩放，一旦点击，在地图后面，缩放是启用的。
请参阅我的博客文章谷歌地图切换缩放与css解释它是如何工作的，钢笔代码依赖。io/daveybrown/pen/yVryMr用于工作演示。
免责声明:这主要是为了学习，可能不是生产网站的最佳解决方案。
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>
CSS:
.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;
}
以防万一，你正在使用gaps .js库，它使它更简单地做一些事情，如地理编码和自定义引脚，下面是如何使用从前面的答案中学到的技术来解决这个问题。
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 });
}
