yf_zd
/
commonApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地图</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link href="../css/common.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}
			
			.mapCover {
				position: absolute;
				left: 0;
				top: 96px;
				bottom: 0;
				right: 0;
			}
			
			#map {
				width: 100%;
				position: fixed;
				top: 96px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
			
			#btn {
				margin-top: 50px;
				width: 80%;
				left: 10%;
			}
			
			#NativewUI {
				margin-top: 50px;
				width: 80%;
				left: 10%;
			}
			
			.mui-popover {
				width: 160px;
			}
			
			/*#popover {
				display: block;
				top: 57px;
				left: 165px;
			}*/
			/*搜索框*/
			
			.searchBox {
				background-color: #eee;
				padding: 0px 8px;
				position: relative;
				margin-top: 10px;
			}
			
			.mui-search .mui-placeholder {
				text-align: left;
				left: 5px;
			}
			
			input[type=search] {
				background: #fff;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				color: #777;
			}
			
			.searchBtnBox {
				position: absolute;
				right: 8px;
				top: 0px;
				z-index: 3;
			}
			
			#searchBtn {
				letter-spacing: 3px;
				line-height: 1.6;
				border: none;
			}
			
			.cutline {
				display: inline-block;
				border-left: .08em dashed #777;
				margin-top: 6px;
			}
			/*分类*/
			
			.mui-table-view-cell i {
				font-size: 18px;
				margin-right: 5px;
			}
		</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>
			<h1 class="mui-title">设备分布图</h1>
			<a id="openPopover" class="mui-icon mui-icon-more mui-pull-right"></a>
			<!--<a class="fa fa-search mui-pull-right" id="searchBtn">搜索</a>-->
		</header>
		<div class="mui-content">
			<div class="faxSearchBox">
				<div class="mui-input-row mui-search">
					<input type="search" id="searchInp" placeholder="请输入设备ID">
				</div>
				<div class="searchBtnBox">
					<span class="cutline">&nbsp;</span>
					<button id="searchBtn">搜索</button>
				</div>
			</div>

			<div class="mapCover">
				<div id="map"></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		 <script src="../js/coordtransform_utils.js"></script><!--坐标偏移 -->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=La58N63t7hPhafQ7Eror2kon"></script>
		<script type="text/javascript">
			var em = null,
				map = null;
			var floatw = null;
			// H5 plus事件处理
			window.addEventListener('requestPerson',function(event){
				//获得事件参数
				var id = event.detail.id;
				requestPerson = id;
				getdata(id)
			})
			function getdata(type){
				// mui('#popover').popover('toggle'); //show hide toggle
				var dtype = '';
				map.clearOverlays(); //清除全部
				if(type == 2 || type == 3 || type == 5  || type == 7 || type == 8) {
					if(type == 2) {
						dtype = 'scd';
					} else if(type == 3) {
						dtype = 'cbd';
					}else if(type == 5) {
						dtype = 'qxz';
					}else if(type == 7) {
						dtype = 'bzy';
					}else if(type == 8) {
						dtype = 'xyq';
					}
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: dtype
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
				} else {
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: 'scd'
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: 'cbd'
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: 'qxz'
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: 'bzy'
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: 'xyq'
						},
						timeout: 10000, //超时时间：30秒
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						dataType: "json",
						success: function(data) {
							// console.log(JSON.stringify(data))
							setmarker(data)
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
				}
			}
			function setmarker(data){
				for(var i = 0;i<data.length;i++){
					if(data[i].equip_type == 2){
						var iconurl = '../images/2.png';
						var title = '杀虫灯设备';
					}else if(data[i].equip_type == 3){
						var iconurl = '../images/3.png';
						var title = '测报灯设备';
					}else if(data[i].equip_type == 5){
						var iconurl = '../images/1.png';
						var title = '环境监测设备';
					}else if(data[i].equip_type == 7){
						var iconurl = '../images/7.png';
						var title = '孢子仪设备';
					}else if(data[i].equip_type == 4){
						var iconurl = '../images/8.png';
						var title = '性诱设备';
					}
					if(data[i].equip_type == 2||data[i].equip_type == 3|| data[i].equip_type==4){
						if(data[i].gps == 0){
							var point = new plus.maps.Point(data[i].lng, data[i].lat);
						}else if(data[i].gps == 1){
							//convert wgs84 to cj02
							var cj02 = coordtransform.wgs84togcj02(data[i].lng, data[i].lat);//gps转火星定位
							//convert cj02 to bd09
							var bd09 = coordtransform.gcj02tobd09(cj02[0], cj02[1]);//火星转百度定位
							var point = new plus.maps.Point(bd09[0], bd09[1]);
						}else if(data[i].gps == 2){
							var baidulnglat = coordtransform.gcj02tobd09(data[i].lng, data[i].lat) //火星转百度定位
							var point = new plus.maps.Point(baidulnglat[0], baidulnglat[1]);
						}
					}else if(data[i].equip_type == 5){
						var bd09 = coordtransform.gcj02tobd09(data[i].lng, data[i].lat);//火星转百度定位
						var point = new plus.maps.Point(bd09[0], bd09[1]);
					}else{
						var point = new plus.maps.Point(data[i].lng, data[i].lat);
					}
					var txt = title+'\n名称：'+data[i].equip_name+'\n设备号：'+data[i].equip_id;
					addMarker(point,iconurl,txt);
				}
			}
			function plusReady() {
				// 确保DOM解析完成
				if(!em || !window.plus || map) {
					return
				};
				map = new plus.maps.Map("map");
				map.centerAndZoom(new plus.maps.Point(105.740332,34.038286), 4);
				map.showZoomControls( true );
				
				//顶部右上角按钮menu触发弹出菜单
				document.getElementById('openPopover').addEventListener('tap', function() {
					floatWebview()
				})
				
				// 创建悬浮窗口
				function floatWebview() {
					if(floatw) { // 避免快速多次点击创建多个窗口
						floatw.show("fade-in");
					} else {
						floatw = plus.webview.create("map_nav.html", "map_nav", {
							background: 'transparent',
							zindex: 10,
						});
						floatw.show("fade-in");
					}
				}
				
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				plusReady();
			}, false);
			
			// 编写自定义函数,创建标注
			function addMarker(point,iconurl,txt){
			  	var marker = new plus.maps.Marker(point);
				marker.setIcon(iconurl);
				var bubble = new plus.maps.Bubble(txt); 
				marker.setBubble(bubble);
			  	map.addOverlay(marker);
				map.setZoom(4);
				map.setCenter(105.740332,34.038286);
			}
	

			//搜索
			$("#searchInp").on('keypress',function(e) {  
				var keycode = e.keyCode;  
				var searchName = $(this).val();  
				if(keycode=='13') {  
					//请求搜索接口
					searchFun(searchName)  
					e.preventDefault();    
				}
			});  
			document.getElementById('searchBtn').addEventListener('tap', function() {
				var imei = document.getElementById('searchInp').value;
				searchFun(imei)
			})
			
			function searchFun(imei){
				map.clearOverlays(); //清除全部
				if(imei) {
					$.ajax({
						type: "post",
						url: "http://192.168.1.11:8000/home_map/map_locat",
						data: {
							req: "imei",
							equip_id: imei
						},
						timeout: 10000, //超时时间：30秒
						dataType: "json",
						beforeSend: function() {
							plus.nativeUI.showWaiting("加载中...");
						},
						complete: function() {
							plus.nativeUI.closeWaiting();
						},
						success: function(data) {
							if(data == '0') {
								mui.toast("没有找到该设备，请核对设备id！");
							} else {
								setmarker(data)
							}
						},
						error:function(type){
							mui.toast('网络超时！')
						}
					});
				} else {
					mui.toast("请输入设备IMEI");
				}
			}
			
		</script>
	</body>

</html>