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

在 Maps API 版本 3 中，您只需在 MapOptions 属性中将 scrollwheel 选项设置为 false：

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

如果您使用的是 Maps API 版本 2，则必须使用 disableScrollWheelZoom() API 调用，如下所示：

map.disableScrollWheelZoom();

scrollwheel 缩放在 Maps API 版本 3 中默认启用，但在版本 2 中它被禁用，除非通过 enableScrollWheelZoom() API 调用明确启用。

---

Daniel's code 完成了这项工作（非常感谢！）。但我想完全禁用缩放。我发现我必须使用所有这四个选项才能这样做：

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

请参阅：MapOptions object specification

---

以防万一您想动态执行此操作；

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

}

---

截至目前（2017 年 10 月），Google 已经实施了一个特定的属性来处理缩放/滚动，称为 gestureHandling。它的目的是处理移动设备的操作，但它也修改了桌面浏览器的行为。这是来自 official documentation：

函数 initMap() { var locationRio = {lat: -22.915, lng: -43.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: locationRio, gestureHandling: 'none' });手势处理的可用值有： 'greedy'：当用户滑动（拖动）屏幕时，地图总是平移（向上或向下、向左或向右）。换句话说，单指滑动和双指滑动都会导致地图平移。 “合作”：用户必须用一根手指滑动来滚动页面，用两根手指滑动来平移地图。如果用户用一根手指滑动地图，地图上会出现一个叠加层，并提示用户用两根手指移动地图。在桌面应用程序上，用户可以通过在按下修饰键（ctrl 或 ⌘ 键）的同时滚动来缩放或平移地图。 “无”：此选项禁用移动设备在地图上的平移和捏合，以及在桌面设备上拖动地图。 'auto'（默认）：根据页面是否可滚动，Google Maps JavaScript API 将gestureHandling 属性设置为'cooperative' 或'greedy'

简而言之，您可以轻松地将设置强制设置为“始终可缩放”（'greedy'）、“从不缩放”（'none'）或“用户必须按 CRTL/⌘ 才能启用缩放”（'cooperative'）。

---

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

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

为方便起见，您可以更改所有选项。在 https://github.com/diazemiliano/googlemaps-scrollprevent 检查它

这是一些例子。

(function() { $(function() { $("#btn-start").click(function() { $("iframe[src*='google.com/maps']").scrollprevent({ printLog : true }).start(); return $("#btn-stop").click(function() { return $("iframe[src*='google.com/maps']").scrollprevent(). stop(); }); }); return $("#btn-start").trigger("click"); }); }).call(this); .embed-container { 位置：相对！重要； padding-bottom: 56.25% !important;高度：0！重要；溢出：隐藏！重要；最大宽度：100%！重要； } .embed-container iframe { 位置：绝对！重要；顶部：0！重要；左：0！重要；宽度：100%！重要；高度：100%！重要； } .mapscroll-wrap { 位置：静态！重要； }

"开始滚动阻止" "停止滚动阻止"

---

就我而言，关键是在 init 中设置 'scrollwheel':false。注意：我正在使用 jQuery UI Map。下面是我的 CoffeeScript 初始化函数标题：

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

---

以防万一，您正在使用 GMaps.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 });
}

---

对于想知道如何禁用 Javascript Google Map API 的人

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

这是一些例子

变量映射； var element = document.getElementById('map-canvas'); function initMaps() { map = new google.maps.Map(element , { zoom: 17, scrollwheel: false, center: { lat: parseFloat(-33.915916), lng: parseFloat(151.147159) }, }); } //开始重要部分 //禁用地图上的滚动（更流畅的用户体验） jQuery('.map-container').on("mouseleave", function(){ map.setOptions({ scrollwheel: false }); }) ; jQuery('.map-container').on("mousedown", function() { map.setOptions({ scrollwheel: true }); }); //结束重要部分 .big-placeholder { background-color: #1da261;高度：300px； }

---

您只需要添加地图选项：

scrollwheel: false

---

一个简单的解决方案：

// 禁用地图中的鼠标滚动 // 仅在单击时启用指针事件； $('.gmap-wrapper').on('click', function () { $('.gmap-wrapper iframe').removeClass('scrolloff'); // 设置点击事件为真 }); // 你想在鼠标离开画布区域时禁用指针事件； $(".gmap-wrapper").mouseleave(function () { $('.gmap-wrapper iframe').addClass('scrolloff'); // 鼠标离开地图区域时设置指针事件为无 }) ; .scrolloff{ 指针事件：无； }

来源：https://github.com/Corsidia/scrolloff

---

以防万一有人对此的纯 css 解决方案感兴趣。以下代码在地图上覆盖了一个透明 div，并在单击时将透明 div 移动到地图后面。叠加层可防止缩放，一旦单击，在地图后面，就会启用缩放。

请参阅我的博文 Google maps toggle zoom with css 了解它的工作原理，并查看我的博客文章 codepen.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;
}

---

使用那段代码，它将为您提供谷歌地图的所有颜色和缩放控制。 （scaleControl: false 和 scrollwheel: false 将阻止鼠标滚轮放大或缩小）

function initMap() { // 在夜间模式下设置地图样式。 var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 23.684994, lng: 90.356331}, zoom: 8, scaleControl: false, scrollwheel: false, styles: [ {elementType: '几何'，样式器：[{color：'F1F2EC'}]}，{elementType：'labels.text.stroke'，样式器：[{color：'877F74'}]}，{elementType：'labels.text.fill '，样式器：[{color：'877F74'}]}，{ featureType：'administrative.locality'，elementType：'labels.text.fill'，样式器：[{color：'#d59563'}]}，{ featureType ：'poi'，elementType：'labels.text.fill'，样式器：[{color：'#d59563'}]}，{ featureType：'poi.park'，elementType：'geometry'，样式器：[{color： '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road', elementType: '几何'，样式：[{color：'F5DAA6'}] }，{ featureType：'road'，elementType：'geometry.stroke'，样式：[{color：'#212a37'}]}，{ featureType：'道路'，元素类型：'labels.text.fill'，样式器：[{color：'#f77c2b'}]}，{特征类型： 'road.highway'，elementType：'geometry'，样式器：[{color：'#746855'}]}，{ featureType：'road.highway'，elementType：'geometry.stroke'，样式器：[{color：' F5DAA6'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: 'F5DAA6'}] }, { featureType: 'transit', elementType: 'geometry' , 样式器: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', 样式器: [{color: '#f77c2b3'}] }, { featureType ：'水'，元素类型：'几何'，样式：[{color：'#0676b6'}]}，{特征类型：'水'，元素类型：'labels.text.fill'，样式：[{颜色：'# 515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); var marker = new google.maps.Marker({ position: {lat: 23.684994, lng: 90.356331}, map: map, title: 'BANGLADESH' }); }

---

我用这个简单的例子来做

jQuery

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

CSS

.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;
}

或者使用 gmap 选项

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

---