json遍历数组LIST

最新推荐文章于 2022-08-02 17:45:02 发布
wuyanwen888
最新推荐文章于 2022-08-02 17:45:02 发布
阅读量3.1k
点赞数
本文链接：https://blog.csdn.net/wuyanwen888/article/details/18738923
版权
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
      <title>重点路段交通流检测系统</title>    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    <link href="staticpage/css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=FE63f5e87434b7432aed25a5b7dc96d2"></script>
     <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/preload.js" type="text/javascript"></script>
    <script src="staticpage/js/load.js" type="text/javascript"></script>
  </head>
    <body οnlοad="displayCam()">
    
  <!--首页Top-->
<div class="web_top">
    <div class="top_left"></div>
   <div class="web_topButton"><input type="button" value="系统首页" /></div>
   <div class="web_topButton"><input type="button" value="信息采集" οnclick="ShowHtmlStringa()"/></div>
   <div class="web_topButton"><input type="button" value="信息处理" οnclick="ShowHtmlStringb()"/></div>
   <div class="web_topButton"><input type="button" value="运维管理" οnclick="ShowHtmlStringd()"/></div>
   <div class="web_topButton"><input type="button" value="统计分析" οnclick="ShowHtmlStringe()"/></div>
   <div class="web_topButton"><input type="button" id="btn" value="系统管理" /></div>
</div>
<!--首页地图控件-->
<div class="web_map" id="allmap">
    <script type="text/javascript">
    // 百度地图API功能
var tileLayer;//定义的图层
var map = new BMap.Map("allmap");            // 创建Map实例
var p1 = new BMap.Point(113.125115, 23.028709);    // 创建点坐标116.412318, 39.887037
map.centerAndZoom(p1,${config.currentZoom});                     // 初始化地图,设置中心点坐标和地图级别。
map.setMinZoom(${config.zoom[0]});
var n='${fn:length(config.zoom)}'-1;
var cc=${config.zoom[0]}+n;
map.setMaxZoom(cc);
map.enableScrollWheelZoom();     //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl());
reflesh();
//第一个点
var marker1 = new BMap.Marker(p1);
map.addOverlay(marker1);
//设置摄像头图标
var myIcon = new BMap.Icon("staticpage/images/aa.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25) });
marker1.setIcon(myIcon);
marker1.addEventListener("click", function () {
    var opts = {
        width: 250,     // 信息窗口宽度  
        height: 120,     // 信息窗口高度  
        title: "<div></div><span style='font-size:14px;font-weight:bold;color:#4d4d4d;white-space:nowrap;height:25px;line-height:25px;width:280px;padding:0px;margin:0px;'>摄像头基本参数</span>"  // 信息窗口标题 
    }
    var infoWindow = new BMap.InfoWindow("<div style='height:2px;border-bottom:1px solid #ccc;'></div><table style='font-size:12px;font-weight:bold;color:#4d4d4d;color:#8180d1;'><tr style='height:25px;line-height:25px;'><td>摄像头编号:</td><td>58090999</th></td><tr style='height:25px;line-height:25px;'><td>在线状态:</td><td>在线</td></tr><tr style='height:25px;line-height:25px;'><td>位置:</td><td>北京科富兴科技有限公司</td></tr></table>", opts);  // 创建信息窗口对象  
    this.openInfoWindow(infoWindow);      // 打开信息窗口

});
//设置摄像头图标拖托拽（可选）
marker1.enableDragging();
marker1.addEventListener("dragend", function (e) {
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})
    </script>
</div>

<!--首页bottom-->
<div class="web_bottom">
     <center>
       北京科富兴科技有限公司交通流检测系统版权所有2013
     </center>
</div>

  </body>
   <!--主页浏览器宽高代码-->
    <script src="staticpage/js/index.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(function () {
                $("#btn").click(function () {
                	$("#allmap").html("");
                    $("#allmap").load("second.jsp");
                })

            });
    </script>
    <!--弹出窗口代码-->
    <script src="staticpage/js/popup.js" type="text/javascript"></script>
    <script src="staticpage/js/openDialog.js" type="text/javascript"></script>
    <script type="text/javascript">
	    window.setInterval(function(){
	    	 reflesh();
	    },5000);
	    function displayCam(){
	    	$.getJSON("PointServlet?signal=5",function(data){
	    		$.each(data,function(i,n){
	    			var point=new BMap.Point(n.longitude,n.latitude);
	    			 var myIcon = new BMap.Icon("images/shexiangtou.png", new BMap.Size(75, 60), {  
                    });  
	    			var label=new BMap.Label("摄像机"+n.cameraNO+"号",{offset:new BMap.Size(55,-5)});
	    			var marker=new BMap.Marker(point,{icon:myIcon});
	    			marker.setLabel(label);
	    			map.addOverlay(marker);
	    	var infor;
	    			marker.addEventListener("click",function(){
	    				$.getJSON("PointServlet",{signal:6,cameraNO:n.cameraNO},function(data){
	    					var sum="";
	    				$.each(data,function(i,n){
	    					sum+="<tr>" +
	    					"<td>"+n.lane+"</td>" +
	    					"<td>"+n.traVolumn+"</td>" +
	    					"<td>"+n.speed+"</td>" +
	    					"<td>"+n.laneOccRatio+"</td>" +
	    					"<td>"+n.distance+"</td>" +
	    					"<td>"+n.camTime+"</td>" +
	    					"</tr>"
	    				});
	    				    infor="";
	    					infor=new BMap.InfoWindow("<table style='position:absolute;top:10px;border-style:solid;border-width:1px'>" +
	    				"<tr style='font-weight:bold;font-size:14px;text-align:center;'><td width='80'>车道</td><td width='80'>交通量</td><td width='120'>速度(km/h)</td><td width='150'>车道占有率(%)</td><td width='80'>车距(m)</td><td width='220'>摄像机发送时间</td></tr>" +
	    					sum+"</table>"
	    				,{width:550,height:200});
	    				   marker.openInfoWindow(infor);
	    					
	    					
	    					
	    				});
	    			});
	    			
	    			
	    		});
	    	});
	    }
    </script>
</html>
wuyanwen888
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json遍历数组LIST

<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> 重点路段交通流检测系统
复制链接

扫一扫