14

我正在使用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,

  };
});
4

7 回答 7

27

这应该有效：

        google.maps.event.addListener(map, 'click', function(event){
          this.setOptions({scrollwheel:true});
        });
于 2013-03-10T22:02:14.780 回答
16 
google.maps.event.addListener(map, 'mouseout', function(event){
 this.setOptions({scrollwheel:false});  
});

除了 Dr.Molle 的回答之外，这是一个方便的小考虑。

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

于 2014-03-25T22:25:33.290 回答
4

这是我通常做的：

用户与地图交互（mousedown）-> 设置可缩放
鼠标在地图上停留超过 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);
  });
于 2016-06-02T18:09:15.747 回答
3

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

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

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

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

于 2015-11-18T14:00:21.017 回答
0

这将设置地图，单击地图时，如果滚轮值为假，则为真，如果为真，则为假。

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

    }
于 2017-05-23T23:15:07.660 回答
0

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

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);
        });
于 2016-12-08T13:02:07.260 回答
0

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

var map = new google.maps.Map(document.getElementById(mapid), {
        gestureHandling: 'greedy',
});
于 2019-05-14T08:11:34.003 回答