Mapbox GL JS：在縮放級別更改彈出窗口偏移量

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類。