0

我正在使用 mapbox-gl-js 在响应式容器内显示地图。

无论响应容器的大小如何，我都希望地图保持相同的分辨率，以便调整窗口大小不会影响地图的边界或缩放级别，它只是像静态图像一样缩放地图。

我通过动态计算比例因子并通过 CSS 转换将其应用于容器来实现这一点：

#map {
    width: 100%;
    height: 100%;
}
#map-scaler {
    width: 1280px;
    height: 1280px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: 0 0;
}
#map-container {
    background-color: #fff;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}


    <div id="map-container">
        <div id="map-scaler">
           <div id="map"></div>
        </div>
    </div>


    // Get size of map container for display
    var mapContainer = $("#map-container");
    var mcWidth = mapContainer.width();
    var mcHeight = mapContainer.height();

    // Get size of scaler container
    var scaleContainer = $("#map-scaler");
    var sWidth = scaleContainer.width();
    var sHeight = scaleContainer.height();

    var scaleWidth = mcWidth / sWidth;
    var scaleHeight = mcHeight / sHeight;

    $("#map-scaler").css("transform", "scale(" + scaleWidth + ", " + scaleHeight + ")");

这在视觉上达到了预期的效果。例如，我可以在 500x500 的容器内显示 1280x1280 的地图。

问题是所有鼠标事件现在都“关闭”了。例如，如果您尝试单击地图或滚动缩放，地图会将您的鼠标事件应用到地图的错误区域。

如何补偿我的 CSS 转换，以便鼠标事件准确反映用户点击的位置？

4

1 回答 1

0

你可以试试调整大小的方法吗？正如文档中提到的，该方法会查看您的 div 宽度和高度并调整地图的大小。事件也应该更新。

https://www.mapbox.com/mapbox-gl-js/api/#Map#resize

于 2016-05-23T10:21:51.800 回答