Mapbox GL JS：ズームレベルのポップアップオフセットを変更する

Question

マップマップの現在のズームレベルに応じて、マーカーアイコンのサイズが異なります。すべてのカスタムマーカーはdivコンテナにあり、クラスを変更してサイズを変更します。

今、アイコンが小さい場合、ポップアップ（マーカーアイコンまでのポップアップの距離）のオフセットが大きすぎるという問題があります。

ズームのレベルでもポップアップのオフセットを変更する可能性はありますか？

Answer 1

時にはソリューションが予想よりも簡単です。マップボックスのポップアップには、マーカーのポップアップ位置（たとえば、右下）に応じたクラスが既に用意されています。ズームクラスと一緒に私はさらに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; 
}