jquery 宣传单全屏

xwmevbvl  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(127)

我使用的框架codeigniter3
bootrsap 5在header.php中调用
单张Mapcdn(在视图中)
单张.全屏cdn(在视图中)
jquery cdn(in view)
第一步进入全屏关闭模式(工作正常)

<script>
 $("#map").css('z-index', 0);
 $(".sidebar").css('position', 'absolute')
 $(".sidebar").css('z-index', 1);
 $(".sidebar").draggable();
 $(".card-header-sidebar").css('cursor', 'grab');
</script>

当我改变全屏确定(我的问题)
我想保持侧边栏可见
Full screen off
full screen on

falq053o

falq053o1#

有没有解决方案,全屏传单与外部的html内容
其他适应性解决方案:
添加隐藏到侧边栏的类(Html元素)
在Map上创建图例

const legend = L.control({
  position: "topleft"
});

获取html内容

const legend_html = $('#sidebar').html()

将此添加到Map

legend.onAdd = function() {
  let div = L.DomUtil.create("div", "leaflet-legend");
  L.DomEvent.disableClickPropagation(div);
  div.insertAdjacentHTML("beforeend", legend_html);
  return div;
};
legend.addTo(map);

8mmmxcuj

8mmmxcuj2#

使用这个插件真的很混乱,因为有几个插件,安装和使用说明也很混乱。我正在使用它与webpack,这些是基本的:
将以下内容添加到package.json,使用最新的稳定版本的包:

"leaflet.fullscreen": "^2.4.0"

运行:
npm install && make
然后在你的js文件中(确认/node_modules目录下的文件路径:

import 'leaflet.fullscreen/Control.FullScreen';
import 'leaflet.fullscreen/Control.FullScreen.css';

最后,你有多种方法来使用插件:

map = L.map('map',
{
    fullscreenControl: true,
    // OR
    // fullscreenControl: {
    //     pseudoFullscreen: false // if true, fullscreen to page width and height
    // }
}).setView([54.5, -2.3], 6);

相关问题