如何在 mapboxgl 中显示适合移动设备屏幕尺寸的弹出窗口？答案

【问题标题】：How can I show popup fit to the screen size of the mobile device in mapboxgl?如何在 mapboxgl 中显示适合移动设备屏幕尺寸的弹出窗口？
【发布时间】：2017-07-07 06:00:13
【问题描述】：

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

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

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

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

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl mapbox-marker

【解决方案1】：

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

一个字符串，指示弹出窗口相对于通过 Popup#setLngLat 设置的坐标的位置。选项是 'top' 、 'bottom' 、 'left' 、 'right' 、 'top-left' 、 'top-right' 、 'bottom-left' 和 'bottom-right' 。如果取消设置，锚点将被动态设置，以确保弹出窗口位于地图容器内，并优先选择“底部”。

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

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

【讨论】：