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

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

禁用滚动加载：scrollwheel：false，在地图上收听点击事件并启用scrollwheel：true，

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

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

Answer 4

这就是我一般所做的事情：

用户与地图互动（mousedown） - ＆gt;设置缩放
  鼠标在地图上停留超过1秒 - ＆gt;设置缩放
  鼠标离开地图 - ＆gt;设置不可缩放

这通常可以完成工作。当用户处于滚动页面的思维模式时，映射如下。当用户想要放大/缩小时，他们需要与它进行交互或将指针放在那里一会儿。

源代码：

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

Answer 5

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

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

Answer 6

这将设置地图，如果滚轮值为false则点击地图，它将使其成立，＆amp;如果是真的会做错。

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

    }

Answer 7

根据Google的官方文档，要使其在手机和网站上都能正常使用，请使用以下

：

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

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

7 个答案: