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" onclick="checked()">报警事件列表</li>
<li id="before24" class="pop-li2" onclick="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>
leaflet 的 marker 弹框 iframe 嵌套代码的更多相关文章
- 分享一下在aspx页面弹框的设置代码
public static class MessageBox { /// <summary> /// 显示消息提示对话框 /// </summary> /// <para ...
- 微信小程序之底部弹框预约插件
代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- layer弹框在实际项目中的一些应用
官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...
- vue 弹框
弹框展示: 代码: <template> <div> <el-col :span="9" style="text-align: right; ...
- layer的iframe弹框中父子元素的传值
项目中,左侧导航树,右侧是 iframe 嵌套的页面,在右侧页面中又有layer弹框,可以说是有两层 iframe 框架. 所以查询网上的parent什么的方法都不能用.自己摸索的下面的方法: 1.父 ...
- selenium常用api之切换：table切换、alert弹框切换、iframe框架切换
10.查看浏览器打开了多少个table和当前页面在哪个table 测试:打开了浏览器后,打开了一个新的标签页之后,显示此时有2个table,浏览器中当前页面展示的是第2个页面,但是代码打印显示的仍然是 ...
- git 本地提交代码到 github 远程库，没有弹框 github login
git 本地提交代码到 github 远程库,没有弹框 github login: 原因: win10 有个凭据管理器,给保存了历史登陆用户名密码,导致无法切换用户. 解决办法: 删除历史登陆用户 ...
- python selenium处理iframe和弹框（一）
处理iframe和弹框 # encoding:utf-8 from selenium import webdriver import time driver = webdriver.Firefox() ...
- easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm
项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...
随机推荐
- 入门Kubernetes-Service
一.前言 前一篇文章通过 Deployment 实现了Pod中服务实现滚动更新/回滚等操作:在真实应用场景中,需要将一组Pod提供给外部访问.而且Pod生命周期是短暂的,在 Pod 的生命周期过程中, ...
- Java程序设计（2021春）——第三章类的重用笔记与思考
Java程序设计(2021春)--第三章类的重用笔记与思考 本章概览: 3.1 类的继承(概念与语法) 3.2 Object类(在Java继承最顶层的类) 3.3 终结类和终结方法(只能拿来用,不可以 ...
- .h .cpp区别
首先,我们可以将所有东西都放在一个.cpp文件内. 然后编译器就将这个.cpp编译成.obj,obj是什么东西? 就是编译单元了.一个程序,可以由一个编译单元组成, 也可以有多个编译单元组成. 如果你 ...
- 如何快速更新长缓存的 HTTP 资源
前言 HTTP 缓存时间一直让开发者头疼.时间太短,性能不够好:时间太长,更新不及时.当遇到严重问题需紧急修复时,尽管后端文件可快速替换,但前端文件仍从本地缓存加载,导致更新长时间无法生效. 对于这个 ...
- kubespray-2.14.2安装kubernetes-1.18.10(ubuntu-20.04.1)
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Unittest方法 -- 测试分离
一.下面是it.py 脚本,把浏览器前置和后置条件分离了"""套件公用测试类可进行分离"""import unittestfrom sele ...
- 微信小程序云开发-数据库-商品列表数据显示N条数据
一.wxml文件 在wxml文件中,写页面和点击事件,添加绑定事件limitGoods 二.js文件 在js文件中写limitGoods(),使用.limit(3)表示只显示3条数据
- Android Studio（或IntelliJ IDEA ）把Android程序运行到由VirtualBox创建 Android x86虚拟机中
一.运行前相关配置 1.把Android sdk platform-tools目录下的adb程序加入到path环境变量,默认情况下是其路径是: C:/Users/ [User]/AppData/Loc ...
- 全站 HTTPS 就一定安全了吗？
随着网络技术手段不断地更新迭代,互联网安全对于企业和个人的重要性都越来越高.因此越来越多的服务商都开始偏向为用户提供更安全的在线内容访问. 中间人攻击 为了保障网站内容安全,诞生了不少加密方式.目前应 ...
- Vulnhub -- DC1靶机渗透
信息收集 开启了 22端口,ssh服务 80,http服务 111,RPC服务 先观察80端口 发现采用的是Drupal的cms 目录爆破: 但是,没有找到可以直接利用的点 登录的页面进行SQL注入即 ...