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

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

本文关键字：启用 滚动 缩放 地图 Maps Google API 使用      更新时间：2023-09-26

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

这应该有效：

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

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

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

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

这是我通常要做的：

用户与地图交互(鼠标向下(->设置可缩放
鼠标在地图上停留超过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);
  });

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

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

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

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

根据谷歌官方文档，为了使其在移动和网站上完美工作，请使用以下内容：

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

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

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

这将设置map，在点击map时，如果滚动轮值为false，它将使其为true，&如果真的话，就会变成假的。

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
          });
        }
      });
    }
相关文章：