Question

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

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

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

另外，我想在标记的中心显示弹出窗口。不是它出现在左/右侧

Answer 1

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

一个字符串，表示弹出窗口相对于通过Popup＃setLngLat设置的坐标的位置。选项包括“顶部”，“底部”，“左侧”，“右侧”，“左上角”，“右上角”，“左下角”和“右下角”。如果取消设置，将动态设置锚点，以确保弹出窗口位于地图容器中，并优先选择“底部”。

参考：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>

但我真的建议反对。如果你需要一个特定的大小，那么我将内容包含在容器元素和样式中。

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

1 个答案: