关于jquery：如何使用Google Maps API禁用鼠标滚轮缩放


How to disable mouse scroll wheel scaling with Google Maps API

我正在使用Google Maps API(v3)在页面上绘制一些地图。 我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放，但我不确定如何。

我已禁用scaleControl(即删除了缩放UI元素)，但这不会阻止滚轮缩放。

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

1
2
3
4
5
6
7
8
9
10
11
12
$.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
};
相关讨论

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

1
2
3
4
5
6
7
8
options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

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

1
map.disableScrollWheelZoom();

默认情况下，在Maps API的版本3中启用scrollwheel缩放，但在版本2中，除非使用enableScrollWheelZoom() API调用明确启用，否则将禁用scrollwheel缩放。

相关讨论

丹尼尔的代码完成了这项工作(感谢一堆！)。但我想完全禁用缩放。我发现我必须使用所有这四个选项来执行此操作：

1
2
3
4
5
6
7
8
{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

请参阅：MapOptions对象规范

相关讨论

以防你想动态地这样做;

1
2
3
4
5
6
7
function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

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

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

相关讨论

把事情简单化！原始谷歌地图变量，没有额外的东西。

1
2
3
4
5
6
 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

截至目前(2017年10月)，Google已经实现了一个特定的属性来处理缩放/滚动，称为gestureHandling。其目的是处理移动设备操作，但它也会修改桌面浏览器的行为。这是官方文件：

1
2
3
4
5
6
7
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'
});

The available values for gestureHandling are:

  • 'greedy': The map always pans (up or down, left or right) when the user swipes (drags on) the screen. In other words, both a one-finger swipe and a two-finger swipe cause the map to pan.
  • 'cooperative': The user must swipe with one finger to scroll the page and two fingers to pan the map. If the user swipes the map with one finger, an overlay appears on the map, with a prompt telling the user to use two fingers to move the map. On desktop applications, users can zoom or pan the map by scrolling while pressing a modifier key (the ctrl or ? key).
  • 'none': This option disables panning and pinching on the map for mobile devices, and dragging of the map on desktop devices.
  • 'auto' (default): Depending on whether the page is scrollable, the Google Maps JavaScript API sets the gestureHandling property to either 'cooperative' or 'greedy'

简而言之，您可以轻松地将设置强制为"始终可缩放"('greedy')，"永不缩放"('none')，或"用户必须按CRTL /？才能启用缩放"('cooperative')。

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

此插件会禁用带有透明叠加div的Google Maps iframe，并为unlockit添加一个按钮。您必须按下650毫秒才能解锁它。

您可以更改所有选项以方便使用。请访问https://github.com/diazemiliano/googlemaps-scrollprevent查看

这是一些例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
(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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}
1
2
3
4
5
6
7
8
9
10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js">

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>

<p>
"Start Scroll Prevent" "Stop Scroll Prevent"

</p>

相关讨论

为了以防万一，您正在使用GMaps.js库，这使得执行地理编码和自定义引脚等操作变得更加简单，以下是使用从先前答案中学习的技术解决此问题的方法。

1
2
3
4
5
6
7
8
9
10
11
12
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 });
}

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

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

您只需添加地图选项：

1
scrollwheel: false

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

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

这是一些例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
1
2
3
4
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<html>
  <body>
     
     
     
     
      <!-- START IMPORTANT part -->
     
         
     
      <!-- END IMPORTANT part-->
     
     
     
     
     
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
     
  </body>
</html>

简单的解决方案：

1
2
3
4
5
6
7
8
9
// 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
});
1
.scrolloff{ pointer-events: none; }
1
2
3
4
5
6
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</html>

资料来源：https：//github.com/Corsidia/scrolloff

相关讨论

只是因为有人对这个纯css解决方案感兴趣。以下代码在地图上覆盖透明div，并在单击时将透明div移动到地图后面。叠加可防止缩放，一旦单击，并在地图后面，即可启用缩放。

请参阅我的博客文章谷歌地图切换缩放与css解释它是如何工作的，并使用笔codepen.io/daveybrown/pen/yVryMr进行工作演示。

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

HTML：

1
2
3
    <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>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.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;
}

我用这个简单的例子来做

jQuery的

1
2
3
4
5
$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.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选项

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

使用那段代码，它将为您提供谷歌地图的所有颜色和缩放控制。 (scaleControl：false和scrollwheel：false将阻止鼠标滚轮向上或向下缩放)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
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'
            });
          }

相关讨论