<%@ 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.addEvent
Listener("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.addEvent
Listener('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 onlinestate = _point.onlinestate;
var siteid = _point.id;
var pointX = _point.x;
var pointY = _point.y;
var _aliasname = _point.aliasname;
$("#siteName").val(_point.subSiteName);
$("#_aliasname").val(_aliasname);
var content = "";
if (onlinestate == "True") {
var getRealDataUrl = $("#contextPath").val()
+ "/min/newxingyou/get/Shebei/?SiteId="+ siteid + "&ShebeiModel=xy"
$.
ajax({
url : getRealDataUrl,
timeout : 30000,
type : 'GET',
cache : false,
ifModified : true,
beforeSend : function(xmlHttp) {
$("#loading_Img").show();
xmlHttp.setRequestHeader("If-Modified-Since", "0");
xmlHttp.setRequestHeader("Cache-Control",
"no-cache");
},
success : function(data) {
if(JSON.parse(data).length>0){
//跳转页面
window.parent.frames["mainFrame"].location.href = $("#contextPath").val()+"/min/newxingyou/xingyou?siteid="+siteid+"&Shebei
List="
}
else {
$("#loading_Img").hide();
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);
}
}
});
} else {
content = '<div style="margin:0;line-height:20px;padding:2px;">'
+ '<h4 style="margin:10px 0 5px 0;padding:0.2em 0">'
+ _aliasname + '</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>';
扫一扫
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
