Question

根据我的Mapbox地图的当前缩放级别，标记图标具有不同的大小。我的所有自定义标记都在div容器中，我更改了类以更改它们的大小。

现在我遇到的问题是，如果图标较小，弹出窗口的偏移量（弹出窗口与标记图标的距离）太大。

是否有可能使用缩放级别更改弹出窗口的偏移量？

Answer 1

有时解决方案比预期更容易.Masebox弹出窗口已经有一个类，取决于弹出位置到标记（例如右下角）。与我使用的缩放类一起，我可以使用CSS轻松更改偏移值。这是一个例子。

.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-left,
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-bottom-right
{
    top: 10px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-left {
    top: 6px;
    left: -4px;
}
.zoom-4 > .mapboxgl-popup.mapboxgl-popup-anchor-right {
    top: 6px;
    left: 2px;
}

Answer 2

在我的情况下，没有根据缩放级别应用css类。我要做的是在缩放级别上强制来自侦听器的自定义类。像这样：

this.map.on('zoom', () => {
    if (this.map.getZoom() > 8) {
        // zooming in, remove offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (popup.classList.contains("my-offset-class")) {
                popup.classList.remove("my-offset-class");
            }
        }
    } else {
        // zooming out, add left offset to position
        var popups: any = document.getElementsByClassName("mapboxgl-popup");
        for (let popup of popups) {
            if (!popup.classList.contains("my-offset-class")) {
                popup.classList.add("my-offset-class");
            }
        }
    }
});

这里mapboxgl-popup是弹出窗口的标准css类（如果您将其应用到弹出窗口，则可能要使用想要的任何自定义类），而my-offset-class是用于应用偏移量的css类

Mapbox GL JS：在缩放级别更改弹出窗口偏移量

2 个答案: