From eb5f33c8ffdb60db5613353b8dadeb81dff7f798 Mon Sep 17 00:00:00 2001 From: hdw <496960745@qq.com> Date: 星期四, 13 十二月 2018 13:18:43 +0800 Subject: [PATCH] 视频/图片机房的定位的上传 --- gx_tieta/WebRoot/mobil/map.html | 277 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 241 insertions(+), 36 deletions(-) diff --git a/gx_tieta/WebRoot/mobil/map.html b/gx_tieta/WebRoot/mobil/map.html index dae1a32..b479468 100644 --- a/gx_tieta/WebRoot/mobil/map.html +++ b/gx_tieta/WebRoot/mobil/map.html @@ -14,6 +14,40 @@ <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=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> + <style> + .map-panel-btn { + /*鍒濆鍖栨寜閽�*/ + font-size: 12px; + text-decoration: none!important; + font-family: Helvetica, Arial, sans serif; + padding: 4px 12px; + border-radius: 3px; + -moz-border-radius: 3px; + box-shadow: inset 0px 0px 2px #fff; + -o-box-shadow: inset 0px 0px 2px #fff; + -webkit-box-shadow: inset 0px 0px 2px #fff; + -moz-box-shadow: inset 0px 0px 2px #fff; + /*瀹氫箟棰滆壊鍜屾牱寮�*/ + color: #41788c; + border: 1px solid #6fb1c7; + background-image: -moz-linear-gradient(#aae5f7, #73d0f1); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7)); + background-image: -webkit-linear-gradient(#aae5f7, #73d0f1); + background-image: -o-linear-gradient(#aae5f7, #73d0f1); + text-shadow: 1px 1px 1px #bfeafb; + background-color: #73d0f1; + /* 瀹氫箟浣嶇疆 */ + margin-left: 200px; + } + .map-panel-btn:hover { + border: 1px solid #4690ad; + background-image: -moz-linear-gradient(#73d0f1, #aae5f7); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aae5f7), to(#73d0f1)); + background-image: -webkit-linear-gradient(#73d0f1, #aae5f7); + background-image: -o-linear-gradient(#73d0f1, #aae5f7); + background-color: #aae5f7; + } + </style> </head> <body class="full-height"> <div class="abs"> @@ -25,7 +59,7 @@ </div> <div class="layui-col-xs6 layui-col-md10 full-height line-height40">鏈烘埧瀹氫綅</div> <div class="layui-col-xs3 layui-col-md1 full-height line-height40 t-align-right t-align-right"> - <button class="layui-btn layui-btn-primary layui-btn-sm mrr8" id="homeInfo"><i class="fa fa fa-bars mrr4"></i>鍔熻兘</button> + <!-- <button class="layui-btn layui-btn-primary layui-btn-sm mrr8" id="homeInfo"><i class="fa fa fa-bars mrr4"></i>鍔熻兘</button> --> </div> </div> </div> @@ -42,13 +76,19 @@ </div> </div> </div> - <div id="mapLocationLogo" class="map-location-logo"></div> + <div id="mapLocationLogo" class="map-location-logo"> + <div class="map-location-logo-container default"></div> + </div> </div> </div> </div> </div> + <!-- 瀛樺偍鏈烘埧淇℃伅鍒楄〃 --> + <div id="searchHomeIframe"></div> + <!-- 瀛樺湪鏈烘埧淇℃伅 --> + <div id="homeInfoIframe"></div> <script src="js/jquery-1.8.3.js"></script> - <script src="src/layui.js"></script> + <script src="src/layui.all.js"></script> <script> // 鐧惧害鍦板浘妯″潡 var map = new BMap.Map('map'); @@ -59,44 +99,209 @@ // 缁欏湴鍥炬坊鍔犲伐鍏锋潯(鍦板浘-鍗槦-涓夌淮)鍜屾瘮渚嬪昂鎺т欢 map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); - // 娣诲姞瀹氫綅鎺т欢 - var geolocationControl = new BMap.GeolocationControl(); - map.addControl(geolocationControl); + // 娴忚鍣ㄥ畾浣嶏紙鍓嶆彁鏄湁缃戠粶鍜屽紑鍚疓PS鏉冮檺锛� + var geolocation = new BMap.Geolocation(); + + // 鐐瑰嚮瀹氫綅鎸夐挳 + $('#mapLocationLogo .map-location-logo-container').click(function() { + $(this).removeClass('default loading success').addClass('loading'); + var _this = $(this); + geolocation.getCurrentPosition(function(r){ + if(this.getStatus() == BMAP_STATUS_SUCCESS){ + delMkByLabel('鏂版満鎴�'); + _this.removeClass('default loading success').addClass('success'); + var mk = new BMap.Marker(r.point); + var label = new BMap.Label("鏂版満鎴�",{offset:new BMap.Size(20,-10)}); + label.setStyle({display: 'none', padding: '4px 2px'}); + mk.enableDragging(); // 璁剧疆鍙嫋鍔� + map.addOverlay(mk); // 灏嗚鐩栫墿娣诲姞鍒板湴鍥句腑 + mk.setLabel(label); // 缁欒鐩栫墿娣诲姞label鎻愮ず + map.panTo(r.point, 20); // 灏嗗湴鍥剧Щ鍔ㄥ埌娣诲姞鐨勭偣浣嶇疆 + map.setZoom(20); // 璁剧疆鍦板浘鐨勭缉鏀剧瓑绾� + + // 缁檓aker鐐圭粦瀹氱偣鍑讳簨浠� + mk.addEventListener('click', function(e) { + var target = e.target; + showAddMapPanel(target); + }); + }else { + layer.msg('瀹氫綅澶辫触锛岃妫�鏌PS鎴栫綉缁滐紒'); + } + }); + }); + + // 鍒犻櫎 + function delMkByLabel(str) { + var allOverlay = map.getOverlays(); + for (var i = 0; i < allOverlay.length -1; i++){ + if(allOverlay[i].getLabel) { + if(allOverlay[i].getLabel().content == str){ + map.removeOverlay(allOverlay[i]); + return false; + } + } + + } + } + + // 娣诲姞澧炲姞鏈烘埧鐨勯潰鏉� + function showAddMapPanel(target) { + var geoc = new BMap.Geocoder(); + var searchInforWin = null; + var pt = target.point; - // layui妯″潡 - layui.use(['layer'], function() { - var layer = layui.layer; // 鑾峰彇layer妯″潡 - var iframePopup; - - // 鐐瑰嚮绛涢�夊脊鍑哄唴瀹� - $('#homeInfo').click(function() { - iframePopup = layer.open({ - type: 2 - ,closeBtn: 0 - ,title: false - ,area: ['100%', '100%'] - ,full: true - ,anim: 4 - ,content: 'iframe/homeinfo.html' - }); + var opts = { + title : '璁剧疆绔欑偣浣嶇疆', //鏍囬 + width : 290, //瀹藉害 + height : 150, //楂樺害 + panel : "panel", //妫�绱㈢粨鏋滈潰鏉� + enableAutoPan : true, //鑷姩骞崇Щ + searchTypes :[ + // BMAPLIB_TAB_SEARCH, //鍛ㄨ竟妫�绱� + // BMAPLIB_TAB_TO_HERE, //鍒拌繖閲屽幓 + // BMAPLIB_TAB_FROM_HERE //浠庤繖閲屽嚭鍙� + ] + }; + geoc.getLocation(pt, function(rs){ + var addComp = rs.addressComponents; + $.ajax({ + type: "post", + url: "BattMap_informationAction!serchNotInBattMap", + async:true, + dataType:'text', + data:null, + success: function(data){ + //console.info(data); + data = eval('('+data+')'); + var model = eval('('+data.result+')'); + //console.info(model); + var options = ""; + if(model.code == 1){ + for(var i=0;i<model.data.length;i++){ + options+= '<option value="'+model.data[i].StationId+'">'+model.data[i].StationName+'</option>'; + } + }else{ + options = "<option value='0'>鏆傛棤鍙绔欑偣</option>"; + } + + var content = '<div class="add-panel">'+ + '<div style="padding: 6px 4px"><span>鍦板潃锛�</span>'+ + '<span class="addr">'+addComp.province+'-'+addComp.city+'-'+addComp.district+'-'+addComp.street+'</span></div>'+ + '<div style="padding: 6px 4px">缁忓害锛�<span class="lng">'+rs.point.lng+'</span>锛岀含搴︼細<span class="lat">'+rs.point.lat+'</span></div>'+ + '<div style="padding: 6px 4px"><span>璁剧疆绔欑偣鍚嶏細</span>'+'<select style="border: 1px solid #ccc; width: 180px">'+options+'</select></div>'+ + '<div style="padding: 6px 4px; margin-top: 20px">'+ + '<a href="javascript:showHomeInfo();" class="map-panel-btn">纭畾</a></div>' + +'</div>'; + + searchInforWin = new BMapLib.SearchInfoWindow(map, content, opts); + + searchInforWin.open(rs.point); + $('.BMapLib_sendToPhone').hide(); + } + }); + }); + } + + + // 鏄剧ず鏈烘埧璇︾粏淇℃伅 + var iframePopup; + function showHomeInfo() { + var lng = $('.add-panel .lng').text(); // 鑾峰彇缁忓害 + var lat = $('.add-panel .lat').text(); // 鑾峰彇绾害 + var addr = $('.add-panel .addr').text(); // 鑾峰彇鍦板潃 + var homeId = $('.add-panel select option:selected').val(); // 鏈烘埧Id + var homeName = $('.add-panel select option:selected').text(); // 鏈烘埧鍚嶇О + var temp = { + homeId: homeId + ,homeName: homeName + ,addr: addr + ,lng: lng + ,lat: lat + } + // 鏄剧ず鏆傛棤鍙绔欑偣 + if(homeId == 0) { + layer.msg(homeName); + return; + } + // 瀛樺偍鍊� + $('#homeInfoIframe').data('homeInfo', temp); + + iframePopup = layer.open({ + type: 2 + ,closeBtn: 0 + ,title: false + ,area: ['100%', '100%'] + ,full: true + ,anim: 4 + ,content: 'iframe/homeinfo.html' }); - - // 鎼滅储鏈烘埧鑾峰彇鐒︾偣 - $('#searchInput').on('focus', function() { - $(this).blur(); - iframePopup = layer.open({ - type: 2 - ,closeBtn: 0 - ,title: false - ,area: ['100%', '100%'] - ,full: true - ,anim: 5 - ,content: 'iframe/searchHome.html' - }); + } + + // 鐐瑰嚮绛涢�夊脊鍑哄唴瀹� + $('#homeInfo').click(function() { + iframePopup = layer.open({ + type: 2 + ,closeBtn: 0 + ,title: false + ,area: ['100%', '100%'] + ,full: true + ,anim: 4 + ,content: 'iframe/homeinfo.html' }); - }); + // 鎼滅储鏈烘埧鑾峰彇鐒︾偣 + $('#searchInput').on('focus', function() { + $(this).blur(); + iframePopup = layer.open({ + type: 2 + ,closeBtn: 0 + ,title: false + ,area: ['100%', '100%'] + ,full: true + ,anim: 5 + ,content: 'iframe/searchHome.html' + }); + }); + + // 鏌ヨ鏈烘埧 + findHome(); + function findHome() { + var tmp = { + StationName1:'', + StationName2: '', + StationName5:'' + }; + + // 鏌ヨ灏嗕俊鎭� + $.post("BattInfAction!serchStationName3","json="+JSON.stringify(tmp),function(result){ + var rs = JSON.parse(result.result); + if(rs.code==1){ + homeSource = []; + var data = rs.data; + for(var i=0; i<data.length; i++) { + var _data = data[i]; + var tmp = { + label: _data.StationName+'('+_data.StationId+')', + province: _data.StationName1, + city: _data.StationName2, + county: _data.StationName5, + home: _data.StationName, + homeid: _data.StationId + }; + + // 娣诲姞鍒拌祫婧� + homeSource.push(tmp); + } + //console.log(homeSource) + // 璁剧疆璧勬簮鍐呭 + $('#searchHomeIframe').data('homeSource', homeSource); + } + }); + + } + + //鎷︽埅瀹夊崜鍥為��鎸夐挳 history.pushState(null, null, location.href); window.addEventListener('popstate', function(event) { -- Gitblit v1.9.1