使用Google Maps API在地图上启用滚轮缩放功能

我正在使用Google Maps API，并且希望能够在移动设备上滚动浏览地图，并且在使用滚轮向下滚动网页时不需要缩放地图。使用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, 

    }; 
});

来源

2013-03-10 Richlewis

这应该工作：

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

来源

2013-03-10 22:02:14

感谢您对我有代码段用它下面让我的地图我的工作怎么想+1 – Baber 2014-04-13 11:08:22

THX为好code.It的代码片段真的帮助我给我的客户质量的工作！ – 2015-01-19 12:09:36

只是小小的更新 - 在我的情况下，我也想拖动，所以我为'拖'事件 – 2015-01-30 09:22:32

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

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

就像它出现，当鼠标离开地图时，这将重新禁用滚轮缩放。

来源

2014-03-25 22:25:33 mrcni

谢谢你这个片段，它回答了我的问题，结合其他片段提供了这个问题的答案。 – Baber 2014-04-13 11:07:39

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

负载禁用滚动：滚轮：假的，听在地图上点击事件，使滚轮：真实，

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

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

来源

2015-11-18 14:00:21 Ima

这是我一般做：

用户与地图（鼠标按下）相互作用 - >设置的可缩放
鼠标搁置在地图超过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-02 18:09:15

这是我的榜样，它为我工作。当页面加载时，谷歌地图（轮盘滚动）关闭，当您点击地图（滚轮滚动）打开。

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-08 13:02:07

如果滚轮值为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 
      }); 
     } 
     }); 

    }

来源

2017-05-23 23:15:07 Carl

使用Google Maps API在地图上启用滚轮缩放功能

回答

相关问题