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

Enable scrollwheel zooming on a map upon click using Google Maps API

提问by Richlewis

I am using the Google Maps API, and wanted to be able to scroll past the map on a mobile device and not have the map zoom when scrolling down a webpage using the scrollwheel.

我正在使用Google Maps API，并且希望能够在移动设备上滚动经过地图，并且在使用滚轮向下滚动网页时不会缩放地图。

Here's my code:

这是我的代码：

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

This is fine but what I would like to achieve is to enable scrollwheel zooming only when the map was clicked.

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

(So on a webpage, when I click the map, I can zoom on it, or a mobile device, when I tap the screen on, then I can pinch and zoom/drag the map around.)

（所以在网页上，当我点击地图时，我可以放大它，或者在移动设备上，当我点击屏幕时，我可以捏和缩放/拖动地图。）

Can I add an event listener to activate draggable only upon double click or single click?
Is it possible using the API?

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

---

---

EDIT

编辑

I have tried the following code, but it doesn't seem to work:

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

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

  };
});

回答by Dr.Molle

This should work:

这应该有效：

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

回答by mrcni

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

this is a handy little consideration in addition to Dr.Molle's answer.

除了莫尔博士的回答之外，这是一个方便的小考虑。

just as it appears, this will re-disable scrollwheel zooming when the mouse leaves the map.

正如它所显示的那样，当鼠标离开地图时，这将重新禁用滚轮缩放。

回答by Ima

I found a solution and gathered complete code for disabling scroll on load and enable scroll zoom on click.

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

Disable scroll on load: scrollwheel: false, Listen to click event on map and enable scrollwheel: true,

在加载时禁用滚动：scrollwheel: false, 监听地图上的点击事件并启用 scrollwheel: true,

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

Please find the code in my blog: http://anasthecoder.blogspot.ae/

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

回答by Shashwat Black

This is what I generally do:

我一般是这样做的：

User interacts with the map (mousedown) -> set zoomable
Mouse rests on the map for over 1 second -> set zoomable
Mouse goes out of the map -> set not zoomable

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

This usually gets the work done. When the user is in the mindset of scrolling the page, the map follows. When the user wants to zoom in/out they need to interact with it or have the pointer there for a short while.

这通常可以完成工作。当用户处于滚动页面的心态时，地图跟随。当用户想要放大/缩小时，他们需要与之交互或将指针放在那里一小会儿。

The source code:

源代码：

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

回答by Ineta Eidininkaite

This is my example and it works for me. When page loads, google map (wheel scroll) is off, when you click on map (wheel scroll) turned on.

这是我的例子，它对我有用。当页面加载时，谷歌地图（滚轮）关闭，当你点击地图（滚轮）打开。

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

回答by Carl

this will set map, on click of map if the scrollwheel value is false it will make it true, & if true will make false.

这将设置地图，如果滚轮值为 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
          });
        }
      });

    }

回答by Hamza Awan

According to official google documentation, to make it work perfectly fine for mobile and website use this:

根据官方 google 文档，要使其在移动设备和网站上完美运行，请使用以下命令：

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