ncp_map
/
show.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的key"></script>
		<title>海南新肺确诊病例活动轨迹地图</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
			.mui-popover {
					height:460px;
				}
			.aaa li{
				padding:5px
			}
			#baseInfo{
				font-size: 11pt
			}

			#showDetail{
				display:none
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-action-menu mui-icon mui-icon-contact mui-pull-right" id='showUserPicker' style="color:red"></a>
			<h1 class="mui-title" id="titleInfo">正在显示...</h1>
		</header>
		<div class="mui-content" id="showDetail">
		        <ul class="mui-table-view">

		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right" href="#topPopover">
		                    <span class="mui-badge mui-badge-danger">明细</span>
		                    <font id="baseInfo"></font>
		                </a>
		            </li>

		        </ul>
		</div>

		<div id="allmap"></div>

		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper" id="offCanvasSideScroll">
				<div class="mui-scroll">
					<ul class="mui-table-view aaa" id="detailInfo">

					</ul>
				</div>
			</div>

		</div>

	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/jquery.min.js"></script>
</html>


<script type="text/javascript">
mui('#offCanvasSideScroll').scroll();

//百度地图
var map = new BMap.Map("allmap");
var point1 = new BMap.Point(109.834189,19.208421);
map.centerAndZoom(point1, 8);

//病例List
var userPicker = null;
//访问地址
var HTTP_URL="URLServlet?url=http://localhost:8080/map/";

/**
* 添加行政区边框
* @param map
* @param args 行政区域名称数组，以百度地图标准行政区域名称为主
* @param isAlwaysShow 是否持续显示，默认为false
* @param strokeColor 边框线条颜色，填入颜色编码，默认为#ff9a39
* @param fillColor 覆盖物背景色，填入颜色编码，默认为无色透明
*/
function getBoundaryAndColor(map, arg,isAlwaysShow,fillColor,strokeWeight,strokeColor) {
   strokeColor = strokeColor || "#ff4700";
   if(fillColor == null){
       fillColor = "#61dcff";
   }
   isAlwaysShow = isAlwaysShow || false;
   strokeWeight = strokeWeight || 2;
   //通过行政区域名称获取行政区划
   let bdary = new BMap.Boundary();
   bdary.get(arg, function (rs) {
       let count = rs.boundaries.length;
       if (count === 0) {
           return;
       }
       let ply = new BMap.Polygon(rs.boundaries[0],
           { strokeColor: strokeColor,fillColor: '',strokeWeight:strokeWeight});
       if(isAlwaysShow){
           ply.disableMassClear();
       }
       map.addOverlay(ply);
       //$("#container").mLoading("hide");
       marker_mouseover_flag = true;
   });
}

$.ajaxPrefilter(function (options) {
	if (options.crossDomain && jQuery.support.cors) {
		var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
		options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
		//options.url = "http://cors.corsproxy.io/url=" + options.url;
	}
});

//初始化
$(document).ready(function(){
	(function($, doc) {


		//显示病例列表
		$.init();
		userPicker = new $.PopPicker();

		$.get(HTTP_URL+'bl/list.jsp',
		function (response) {
			if(response==""){

				mui.toast('发生错误，请稍后再试！');

				return false;
			}
			try {
                var bls = jQuery.parseJSON(response);
				userPicker.setData(bls);

				//获取最后一个病例序号
				var no = bls[bls.length-1].value;
				userPicker.pickers[0].setSelectedValue(no, 2000);
				var showUserPickerButton = doc.getElementById('showUserPicker');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(SelectedItem) {
						showIt(SelectedItem[0].value)
						setPicker(SelectedItem[0].value)
					})
				}, false);

				//显示病例地图
				var indexNo=location.href.indexOf("no=");
				if(indexNo>0){
					no = location.href.substring(indexNo+3);
				}
				showIt(no);
            } catch (err) {
                mui.toast('解析数据发生错误，请稍后再试！');
				return false;
            }

		});

	})(mui, document);
});

function showIt(no){
	$.get(HTTP_URL+'bl/'+no+'.jsp',
	function (response) {
		var bl = jQuery.parseJSON(response);
		$("#titleInfo").text("第"+bl.id+"号病例-"+bl.date+"确诊");
		$("#baseInfo").text(bl.base);
		var detailHtml="";
		$("#showDetail").css("display","block");
		if(bl.detail!=null)
			for(var i=0;i<bl.detail.length;i++){
				detailHtml+="<li class='mui-table-view-cell'>"+bl.detail[i].date+bl.detail[i].do+"</li>";
			}
		if(bl.detailInfo!=null){

			var detailInfos = bl.detailInfo.split("→");
			for(var i=0;i<detailInfos.length;i++)
			{
				detailHtml+="<li class='mui-table-view-cell'>"+detailInfos[i]+"</li>";
			}
		}
		$("#detailInfo").html(detailHtml);
		showGj(bl);
	});
}

//显示病例地图、标记和轨迹
function showGj(bl){
	//初始化
	map.clearOverlays();
	var point = new BMap.Point(bl.center.x,bl.center.y);
	map.centerAndZoom(point, bl.center.z);
	map.enableScrollWheelZoom(); // 允许滚轮缩放

	//住家范围
	var circle1 = new BMap.Circle(new BMap.Point(bl.home.x,bl.home.y),500,{strokeColor:"red", strokeWeight:1, strokeOpacity:0.2}); //创建圆
	map.addOverlay(circle1);
	if(bl.home.add!=null || bl.home.add!="")
		getBoundaryAndColor(map,bl.home.add);

	//添加轨迹
	var pointArray=new Array();
	var pa=0;
	for(var i=0;i<bl.gjs.length;i++){
		let d=bl.gjs[i];
		if(d.add!=null)
			addMarker(d.x,d.y, d.add,d.do);

		pointArray[pa++]=new BMap.Point(d.x,d.y);
	}

	//添加路标
	function addMarker(ln,la, aa,detail){
		var marker1 = new BMap.Marker(new BMap.Point(ln,la));
		map.addOverlay(marker1);

		var label1 = new BMap.Label(aa,{offset:new BMap.Size(20,-10)});
		marker1.setLabel(label1);
		marker1.addEventListener("click",function(e){
			openInfo(detail,e)}
		);
	}

	//信息窗口
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 100,     // 信息窗口高度
				title : null , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	function openInfo(content,e){
		var p = e.target;
		var point1 = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow,point1); //开启信息窗口
	}

	//绘制箭头及其样式
	var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
		scale: 0.8,//图标缩放大小
		strokeColor:'#f00',//设置矢量图标的线填充颜色
		strokeWeight: 2,//设置线宽
	});
	var icons = new BMap.IconSequence(sy, '100%', '4%',false);//设置为true，可以对轨迹进行编辑
	//绘制折线以及样式
	var trackLine = new BMap.Polyline(pointArray,{
		strokeColor:'#18a45b',//设置颜色
		strokeWeight:8 ,//宽度
		strokeOpacity:0.6,//折线的透明度，取值范围0 - 1
		enableEditing: false,//是否启用线编辑，默认为false
		enableClicking: false,//是否响应点击事件，默认为true
		icons:[icons]
	});
	map.addOverlay(trackLine);
}

function setPicker(no){
	userPicker.pickers[0].setSelectedValue(no, 2000);
}
</script>