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

Question

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

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

我使用了上面的代码，但要查看弹出窗口的全部内容，我需要移动 right/left。

我还想在标记的中心显示弹出窗口。不是它出现left/right边

Answer 1

您可以使用 anchor 选项静态定位弹出窗口：

A string indicating the popup's location relative to the coordinate set via Popup#setLngLat . Options are 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.

参考：https://www.mapbox.com/mapbox-gl-js/api/#popup

至于缩放弹出窗口应该会根据您提供的内容自动进行。但如果你真的需要，你可以 fiddle 使用它的样式，

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

但我真的不建议这样做。如果您需要特定大小左右，我会将内容包含在容器元素中并为其设置样式。

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

How can I show popup fit to the screen size of the mobile device in mapboxgl?

mapbox

mapbox-gl-js

mapbox-gl

mapbox-marker