在嵌入式Google地图上禁用鼠标滚轮缩放

Question

我在WordPress网站上工作，在大多数帖子中，作者通常使用iFrame嵌入Google Maps。有没有一种方法可以使用Javascript通过鼠标滚轮禁用缩放功能？

Answer 1

我扩展了@nathanielperales解决方案。

下面的行为描述：

点击地图以启用滚动

当鼠标离开地图时，禁用滚动

在javascript代码下方：

// Disable scroll zooming and bind back the click event

var onMapMouseleaveHandler = function (event) {

  var that = $(this);

  that.on('click', onMapClickHandler);

  that.off('mouseleave', onMapMouseleaveHandler);

  that.find('iframe').css("pointer-events", "none");

}

var onMapClickHandler = function (event) {

  var that = $(this);

  // Disable the click handler until the user leaves the map area

  that.off('click', onMapClickHandler);

  // Enable scrolling zoom

  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event

  that.on('mouseleave', onMapMouseleaveHandler);

}

// Enable map zooming with mouse scroll when the user clicks the map

$('.maps.embed-container').on('click', onMapClickHandler);