Question

我正在使用MapBox地图，我遇到以下问题：

在移动设备上，地图不会填满所有页面，因为我需要在其后显示其他内容。

我正在使用map.dragging.disable();，这可以防止按预期拖动地图，但也可以滚动它。那么，如何在不阻止正常滚动行为的情况下禁用该拖动事件？我需要能够滚动，因为地图是图像，但我不想做this。

我也见过this，但它对我没有帮助。

Answer 1

我不知道这是否会有所帮助，但是手动覆盖mapbox会有效。

<!-- Wrapper -->
<div style="position: relative;">
  <!-- Mapbox object -->
  <div id="mapbox"></div>
  <!-- Overlay -->
  <div style="height: 200px; position: absolute; top: 0; width: 100%;"></div>
</div>

此外，您可以将叠加显示从块切换为无，以便再次拖动地图。

Answer 2

我也遇到过这个问题。出于好奇，您使用的是什么版本的mapbox？我不记得在过去的版本中这是一个问题。我在v2.2.1。

我在我的网站上使用Modernizr，我实施的解决方案是在z-index: -1类存在时将.touchevents属性应用于地图容器。这样您就不需要在页面中添加不必要的标记。

<强> HTML

<div id="map"></div>

<强> CSS

.touchevents #map {
    position: relative;
    z-index: -1;
}

如果您不使用Modernizr，我会鼓励您，但如果您出于任何原因无法通过媒体查询在较小的浏览器宽度上应用z-index。不太理想，但总比没有好。

MapBox dragging.disable函数阻止移动页面的滚动

2 个答案: