Mapbox：禁用滚动缩放，而是使用 ctr+scroll

Question

我有一张地图想集成到页面中。当我简单地滚动它时，地图不会缩放，我可以查看下一个内容。但是当我 ctrl + 滚动地图时，它会放大。

我如何使用 mapbox 做到这一点？

Answer 1

试试这个，其中 map 是您的地图变量。此外，您可以将此事件绑定到某些 div，我认为，而不是整个 window。

$(window).bind('mousewheel DOMMouseScroll', function(event) 
{
    if(event.ctrlKey == true) {
        map['scrollZoom'].enable();
    }
    else {
        map['scrollZoom'].disable();
    }
});

Answer 2

试试这个（不需要 jquery）：

map.on("wheel", event => {
  if (event.originalEvent.ctrlKey) {
    return;
  }

  if (event.originalEvent.metaKey) {
    return;
  }

  if (event.originalEvent.altKey) {
    return;
  }

  event.preventDefault();
});

见https://github.com/mapbox/mapbox-gl-js/issues/6884

Mapbox：禁用滚动缩放，而是使用 ctr+scroll

Mapbox: disable zoom on scroll, but use ctr+scroll instead

javascript

mapbox

mapbox-gl-js