leaflet 的 marker 弹框 iframe 嵌套代码

A页面嵌套 B页面的代码

主要处理 leaflet 的 marker 的 popopen, marker的点击的显示/隐藏 pop 会导致pop中的页面的内容，消失，不在页面中，导致bootstrap的冻结表格实现不了（元素节点还没加载出来，自然冻结不了）

把B页面嵌在 A 页面的marker 的弹窗中

A页面部分代码：

// ---------------点击弹出信息/str----------let marker = L.marker([31.749662, 120.63073]).addTo(map)marker.bindPopup('<div style="width:100%;height:100%">'+'<iframe style="width:100%;height:100%;" frameborder=0 border=0 scrolling="no" name="iframe1" src="projectFXHG.html"></iframe>'+'</div>', { minWidth: 300, maxHeight: 320 })

B页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>调用地图【EPSG：4490】</title><link rel="stylesheet" href="./Lib/JS/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="./Lib/JS/bootstrap-table/bootstrap-table.css"><link rel="stylesheet" href="./Lib/JS/bootstrap-table-fixed-columns-master/bootstrap-table-fixed-columns.css"><link rel="stylesheet" href="Lib/leaflet.css"><script src="Lib/jquery.min.js"></script><script src="./Lib/JS/bootstrap/js/bootstrap.js"></script><script src="./Lib/JS/bootstrap-table/bootstrap-table.js"></script><script src="./Lib/JS/bootstrap-table-fixed-columns-master/bootstrap-table-fixed-columns.js"></script><script src="./Lib/JS/echarts/echarts.js"></script><script src="Lib/leaflet.js"></script><script src="Lib/proj4.js"></script><script src="Lib/proj4leaflet.js"></script><script src="Lib/esri-leaflet_v2.2.4.js"></script><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif;}.box {position: absolute;z-index: 1001;width: 100vh;color: white;}.infor {position: absolute;z-index: 1001;TOP: 20%;border: 1px green solid;height: 450px;background-color: white;color: #5e636c;display: flex;flex-direction: column;width: 300px;}.pop-li1 {border: 1px solid #d8dce5;width: 35%;padding: 5px;}.pop-li2 {border: 1px solid #d8dce5;width: 64%;padding: 5px;}.pop-table {margin-top: 9px;}.checked {border-bottom: 0px;background-color: #38a0f4;}#eventList:hover {cursor: pointer;background-color: #38a0f469;}#before24:hover {cursor: pointer;background-color: #38a0f469;}.leaflet-container a {color: black;}.leaflet-popup-content {width: 300px !important;height: 290px;background-color: #fff;position: relative;padding: 5px;}#map {margin: 0 auto;height: 100%;widows: 100%;}</style>
</head><body><div style="width:100%;height:100%;"><div style="margin-bottom: 5px;"><div style="display: inline-block;width: 12px;height: 14px;background-color: #38a0f4;"></div><span style="color:#38a0f4;margin-left: 6px;">点位2</span></div><ul class="nav nav-pills"><li id="eventList" class="active pop-li1 checked" οnclick="checked()">报警事件列表</li><li id="before24" class="pop-li2" οnclick="initEcharts()">前后24小时污染物浓度趋势</li></ul><div class="tab-content pop-table"> <div class="tab-pane active" id="A" style="height:200px;"> <table id="poptable" class="table table-bordered table-hover"  data-toggle="table"   data-classes="table table-hover" data-show-columns="false"   data-striped="true"   data-show-toggle="false"  data-search="false"  data-show-refresh="false"  data-toolbar="#toolbar"  data-height="220" > <thead> <tr> <th>报警时间</th> <th>报警内容</th> </tr> </thead> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> <tr> <td>2018-08-18 08:30:34</td> <td>小时超标报警</td> </tr> </table> </div> <div class="tab-pane" id="B"> <div style="display: flex;margin-top: 12px;"> <div style="width: 26%;padding-top: 7px;"> 查询因子： </div> <div style="flex-grow:1"> <select class="form-control"> <option>SOz</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div id="main" style="width: 300px;height:180px;overflow:auto;margin-top:15px"></div> </div></div></div><script>function checked() {if ($("#eventList").hasClass("checked")) {$("#before24").removeClass("checked")$("#B").removeClass("active")$("#A").addClass("active")} else {$("#eventList").addClass("checked")$("#before24").removeClass("checked")$("#B").removeClass("active")$("#A").addClass("active")}}function initEcharts() {// $('.leaflet-popup-content-wrapper').css({'width':'283px','height': '232px'});$("#before24").addClass("checked");$("#eventList").removeClass("checked")$("#A").removeClass("active")$("#B").addClass("active")var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {// 给echarts图设置背景色backgroundColor: '#FBFBFB',title: {text: '2019-06-13',textStyle: {fontSize: '12'}},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['SQz']},grid: {top: '20%',left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{axisLabel: {rotate: 30,interval: 0},type: 'category',boundaryGap: false,data: function () {let list = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']return list;}()}],yAxis: { type: 'value' },series: [{name: 'SQz',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',color: '#007bff',smooth: true,symbolSize: 10}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}</script>
</body></html>

转载于:https://www.cnblogs.com/yingyigongzi/p/11024406.html

leaflet 的 marker 弹框 iframe 嵌套代码相关推荐

android APP隐私政策弹框的实现代码实例
android APP隐私政策弹框的实现代码实例步骤一:在assets目录下放置隐私政策的文本文件,比如privacy.txt 步骤二:在drawable目录下放置圆角弹出框演示: <?xml ...
element-ui dialog（多弹框、嵌套弹框）被蒙版遮住
我的情况是,在一个弹框中,点击按钮再弹出了一个弹框,第二个弹框被蒙层遮住了. 看官方文档,查阅了下资料 https://element.eleme.cn/#/zh-CN/component/dial ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
android 仿ios 底部弹出,项目需求讨论-仿ios底部弹框实现及分析
hi,在项目开发中,有时候需要仿照ios的底部弹框做效果,比如我们在iPhone上面关闭定位的时候,就会弹出ios特有的底部弹框: 屏幕快照 2017-10-09 08.20.30 PM.png 弹框 ...
Layui的layer.confirm弹框用法，很详细
目录一.官网示例二.自定义一些样式 1.自定义标题 2.给提示框内容加上图标值为:6编辑 3.定义按钮的位置 4.自定义关闭按钮值为:2编辑 5.自定义遮罩将"shade&qu ...
删除提示框 MessageBox弹框
当删除table表格中的一条数据时,需要给与确认删除提示如下: 可使用 element-ui中的MessageBox弹框.如下代码 handleDelete(index, row) {this.$co ...
自定义IOS系统弹框
写在之前系统的弹框虽然很好看,但是有时候无法完全满足UI设计的需求,比如说中间要显示一个输入框,或者要放置一张图片,这里介绍一个很早之前的自定义弹框库,这个自定义弹框sdk写的很细致,定制性很强,几 ...
android用sku算法仿淘宝选择颜色分类弹框。
当规格超出边界会自动换行,点击规格会根据算法判断关联规格,无则灰显,全部选中后则变化图片.代码是kotlin和java混合. 效果如下,当一行显示不下所有规格时,会自动换行.用的夜神模拟器,分辨率有点 ...
练习：LOL 英雄列表（加入弹框修改英雄名称）
此图是代表ios8前后创建弹框的方法对比: 设置弹框内容: 列表的实现代码就不详细列出了,此处仅对弹框部分实现代码做展示. 调用了 UITableViewDelegate 和 UIAlertVi ...

leaflet 的 marker 弹框 iframe 嵌套代码

leaflet 的 marker 弹框 iframe 嵌套代码相关推荐

最新文章

热门文章