Как я могу отобразить всплывающее окно в соответствии с размером экрана мобильного устройства в mapboxgl?

Я хочу, чтобы всплывающее окно mapboxgl соответствовало размеру экрана моего мобильного устройства.

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

Я использовал приведенный выше код, но чтобы увидеть все содержимое всплывающего окна, мне нужно двигаться вправо/влево.

Также я хочу показать всплывающее окно в центре маркера. Не появляется левая/правая сторона


mapbox mapbox-gl-js mapbox-gl mapbox-marker
person Rajaa    schedule 07.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете статически расположить всплывающее окно, используя опцию 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>

Но я действительно советую против этого. Если вам нужен определенный размер или около того, я включу содержимое в элемент контейнера и стилизую его.

person iH8    schedule 07.07.2017