mapboxglのモバイルデバイスの画面サイズに合わせてポップアップを表示するにはどうすればよいですか？

Question

マップボックスのポップアップを自分の携帯端末の画面サイズに合わせたいと思っています。

new mapboxgl.Popup() 
     .setLngLat(e.features[0].geometry.coordinates) 
     .setHTML("htmlString") 
     .addTo(map); 

私は上記のコードを使用しましたが、ポップアップの内容全体を見るためには右/左に移動する必要があります。

また、マーカーの中央にポップアップを表示します。それはあなたが静的にanchorオプションを使用してポップアップを配置することができます/右側

Answer 1

左表示されません：

ポップアップ＃setLngLat介して設定された座標にポップアップの位置を相対的に示す文字列。オプションは「上」、「下」、「左」、「右」、「左上」、「右上」、「左下」、「右下」です。未設定の場合、アンカーは動的に設定され、ポップアップがマップコンテナ内の 'bottom'の設定になるようにします。

参考：ポップアップをスケーリングするようhttps://www.mapbox.com/mapbox-gl-js/api/#popup

は自動にあなたが提供するコンテンツに応じてそれを行うことになっています。しかし、あなたが本当にあなたに必要がある場合は、それがスタイリング、

<div class="mapboxgl-popup"> 
    <div class="mapboxgl-popup-tip"></div> 
    <div class="mapboxgl-popup-content"> 
     <button class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</button> 
     <h1>Hello World!</h1> 
    </div> 
</div> 

だがi'deは本当にに対して助言をいじることができます。特定のサイズが必要な場合は、コンテンツをコンテナ要素に囲み、それをスタイルします。