<%@ taglib prefix="form" uri="http
://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
request.setCharacterEncoding
("utf-8"
);
String contextPath = request.getContextPath
();
%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加行政区划</title>
<script type="text/javascript"
src="<%=contextPath%>/js/comm/jquery-1.4.4.min.js"></script>
<link href="<%=contextPath%>/css/min/insect_spore.css" rel="stylesheet"
type="text/css" />
<link href="<%=contextPath%>/css/newxingyou/dialog.css" rel="stylesheet">
<style type="text/css">
body, html, #allmap {
width
: 100%;
height
: 100%;
overflow
: hidden;
margin
: 0;
font-family
: "微软雅黑";
}
#result {
width
: 100%;
font-size
: 12px;
}
.z_index_8 {
z-index
: 8;
}
.z_index_99 {
z-index
: 80;
}
</style>
<link rel="stylesheet"
href="http
://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript"
src="http
://api.map.baidu.com/api?v=2.0&ak=5MPXqVijsfPNiFQdifGtUNT7c9ekGkMF"></script>
<script type="text/javascript"
src="http
://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<style>
Dialog{
height
: 100vh;
width
: 100vw;
}
#mcgOptate{
display
: flex;
justify-content
: space-around;
}
#mcgOptate button{
color
: red;
border
: none;
background-color
: inherit;
}
.tab {
display
: flex;
background-color
: #fff;
border-radius
: 5px;
overflow
: hidden;
box-shadow
: 0 2px 5px rgba
(0, 0, 0, 0.1
);
}
.tab button {
background-color
: #f2f2f2;
color
: #333;
border
: none;
outline
: none;
cursor
: pointer;
padding
: 10px 20px;
flex
: 1;
transition
: all 0.3s ease-in-out;
}
.tab button.active,
.tab button
:hover {
background-color
: #3498db;
color
: #fff;
}
.tab button
:hover{
background-color
:#2ebb35;
}
.tabcontent {
display
: none;
padding
: 20px;
border
: 1px solid #ccc;
border-top
: none;
border-radius
: 0 0 5px 5px;
background-color
: #fff;
box-shadow
: 0 2px 5px rgba
(0, 0, 0, 0.1
);
overflow
: auto;
height
: 100vh;
}
table {
width
: 100%;
border-collapse
: collapse;
/* background
: linear-gradient
(to right, #ff416c, #ff4b2b
);*/
border
: 1px solid #333;
border-radius
: 10px;
}
th, td {
padding
: 5px;
text-align
: center;
color
: black;
font-weight
: bold;
border
: 1px solid blue;
}
th {
background-color
: #f25d11;
}
td {
background-color
: rgba
(0, 150, 0,.2
);
}
tr
:nth-child
(2n
) {
background-color
: rgba
(0, 148, 255,.8
);
}
.pagination {
display
: inline-block;
margin-bottom
: 20px;
}
.pagination a {
color
: black;
float
: left;
padding
: 8px 16px;
text-decoration
: none;
transition
: background-color .3s;
}
.pagination a.active {
background-color
: dodgerblue;
color
: white;
}
.pagination a
:hover
:not
(.active
) {
background-color
: #ddd;
}
</style>
</head>
<body>
<input type="hidden" id="areaName" name="areaName" value="${areaName }">
<input type="hidden" id="siteName" name="siteName" value="${siteName }">
<input type="hidden" id="_aliasname" name="_aliasname"
value="${_aliasname }">
<input type="hidden" id="centerSiteIp_Aliasname"
name="centerSiteIp_Aliasname" value="${centerSiteIp_Aliasname }">
<input type="hidden" id="siteid" name="siteid">
<input type="hidden" id="contextPath" name="contextPath"
value="<%=contextPath%>">
<div id="body_div" style="width
: 100%; height
: 100%; border
: 1px solid #aaa;">
<div
style="width
: 100%; height
: 20px; background
: #eee; border
: 1px solid #ccc; padding
: 5px;">
当前位置->性诱信息->地图GIS标记
<!-- 【共有<
span id="_pointCount">0</
span>个站点】 -->
</div>
<div id="allmap"></div>//用于挂栽地图
<img id="loading_Img"
src="<%=contextPath%>/images/min/loading_ill1.gif" class="loading_Img" />
<%-- 表格操作按钮--%>
<div style="display
: none">
<div id="mcgOptate">
<button onclick="DataAn
(this
)">
数据分析</button>
</div>
</div>
<div id="DivLocker" class="hid_div" hidden="hidden"></div>
<div id="mcgDialog">
<div class="overlay" id="overlay"></div>
<div class="draggable-window" id="draggable">
<div class="draggable-header" >
<div class="header-title">性诱信息</div> <
span class="close-button" onclick="closeWindow
()">×</
span>
</div>
<div class="draggable-content" style="overflow
: hidden">
</div>
</div>
</div>
</div>
<div id="mcgcDialog"> </div>
<script src="<%=contextPath%>/css/newxingyou/draggableWindow.js">
</script>
<script type="text/javascript">
var areaName;
var pointArr;
// 百度地图API功能
var map = new BMap.Map
("allmap", {
minZoom
: 5,
maxZoom
: 26
}
); // 创建Map实例,设置地图允许的最小/大级别
// 添加带有定位的导航
控件
var navigationControl = new BMap.NavigationControl
({
// 靠左上角位置
anchor
: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type
: BMAP_NAVIGATION_CONTROL_LARGE
// 启用显示定位
//enableGeolocation
: true
}
);
map.addControl
(navigationControl
);
var mapType1 = new BMap.MapTypeControl
({
mapTypes
: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
}
);
var overView = new BMap.OverviewMapControl
();
//var overViewOpen = new BMap.OverviewMapControl
({
// isOpen
: true,
// anchor
: BMAP_ANCHOR_BOTTOM_RIGHT
//}
);
//添加地图类型和缩略图
map.addControl
(mapType1
); //2D图，卫星图
map.addControl
(overView
); //添加默认缩略地图
控件
//map.addControl
(overViewOpen
); //右下角，打开
function getMapPoint
() {
var areaName = $
("#areaName"
).val
();
var centerSiteIp_Aliasname = $
("#centerSiteIp_Aliasname"
).val
();
$
("#loading_Img"
).hide
();
var points = eval
("
(" + '${list}' + "
)"
);
//$
("#_pointCount"
).text
(pointArr.length
);
var point;
if
(points.length > 0 && points.length != "undefined"
) {
var point = new BMap.Point
(points[0].x,
points[0].y
);
if
(areaName == '国家'
) {
map.centerAndZoom
(point, 4
);
}
if
(areaName != '国家'
) {
map.centerAndZoom
(point, 8
);
}
} else {
point = new BMap.Point
(105.680507, 34.865556
);
map.centerAndZoom
(point, 4
);
alert
("该地区暂无安装设备"
);
}
map.enableScrollWheelZoom
();
getBoundary
(areaName, points
);
}
setTimeout
(function
() {
getMapPoint
();
}, 500
);
function getBoundary
(areaName, pointArr
) {
var bdary = new BMap.Boundary
();
if
(areaName != '国家'
) {
bdary.get
(areaName, function
(rs
) { //获取行政区域
map.clearOverlays
(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for
(var i = 0; i < count; i++
) {
var ply = new BMap.Polygon
(rs.boundaries[i], {
strokeWeight
: 5,
strokeColor
: "#ff0000"
}
); //建立多边形覆盖物
ply.setFillColor
(""
);//设置多边形的填充颜色，参数为合法的CSS颜色值。当参数为空字符串时，折线覆盖物将没有填充效果。
//ply.setFillOpacity
(""
); //设置多边形的填充透明度，取值范围0 - 1。
map.addOverlay
(ply
); //添加覆盖物
//map.setViewport
(ply.getPath
()); //调整视野
}
getJsonData
(pointArr
);
}
);
} else {
getJsonData
(pointArr
);
}
}
function getJsonData
(pointArr
) {
for
(var i = 0; i < pointArr.length; i++
) {
var _point = pointArr[i];
var site_name = _point.subSiteName;
addMarker
(_point
);
}
}
// 编写自定义函数,创建标注并绑定点击时间
function addMarker
(_point
) {
var point = new BMap.Point
(_point.x, _point.y
);
var marker = new BMap.Marker
(point
);
var onlinestate = _point.onlinestate;
var iconImg ="";
if
(onlinestate=="True"
){
iconImg = $
("#contextPath"
).val
() + "/images/map/green.png";
}else{
iconImg = $
("#contextPath"
).val
() + "/images/map/gray.png";
}
var myIcon = new BMap.Icon
(iconImg, new BMap.Size
(19, 25
));
var marker = new BMap.Marker
(point, {
icon
: myIcon,
title
: "
(经度："+_point.x+",纬度："+ _point.y+"
)"
}
); //创建marker对象
marker.addEventListener
("click", function
(e
) {
infoWindowFun
(this, _point
);
}
);
var opts = {
position
: point, // 指定文本标注所在的地理位置
offset
: new BMap.Size
(15, -15
)
//设置文本偏移量
};
var label = new BMap.Label
(_point.subSiteName, opts
); // 创建文本标注对象
label.setStyle
({
color
: "red",
fontSize
: "12px",
height
: "20px",
lineHeight
: "20px",
fontFamily
: "微软雅黑"
}
);
map.addOverlay
(label
);
map.addOverlay
(marker
);
}
function ShowImg
(url
){
const img=document.querySelector
(".menv #showImg"
)
img.addEventListener
('click',
()=>{
window.parent.frames["leftFrame"].location.href = url;
this.closeWindow
()
$
("#loading_Img"
).show
();
}
)
}
function infoWindowFun
(_this, _point
) {
if
(_point.id === 189
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing.
jsp';
return;
}
if
(_point.id === 190
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing2.
jsp';
return;
}
if
(_point.id === 191
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing3.
jsp';
return;
}
if
(_point.id === 192
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing4.
jsp';
return;
}
var content = '<div style="margin
:0;line-height
:20px;padding
:2px;">' +
'<h4 style="margin
:10px 0 5px 0;padding
:0.2em 0">' +
_point.subSiteName + '</h4>' +
'对不起，暂无
数据...' +
'</div>';
// 创建并打开信息窗口
var infoWindow = new BMap.InfoWindow
(content
);
_this.openInfoWindow
(infoWindow
);
}
function showChangeDiv
(url
) {
$
("#cheackImg"
).val
(url
);
//getMapPoint
();
$
('#DivLocker'
).addClass
("z_index_99"
);
$
('#DivLocker'
).show
();
setTimeout
(function
() {
$
("#DHABGE_DIV"
).show
();
}, 500
);
}
function hideChangeDiv
() {
debugger
$
('#DivLocker'
).removeClass
("z_index_99"
);
var _class = $
('#DivLocker'
).attr
("class"
);
if
(_class == "hid_div"
) {
$
('#DivLocker'
).hide
();
}
$
("#DHABGE_DIV"
).hide
();
}
function FunCheackImg
() {
debugger
var url = $
("#cheackImg"
).val
();
window.parent.frames["leftFrame"].location.href = url;
}
function FunShowDetailDiv
() {
hideChangeDiv
();
$
('#DivLocker'
).addClass
("z_index_99"
);
$
('#DivLocker'
).show
();
$
("#DETAIL_DIV"
).show
();
var siteName = $
("#siteName"
).val
();
var _aliasname = $
("#_aliasname"
).val
();
var iframSrc = $
("#iframSrc"
).val
();
iframSrc = iframSrc + "?siteName=" + encodeURI
(siteName
)
+ "&_aliasname=" + _aliasname;
$
("#light_form"
).attr
("src", iframSrc
);
}
function FunHideDetailDiv
() {
$
('#DivLocker'
).removeClass
("z_index_99"
);
var _class = $
('#DivLocker'
).attr
("class"
);
if
(_class == "hid_div"
) {
$
('#DivLocker'
).hide
();
}
$
("#DETAIL_DIV"
).hide
();
}
</script>
</body>
</html>
设置点击地图上任意监测点都显示</h4>' + '对不起，暂无
数据...' + '</div>';并且除了if
(_point.id === 189
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing.
jsp';
return;
}
if
(_point.id === 190
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing2.
jsp';
return;
}
if
(_point.id === 191
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing3.
jsp';
return;
}
if
(_point.id === 192
) {
window.parent.frames["mainFrame"].location.href = '<%=contextPath%>/comm/sqweb/shangqing4.
jsp';
return;
}不做任何
页面跳转
本文展示了一个使用JavaScript实现的简单函数，用于从DOM中移除指定元素，并附带一个测试用例。
扫一扫
5836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
