如何用谷歌地图API禁用鼠标滚轮缩放功能

我正在使用谷歌地图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
};
Peter Mortensen
已编辑的问题 14日 十二月 2016 в 5:11
编程
jquery google-maps google-maps-api-3 jquery-plugins
24日 二月 2010 в 10:39
32 种观点
对该问题的评论 (2)
解决办法

在第三版的地图API中，你可以简单地在MapOptions属性中把scrollwheel选项设置为false。

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

如果您使用的是第二版地图API，您就必须使用disableScrollWheelZoom()API调用，如下所示。

map.disableScrollWheelZoom();

在地图API的第3版中，"滚动轮 "缩放功能是默认启用的，但在第2版中，除非明确使用 "enableScrollWheelZoom() "API调用来启用，否则它是禁用的。

评论(5)

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

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

见。MapOptions对象规范

Community
编辑本段答案23日 五月 2017 в 10:31
评论(4)

以防你想动态地做这个。

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

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

有时你必须在地图上显示一些"复杂&quot。 在地图上(或者地图是布局的一小部分)，这种滚动缩放的方式就会出现在中间，但是一旦你有了一个干净的地图，这种缩放方式就很好。

Peter Mortensen
编辑本段答案14日 十二月 2016 в 5:21
评论(2)

保持简单! 原版谷歌地图变量，没有多余的东西。

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

}
评论(0)

截至目前（2017年10月），谷歌已经实现了一个特定的属性来处理缩放/滚动，称为gestureHandling。 它的目的是为了处理移动设备的操作，但它也修改了桌面浏览器的行为。 这里是[官方文档][1]中的内容。

&gt.函数 initMap() function initMap() {

var locationRio = {lat: -22.915, lng: -43.197};

变焦：13。

中心。 地点：里约。

gestureHandling。 'none' }); ＆gt; ＆gt; ＆gt; ＆gt; ＆gt; ＆gt; ＆gt;

gestureHandling: 'none' > }); > > gestureHandling的可用值是。

手势处理的可用值是： >

  • '贪婪的'.当用户在屏幕上滑动（拖动）时，地图总是平移（上下、左右）。 当用户滑动（拖动）屏幕时，地图总是平移（上下、左右）。 换句话说，单指轻扫和双指轻扫都会导致地图平移。

  • '合作'。 用户必须用一根手指滑动才能滚动页面，两根手指滑动才能平移地图。 如果用户用一根手指滑动地图，地图上就会出现一个叠加，并提示告诉用户用两根手指移动地图。 在桌面应用程序中，用户可以通过滚动同时按修饰键（ctrl或⌘键）来缩放或平移地图。

  • 'none'。 该选项禁用移动设备上的地图平移和捏合，禁用桌面设备上的地图拖动。 gt;;none'`: 此选项禁止在移动设备上平移和捏住地图，以及在桌面设备上拖动地图。

  • 'auto'（默认）。 根据页面是否可滚动，谷歌地图JavaScript API将手势处理属性设置为'合作'或'贪婪'。

简而言之，你可以轻松地将设置强制为"总是可缩放&quot。 ('贪婪的')，"永远不能缩放&quot。 ('none')，或"用户必须按CRTL/⌘才能启用缩放&quot。 ('合作')。

[1]: https://developers.google.com/maps/documentation/javascript/interaction

评论(0)

我创建了一个比较发达的jQuery插件，可以让你用一个漂亮的按钮锁定或解锁地图。

这个插件用一个透明的叠加div禁用谷歌地图iframe，并添加了一个解锁按钮，你必须按650毫秒才能解锁。 你必须按650毫秒才能解锁它。

你可以改变所有的选项，以方便你。 检查它在https://github.com/diazemiliano/googlemaps-scrollprevent

**这里有一些例子。

<！--开始片段。 js hide: false babel: false -->

(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 {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">

</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

<！--结束片段-->

Emiliano Díaz
编辑本段答案21日 二月 2017 в 4:51
评论(2)

以防万一，你使用的是[GMaps.js][1]库，它可以让你做Geocoding和自定义引脚这样的事情变得更简单一些，下面'就是你如何使用从前面的答案中学到的技术解决这个问题。

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

[1]: https://hpneo.github.io/gmaps/

Peter Mortensen
编辑本段答案14日 十二月 2016 в 5:23
评论(0)

在我的例子中，最关键的是在init中设置'scrollwheel':false。注意。我正在使用[jQuery UI Map]（https://code.google.com/p/jquery-ui-map/）。下面是我的[CoffeeScript][1]init函数标题。

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
Peter Mortensen
编辑本段答案14日 十二月 2016 в 5:19
评论(0)

对于有人想知道如何禁用Javascript谷歌地图API。

如果你点击一次地图，会启用缩放滚动。 当你的鼠标离开div后，就会停用。

这里是一些例子 <！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

var map;
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)
    },
  });
}

//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


      <div class="big-placeholder">
      </div>


      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>


      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>

<！--结束片段-->

评论(0)

你只需要在地图选项中添加即可。

scrollwheel: false
Kiran Kanzar
编辑本段答案29日 六月 2017 в 6:26
评论(0)

一个简单的解决方案。

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">

</div>

<！--结束片段--&gt。

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

评论(0)

如果有人对纯css的解决方案感兴趣的话。 下面的代码是在地图上覆盖一个透明的div，当地图被点击时，透明的div会移动到地图后面。 叠加可以防止缩放，一旦点击，在地图后面，就会启用缩放。

工作原理请参见我的博文[Google maps toggle zoom with css][1]，工作演示请参见pen[codepen.io/daveybrown/pen/yVryMr][2]。

免责声明。 这主要是为了学习，可能不会是生产网站的最佳解决方案。

HTML。

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />


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

[1]: http://web-shed.com/google-maps-toggle-zoom-css/ [2]: http://codepen.io/daveybrown/pen/yVryMr

评论(0)

使用这段代码，将给你所有的颜色和缩放控制的谷歌地图。 (scaleControl: false和scrollwheel: false将防止鼠标滚轮向上或向下缩放)

<！--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#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'
            });
          }

<！--结束片段-->

评论(1)

我用这个简单的考试来做

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,
评论(0)