yf_zd
/
yfApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
							<!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%;
				height: 100%;
			}
			
			#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 href="#popover" 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 id="popover" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" data-id="2">
					<a href="#">
						<i class="iconfont">&#xe621;</i>杀虫灯
					</a>
				</li>
				<li class="mui-table-view-cell" data-id="3">
					<a href="#">
						<i class="iconfont">&#xe71f;</i>虫情测报
					</a>
				</li>
				<!--<li class="mui-table-view-cell" data-id="3">
					<a href="#">
						<i class="iconfont">&#xe604;</i>农药残留
					</a>
				</li>-->
				<li class="mui-table-view-cell" data-id="5">
					<a href="#">
						<i class="iconfont">&#xe60e;</i>环境监测
					</a>
				</li>
				<li class="mui-table-view-cell" data-id="7">
					<a href="#">
						<i class="iconfont">&#xe64e;</i>孢子仪
					</a>
				</li>
				<!--<li class="mui-table-view-cell" data-id="5">
					<a href="#">
						<i class="iconfont">&#xe645;</i>监控设备
					</a>
				</li>-->
			</ul>
		</div>
			<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 type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=La58N63t7hPhafQ7Eror2kon"></script>
		<script type="text/javascript">
			mui.init();

			//百度地图获取坐标
			var map = new BMap.Map("map"); // 创建地图实例  
			map.centerAndZoom(new BMap.Point(113.64964385, 34.75661006), 13); // 创建点坐标  
			map.enableScrollWheelZoom(true);
			map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 
			map.addControl(new BMap.NavigationControl()); //为地图添加鱼骨（默认）
			map.addEventListener("tilesloaded", function() {
				$(".BMap_cpyCtrl").hide();
				geoc = new BMap.Geocoder();
			}); //地图加载完毕后 隐藏百度图标
			mui.plusReady(function() {
				if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
					mui.toast("网络异常，请检查网络设置！");
				}
				//请求数据：
//				$.ajax({
//					type: "post",
//					url: "http://120.27.222.26/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) {
//						//						plus.nativeUI.closeWaiting();
//						eachItem(data)
//					},
//					error:function(type){
//						mui.toast('网络超时！')
//					}
//				});

//				$.ajax({
//					type: "post",
//					url: "http://120.27.222.26/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) {
//						//						eachItem(data)
//					},
//					error:function(type){
//						mui.toast('网络超时！')
//					}
//				});
				//搜索
				$("#searchInp").on('keypress',function(e) {  
	                var keycode = e.keyCode;  
	                var searchName = $(this).val();  
	                if(keycode=='13') {  
	                    e.preventDefault();    
	                    //请求搜索接口  
	                    searchFun(searchName)  
	                }
	         	});  
				document.getElementById('searchBtn').addEventListener('tap', function() {
					var imei = document.getElementById('searchInp').value;
					searchFun(imei)
				})
				
				function searchFun(imei){
					if(imei) {
						$.ajax({
							type: "post",
							url: "http://120.27.222.26/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！");
									map.clearOverlays(); //清除全部
								} else {
									map.clearOverlays(); //清除全部
									eachItem(data)
								}
							},
							error:function(type){
								mui.toast('网络超时！')
							}
						});
					} else {
						mui.toast("请输入设备IMEI");
					}
				}
				//右上角种类查询
				mui('#popover').on('tap', 'li', function() {
					mui('#popover').popover('toggle'); //show hide toggle
					var dtype = '';
					var type = this.getAttribute('data-id');
					if(type == 2 || type == 3 || type == 5  || type == 7) {
						if(type == 2) {
							dtype = 'scd';
						} else if(type == 3) {
							dtype = 'cbd';
						}else if(type == 5) {
							dtype = 'qxz';
						}else if(type == 7) {
							dtype = 'bzy';
						}
						map.clearOverlays(); //清除全部
						$.ajax({
							type: "post",
							url: "http://120.27.222.26/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(data)
								map.clearOverlays(); //清除全部
//								console.log(JSON.stringify(data))
								eachItem(data)
							},
							error:function(type){
								mui.toast('网络超时！')
							}
						});
					} else {
						mui.toast("此功能暂未开启！");
					}

					console.log(this.getAttribute('data-id'))
				})
				//			}
			})

			/**
			 * WGS84转GCj02
			 * @param lng
			 * @param lat
			 * @returns {*[]}
			 */
			//定义一些常量
			var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
			var PI = 3.1415926535897932384626;
			var a = 6378245.0;
			var ee = 0.00669342162296594323;

			function wgs84togcj02(lng, lat) {
				var lat = +lat;
				var lng = +lng;

				var dlat = transformlat(lng - 105.0, lat - 35.0);
				var dlng = transformlng(lng - 105.0, lat - 35.0);
				var radlat = lat / 180.0 * PI;
				var magic = Math.sin(radlat);
				magic = 1 - ee * magic * magic;
				var sqrtmagic = Math.sqrt(magic);
				dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
				dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
				var mglat = lat + dlat;
				var mglng = lng + dlng;
				return [mglng, mglat]

			};
			/**
			 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
			 * 即谷歌、高德 转 百度
			 * @param lng
			 * @param lat
			 * @returns {*[]}
			 */
			function gcj02tobd09(lng, lat) {
				var lat = +lat;
				var lng = +lng;
				var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
				var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
				var bd_lng = z * Math.cos(theta) + 0.0065;
				var bd_lat = z * Math.sin(theta) + 0.006;
				return [bd_lng, bd_lat]
			};
			var transformlat = function transformlat(lng, lat) {
				var lat = +lat;
				var lng = +lng;
				var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
				ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
				ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
				ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
				return ret
			};
			var transformlng = function transformlng(lng, lat) {
				var lat = +lat;
				var lng = +lng;
				var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
				ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
				ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
				ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
				return ret
			};

//			function eachItem(data_info) {
//				console.log(data_info)
//				var pointArray = [];
//				for(var i = 0; i < data_info.length; i++) {
//					if(data_info[i].lng > 999) {
//						var lng = Math.floor(data_info[i].lng / 100) + ((data_info[i].lng % 100) / 60);
//						var lat = Math.floor(data_info[i].lat / 100) + ((data_info[i].lat % 100) / 60);
////						console.log(lng, lat)
//					} else {
//						var lat = data_info[i].lat;
//						var lng = data_info[i].lng;
//					}
//					if(data_info[i].lng && data_info[i].lat){
//						//标注图标
//					var orgType = data_info[i].equip_type; //parseInt(0)   data_info[i].equip_type
//					if(orgType == 7) {
//						var equip_type = '孢子仪';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 0 * 23)
//						});
//					}else if(orgType == 5) {
//						var equip_type = '环境监测';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 1 * 23)
//						});
//					} else if(orgType == 2) {
//						var equip_type = '杀虫灯';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 2 * 23)
//						});
//					} else if(orgType == 3) {
//						var equip_type = '虫情测报';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 3 * 23)
//						});
//					} else if(orgType == 4) {
//						var equip_type = '农药残留';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 4 * 23)
//						});
//					} else if(orgType == 6) {
//						var equip_type = '监控设备';
//						var myIcon = new BMap.Icon("../images/locationIcon.png", new BMap.Size(17, 23), {
//							offset: new BMap.Size(0, -18),
//							imageOffset: new BMap.Size(0, 0 - 5 * 23)
//						});
//					}
//					var lng1 = wgs84togcj02(lng, lat);
//					var lng2 = gcj02tobd09(lng1[0], lng1[1]);
////					pointArray[i] = new BMap.Point(lng2[0], lng2[1]);
//					pointArray.push(new BMap.Point(lng2[0], lng2[1]))
//
//					var marker = new BMap.Marker(new BMap.Point(lng2[0], lng2[1]), {
//						icon: myIcon
//					}); // 创建标注		
//					map.addOverlay(marker);
//					var enterNum = equip_type; //data_info[i].equip_name
//					var content = '<p>名称：' + data_info[i].equip_name + '</p><p>IMEI：' + data_info[i].equip_id + '</p><p>经度：' + lng2[0] + '</p><p>维度：' + lng2[1] + '</p><p>位置：' + data_info[i].equip_location + '</p>';
//
//					// 将标注添加到地图中
//					addClickHandler(content, marker, enterNum);
//					}
//
//
//					if(i == data_info.length-1){
//						//让所有点在视野范围内					
//						map.setViewport(pointArray);
//					}
//					
//				}
//
//			}


			//测试
			function eachItem(data_info) {
				console.log(data_info)
			    var points = [];  // 添加海量点数据
			    for (var i = 0; i < data_info.length; i++) {
			        if (data_info[i].lng > 999) {
			            var lng = Math.floor(data_info[i].lng / 100) + ((data_info[i].lng % 100) / 60);
			            var lat = Math.floor(data_info[i].lat / 100) + ((data_info[i].lat % 100) / 60);
			        } else {
			            var lat = data_info[i].lat;
			            var lng = data_info[i].lng;
			            
			        }
			
			        if (data_info[i].lat && data_info[i].lng) {
			            //标注图标
			            var orgType = data_info[i].equip_type;//parseInt(0)   data_info[i].equip_type
			            if (orgType == 5) {
			                var equip_type = '环境监测';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#001dff'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 1 * 23) });
			            } else if (orgType == 2) {
			                var equip_type = '杀虫灯';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#ff6600'
			                }
			                // var myIcon = new BMap.Icon("/static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 2 * 23) });
			            } else if (orgType == 3) {
			                var equip_type = '虫情测报';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#9c1ee4'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -13), imageOffset: new BMap.Size(0, 0 - 3 * 23) });
			            } else if (orgType == 4) {
			                var equip_type = '性诱器设备';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#ff2da9'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 6 * 23) });
			            } else if (orgType == 6) {
			                var equip_type = '监控设备';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: 'green'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 5 * 23) });
			            } else if (orgType == 7) {
			                var equip_type = '孢子仪设备';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#ff0000'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 0 * 23) });
			            } else if (orgType == 8) {
			                var equip_type = '农药残留';
			                var options = {
			                    size: BMAP_POINT_SIZE_BIG,
			                    shape: BMAP_POINT_SHAPE_CIRCLE,
			                    color: '#ff7600'
			                }
			                // var myIcon = new BMap.Icon("static/img/locationIcon2.png", new BMap.Size(17, 23), { offset: new BMap.Size(0, -18), imageOffset: new BMap.Size(0, 0 - 4 * 23) });
			            }
			            // console.log(lat,lng);
			            var lng1 = wgs84togcj02(lng, lat);
			            var lng2 = gcj02tobd09(lng1[0], lng1[1]);
			            // console.log(lng1,lng2);
			            // pointArray[i] = new BMap.Point(lng2[0], lng2[1]);
			            // pointArray.push(new BMap.Point(lng2[0], lng2[1]))
			            var point = new BMap.Point(lng2[0], lng2[1]);
			            point.equip_id= data_info[i].equip_id;
			            point.equip_name= data_info[i].equip_name;    
			            point.equip_type = equip_type;    
			            point.orgType = orgType;    
			            points.push(point);
			           
			            // var enterNum = equip_type;//data_info[i].equip_name
			            // var content = '<p>名称：' + data_info[i].equip_name + '</p><p class="gotoDetial" onclick="gotoManageDetial(\'' + data_info[i].equip_id + ' \',' + orgType + ')">IMEI：' + data_info[i].equip_id + '</p><p>经度：' + lng2[0] + '</p><p>纬度：' + lng2[1] + '</p><p class="area">位置：' + data_info[i].equip_location + '</p></br>';
			            // if (data_info[i].equip_location) {
			            //     var flag = true;
			            // } else {
			            //     var flag = false;
			            // }
			
			
			            // 将标注添加到地图中
			            // addClickHandler(content, marker, enterNum, flag);
			        }
			
			    }
				var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
				            pointCollection.addEventListener('click', function (e) {
				                var point = new BMap.Point(e.point.lng, e.point.lat);
				                geoc.getLocation(point, function (rs) {
				                    var addComp = rs.addressComponents;
				                    $('.area').html('位置：' + addComp.province + ", " + addComp.city + ", " + addComp.district)
				                    // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				                });
				                var opts = {
				                    width: 200,     // 信息窗口宽度
				                    height: 150,     // 信息窗口高度
				                    title: e.point.equip_type, // 信息窗口标题
				                    enableMessage: true//设置允许信息窗发送短息
				                };
				                console.log(e.point)
				                console.log(e.point.equip_location)
				                var content = '<p>名称：' + e.point.equip_name + '</p><p class="gotoDetial" onclick="gotoManageDetial(\'' + e.point.equip_id + ' \',' + e.point.orgType + ')">IMEI：' + e.point.equip_id + '</p><p>经度：' + e.point.lng + '</p><p>纬度：' + e.point.lat + '</p><p class="area">位置：' + e.point.equip_location + '</p></br>';
				                var infowindow = new BMap.InfoWindow(content, opts);
				                map.openInfoWindow(infowindow, point);
				                // alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
				            });
				            map.addOverlay(pointCollection);  // 添加Overlay
				    //让所有点在视野范围内
				    map.setViewport(points);

			}
			//测试


			function addClickHandler(content, marker, enterNum) {
				marker.addEventListener("click", function(e) {
					openInfo(content, e, enterNum)
				});
			}

			function openInfo(content, event, orgname) {
				var p = event.target;
				var opts = {
					title: orgname, // 信息窗口标题
					enableMessage: true //设置允许信息窗发送短息
				};
				var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
				var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
				map.openInfoWindow(infoWindow, point); //开启信息窗口
			}
		</script>
	</body>

</html>