在智能手机中全屏打开 Leaflet Popup

Question

我不知道如何配置 CSS 让弹出窗口在我的 Leaflet 应用程序中全屏打开，以防人们从小屏幕设备访问它。到目前为止我发现的一切都是如何调整弹出包装的大小。 "width:100%, height:100%" 对我不起作用。

.popupCustom{
    font-family: Verdana;
    font-size: 13px;
    width: 330px;
}
@media (min-width: 768px) and (max-width: 991px) {
    .leaflet-popup-content-wrapper {
        width: 250px;} }
@media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-popup-content-wrapper {
        width: 280px; } }
@media (min-width: 1200px) {
    .leaflet-popup-content-wrapper {
        width: 330px; } 
}

Answer 1

无法完成。 Leaflet 弹出窗口包含在应用了 CSS transform 的块元素中（即地图窗格），因此设置 CSS position property to fixed 的常用技术将无法获得弹出远离其包含块。

您将不得不求助于其他解决方案，例如在地图容器之外添加另一个 HTML 块元素，更新其内容以模仿弹出窗口的内容，并有条件地显示所述元素或根据视口大小弹出，例如：

<!-- HTML -->
<div id='map'></div>
<div id='fullScreenInfo'></div>

/* CSS */
#fullScreenInfo { display: none; }
@media (max-width: 768px) { #fullScreenInfo.visible { display:fixed; left:0; right: 0; top:0; bottom: 0; } }

/* JS */
map.on('popupopen', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.innerHTML = ev.popup.getContent();
  el.classList.add('visible');
});
map.on('popupclose', function(ev){
  var el = document.getElementById('fullScreenInfo');
  el.classList.remove('visible');
});

此外，您应该为用户添加一些 UI 元素以在显示时关闭 "fullscreen popup"（可能会调用 map.closePopup()）。

在智能手机中全屏打开 Leaflet Popup

Open Leaflet Popup fullscreen in smartphones

css

popup

leaflet