使用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,

  };
});

Answer 1

这应该工作:

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

Answer 2

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

除了Dr.Molle的答案之外,这是一个方便的小考虑因素.

就像它出现时一样,当鼠标离开地图时,这将重新禁用滚轮缩放.

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