如何在mapboxgl中显示适合移动设备屏幕大小的弹出窗口?

如何在mapboxgl中显示适合移动设备屏幕大小的弹出窗口?,mapbox,mapbox-gl-js,mapbox-gl,mapbox-marker,Mapbox,Mapbox Gl Js,Mapbox Gl,Mapbox Marker,我想使我的mapboxgl弹出窗口适合我的移动设备屏幕大小 new mapboxgl.Popup() .setLngLat(e.features[0].geometry.coordinates) .setHTML("htmlString") .addTo(map); 我使用了上面的代码,但要查看弹出窗口的全部内容,我需要向右/向左移动 我还想在标记的中心显示弹出窗口。不显示为左/右侧您可以使用锚定选项静态定位弹出窗口: 一个字符串,指示通过popup#s

我想使我的mapboxgl弹出窗口适合我的移动设备屏幕大小

  new mapboxgl.Popup()
      .setLngLat(e.features[0].geometry.coordinates)
      .setHTML("htmlString")
      .addTo(map);
我使用了上面的代码,但要查看弹出窗口的全部内容,我需要向右/向左移动


我还想在标记的中心显示弹出窗口。不显示为左/右侧

您可以使用
锚定
选项静态定位弹出窗口:

一个字符串,指示通过popup#setLngLat相对于坐标集的弹出位置。选项有“上”、“下”、“左”、“右”、“左上”、“右上”、“左下”和“右下”。如果取消设置,将动态设置锚点,以确保弹出窗口位于地图容器内,并首选“底部”

参考:

至于缩放,弹出窗口应该根据您提供的内容自动进行缩放。但如果你真的需要,你可以随意摆弄它的造型

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

×
你好,世界!
但我真的不建议这样做。如果您需要一个特定的大小,我将把内容放在一个容器元素中,并设置它的样式