使用Google Maps API，在点击地图时启用滚轮缩放功能

Question

我正在使用Google Maps API，希望在移动设备上可以滚动网页而不会因使用滚动轮放大地图而放大。

这是我的代码：

var mapOptions = {
  center: new google.maps.LatLng(51.605139, -2.918567),
  zoom: 15,
  scrollwheel: false,
  draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

这很好，但是我想实现的是仅在单击地图时启用滚轮缩放。

（因此，在网页上，当我点击地图时，我可以对其进行缩放，在移动设备上，当我点击屏幕时，然后我可以捏合和缩放/拖动地图。）

我是否可以添加事件监听器以仅在双击或单击时激活可拖动性？
是否可以使用API实现？

---

编辑

我尝试了以下代码，但似乎不起作用：

google.maps.event.addListener(map, 'click', function (event) {
  var mapOptions = {
    draggable: true,

  };
});

- Richlewis

Answer 1

这应该可以正常工作：

        google.maps.event.addListener(map, 'click', function(event){
          this.setOptions({scrollwheel:true});
        });

- Dr.Molle

---

谢谢你提供的代码片段，我已经将它与下面的代码片段一起使用，使我的地图按照我想要的方式工作了。+1 - Baber

感谢你提供优秀的代码。它真的帮助我为客户提供了高质量的工作！ - Anahit Ghazaryan

只是一个小更新 - 在我的情况下，我也想要拖动，所以我为“拖动”事件添加了相同的侦听器。 - Jaroslav Štreit

为了更加完美，可以将这个解决方案与mrcni的解决方案结合起来。SO太棒了 :) - Baz Guvenkaya

Answer 2

google.maps.event.addListener(map, 'mouseout', function(event){
 this.setOptions({scrollwheel:false});  
});

这是对Molle博士回答的一个很方便的补充。

正如它所展示的，当鼠标离开地图时，这将重新禁用滚动缩放功能。

- mrcni

---

谢谢你提供这段代码，结合其他代码片段一起回答了我在这个问题中的疑问。 - Baber

这对于桌面设备非常好，但请注意，在移动设备上“捏合”缩放功能将无法使用。 - Sergi

Answer 3

这是我通常的做法：

用户与地图交互（鼠标按下） -> 设置可缩放
鼠标在地图上停留超过1秒钟 -> 设置可缩放
鼠标离开地图 -> 设置不可缩放

通常这可以完成工作。当用户想要滚动页面时，地图会跟随移动。 当用户想要缩放时，他们需要与之交互或将指针悬停一小段时间。

源代码：

  google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });

- Shashwat Black

Answer 4

我找到了一个解决方案，并收集了完整的代码来禁用加载时的滚动，并在点击时启用滚动缩放。

禁用加载时的滚动：scrollwheel: false， 监听地图上的单击事件并启用滚轮：scrollwheel: true，

map.addListener('click', function() {
    map.set('scrollwheel', true);
});

请在我的博客中找到代码：http://anasthecoder.blogspot.ae/

- Ima

Answer 5

根据Google官方文档，要使其在移动和网站上完美运行，请使用以下内容：

var map = new google.maps.Map(document.getElementById(mapid), {
        gestureHandling: 'greedy',
});

- Hamza Awan

Answer 6

这是我的示例，它对我有效。当页面加载时，谷歌地图（滚轮滚动）处于关闭状态，当您单击地图时（滚轮滚动）会打开。

var map = new google.maps.Map(document.getElementById('map-id'), {
            scrollwheel: false,
        });
        google.maps.event.addListener(map, 'mouseout', function(){
            this.setOptions({scrollwheel:false});
        });
        map.addListener('click', function() {
            map.set('scrollwheel', true);
        });

- Ineta Eidininkaite

Answer 7

这将设置地图，在地图上点击时，如果滚轮值为false，则将其设置为true，如果为true，则将其设置为false。

function initMap() {

      var florida = {
        lat: 27.5814346,
        lng: -81.0534459
      };

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: florida,
        scrollwheel: false
      });


      google.maps.event.addListener(map, 'click', function(event) {
        if (this.scrollwheel == false) {
          this.setOptions({
            scrollwheel: true
          });
        } else {
          this.setOptions({
            scrollwheel: false
          });
        }
      });

    }

- Carl