From a66640923f167432ee85c672cdf175e5a0bb7eba Mon Sep 17 00:00:00 2001 From: hdw <496960745@qq.com> Date: 星期一, 29 十月 2018 14:36:00 +0800 Subject: [PATCH] 返回地图的中心点 --- gx_tieta/WebRoot/index.jsp | 100 ++++++++++++++----- gx_tieta/WebRoot/js/AreaRestriction_min.js | 56 +++++++++++ gx_tieta/WebRoot/css/index_layout.css | 67 +++++++++++++ gx_tieta/WebRoot/pages/js/common.js | 15 +++ gx_tieta/WebRoot/css/common.css | 54 ++++++++++ 5 files changed, 262 insertions(+), 30 deletions(-) diff --git a/gx_tieta/WebRoot/css/common.css b/gx_tieta/WebRoot/css/common.css index 545695c..9df4432 100644 --- a/gx_tieta/WebRoot/css/common.css +++ b/gx_tieta/WebRoot/css/common.css @@ -1,3 +1,29 @@ +/* margin-left */ +.mr5 { + margin-left: 5px; +} +.mr10 { + margin-left: 10px; + margin-right: 0; +} + +/* font-color */ +.red { + color: #FF0000; +} + +/* width em */ +.w8em { + width: 8em; +} + +/* text-align */ +.alg-r { + text-align: right; +} +.alg-c { + text-align: center; +} /* side-bar-menu妯″潡 */ .whyc-sider-menu-container { overflow: hidden; @@ -122,6 +148,34 @@ border: 1px solid #ccc; } +/* whyc-tab */ +.whyc-tab-card { + +} +.whyc-tab-card .whyc-tab-title { + position: relative; + border: 1px solid #e6e6e6; + height: 40px; + background-color: #f2f2f2; +} + + +.whyc-tab-title li { + display: inline-block; + vertical-align: middle; + min-width: 65px; + text-align: center; + line-height: 40px; + padding: 0 15px; + cursor: pointer; +} +.whyc-tab-card .whyc-tab-title li.whyc-tab-this { + line-height: 41px; + background-color: #FFFFFF; +} + + + /* jquery ui style */ body .ui-front { z-index: 999999; diff --git a/gx_tieta/WebRoot/css/index_layout.css b/gx_tieta/WebRoot/css/index_layout.css index bb33e29..59f6c84 100644 --- a/gx_tieta/WebRoot/css/index_layout.css +++ b/gx_tieta/WebRoot/css/index_layout.css @@ -450,3 +450,70 @@ .item-timeout { /* color: blue !important; */ } + +.map-info-panel-left { + position: absolute; + top: 10px; + left: 10px; + z-index: 10; + background-color: #FFFFFF; + border: 1px solid #cccccc; +} +.map-info-panel-content { + position: relative; +} + +.map-info-panel-content .map-info { + padding: 0 10px; + line-height: 30px; + text-align: center; + background-color: #CDDCFA; + border-bottom: 1px solid #CCCCCC; +} +.map-info-panel-content .map-info .k-point { + font-weight: bold; +} +.map-info-btn-icon { + margin-left: 15px; + font-size: 18px; + vertical-align: middle; + cursor: pointer; +} +.map-info-btn-icon:hover { + color: #1495E7; +} + +.map-info-detail { + display: none; +} +.map-info-detail table { + width: 100%; + margin-top: 8px; + margin-bottom: 8px; +} +.map-info-detail table td { + padding: 4px 0; +} +.map-info-detail table select { + width: 96%; + height: 24px; + border: 1px solid #CCCCCC; +} +.map-info-footer { + padding: 8px 0; + border-top: 1px solid #CCCCCC; +} +.map-info-footer button { + padding:6px 20px; + border: 1px solid #c1c1c1; + background: #FFFFFF; + background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f4f4f4)); + background: -o-linear-gradient(top, #ffffff, #f4f4f4); + background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); + background: linear-gradient(top, #ffffff, #f4f4f4); + color: #555; +} +.map-info-footer button:hover { + background: #f4f4f4; + color: #555; +} \ No newline at end of file diff --git a/gx_tieta/WebRoot/index.jsp b/gx_tieta/WebRoot/index.jsp index 02a2a44..bb12f73 100644 --- a/gx_tieta/WebRoot/index.jsp +++ b/gx_tieta/WebRoot/index.jsp @@ -24,10 +24,12 @@ <title><s:text name="HomePage"></s:text></title> <meta name="renderer" content="webkit"> + <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- 瀵煎叆鐧惧害鍦板浘API --> + <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> - <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> + <script type="text/javascript" src="js/AreaRestriction_min.js"></script> <link href="css/basic.css" type="text/css" rel="stylesheet" /> <link href="css/common.css" type="text/css" rel="stylesheet" /> <link href="css/index_layout.css" type="text/css" rel="stylesheet" /> @@ -94,7 +96,6 @@ } </style> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> - <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/createTab.js"></script> @@ -108,20 +109,35 @@ <jsp:include page="nav.jsp" flush="true"/> <!--瀵艰埅缁撴潫--> <div id="content"> - <!-- <div id="mapStatusOpts" class="map-status-container"> - <div class="layui-form layui-form-pane"> - <label class="layui-form-label">鏈烘埧绫诲瀷</label> - <div class="layui-input-inline"> - <select name="warnType" id="warnType"> - <option value="0">鍏ㄩ儴</option> - <option value="1">钀藉悗</option> - <option value="2">鍛婅</option> - <option value="3">寤舵椂</option> - <option value="4">姝e父</option> - </select> + <!-- 鍦板浘鍐呭绛涢�� --> + <div class="map-info-panel-left"> + <div class="map-info-panel-content"> + <div class="map-info"> + <span>闄愬埗鏄剧ず鍖哄煙: </span><span class="k-point red" id="mapVsArea">涓浗</span> + <span class="mr5">鏈烘埧鏄剧ず绫诲瀷:</span><span class="k-point red" id="mapIconStyle">鍏ㄩ儴</span> + </div> + <div class="map-info-detail"> + <table> + <tbody> + <tr> + <td class="w8em alg-c">鏈烘埧鏄剧ず绫诲瀷:</td> + <td> + <select name="mapIconStyleSel" id="mapIconStyleSel"> + <option>鍏ㄩ儴</option> + <option>宸插畨瑁�</option> + <option>鏈畨瑁�</option> + </select> + </td> + </tr> + </tbody> + </table> + <div class="map-info-footer alg-r"> + <button type="button" class="mr10 map-panel-hide" value="纭畾" id="mapPanelEn">纭畾</button> + <button type="button" class="mr10 map-panel-hide" value="闅愯棌">闅愯棌</button> + </div> </div> </div> - </div> --> + </div> <div class="nav-map small"> <!-- 鐢垫睜鍒嗗竷鍥� --> <div class="china-map" id="map"> @@ -598,7 +614,7 @@ centerMapByPoint(map); // 鏍规嵁褰撳墠鐢ㄦ埛璁惧畾鐨勪綅缃樉绀轰腑蹇冪偣 map.enableScrollWheelZoom(); map.disableDoubleClickZoom(); - map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍� + //map.setMapStyle({style: 'grayscale'}); // 璁剧疆鍦板浘鐨勯鏍� // 娣诲姞鍦板浘绫诲瀷鎺т欢 map.addControl(new BMap.MapTypeControl()); // 缁欏湴鍥炬坊鍔犲伐鍏锋潯(鍦板浘-鍗槦-涓夌淮)鍜屾瘮渚嬪昂鎺т欢 @@ -639,6 +655,17 @@ var menu = new BMap.ContextMenu(); var txtMenuItem = [ { + text: '璁剧疆涓績鐐�', + callback: function(e) { + myConfirm.show({ + title: '璁剧疆鍦板浘榛樿鏄剧ず浣嶇疆', + content: '鏄惁纭淇敼鍦板浘榛樿涓績鍧愭爣', + enfun:updateMapCenterPoint, + enparams:[e] + }); + } + }, + { text: '鎼滅储鍦板潃', callback: function(e) { search.showSearch(); @@ -659,17 +686,13 @@ smallMap(); } }, + { - text: '璁剧疆涓績鐐�', + text: '杩斿洖涓績鐐�', callback: function(e) { - myConfirm.show({ - title: '璁剧疆鍦板浘榛樿鏄剧ず浣嶇疆', - content: '鏄惁纭淇敼鍦板浘榛樿涓績鍧愭爣', - enfun:updateMapCenterPoint, - enparams:[e] - }); + centerMapByPoint(map); } - } + }, ]; //console.info(getPermit('taskchange_edit_permit', permits)+"*******"); if(getPermit('batt_map_edit_permit', permits)) { @@ -1372,6 +1395,7 @@ }); $(window).resize(function() { + console.log(123); getMapHt(); }); // 鏀瑰彉div鐨勫ぇ灏� @@ -1609,7 +1633,7 @@ } // 鐢熸垚鍦板浘鍥炬爣 - function createMapDot(map, dotList) { + function createMapDot(map, dotList, isTop) { // 娓呯┖瑕嗙洊鐗╁拰瀵瑰簲鐨刴k鐐� mkList = []; @@ -1644,6 +1668,11 @@ //showMapPanel(target, dotList); searchPanelInfo(target); }); + + if(isTop) { + mk.setTop(true); + } + mkList.push(mk); // 鍚戝湴鍥炬坊鍔犺鐩栫墿 map.addOverlay(mk); @@ -2204,7 +2233,7 @@ data: "json="+JSON.stringify(mapPages), success: function(result) { var data = JSON.parse(result.result); - console.log(data); + //console.log(data); for(var i=0; i<data.length; i++) { var _data = data[i]; var _list = formatUpdateStation(_data); @@ -2216,12 +2245,12 @@ } } - console.log(updateStationData); - createMapDot(map, updateStationData); + //console.log(updateStationData); + createMapDot(map, updateStationData, true); // 鏇存柊鍒嗛〉淇℃伅 mapPages.pageCurr++; - if(mapPages.pageCurr>mapPages.pageNum) { + if(mapPages.pageCurr>mapPages.pageNum || updateStationData.length<mapPages.pageSize) { mapPages.pageCurr=1; mapPages.pageNew=false; } @@ -3493,7 +3522,20 @@ } }); } - + var mapViewArea = GLOBAL.BMap.mapViewArea; + // 鏄剧ず榛樿鍖哄煙-涓浗 + setMapViewArea(mapViewArea[0]); + // 璁剧疆鍦板浘鐨勫彲瑙嗗尯鍩� + function setMapViewArea(data) { + var left = new BMap.Point(data.left.lng, data.left.lat); + var right = new BMap.Point(data.right.lng, data.right.lat); + var b = new BMap.Bounds(left, right); + try { + BMapLib.AreaRestriction.setBounds(map, b); + } catch (e) { + alert(e); + } + } }); </script> </html> diff --git a/gx_tieta/WebRoot/js/AreaRestriction_min.js b/gx_tieta/WebRoot/js/AreaRestriction_min.js index d477323..ec87afd 100644 --- a/gx_tieta/WebRoot/js/AreaRestriction_min.js +++ b/gx_tieta/WebRoot/js/AreaRestriction_min.js @@ -1 +1,55 @@ -var BMapLib=window.BMapLib=BMapLib||{};(function(){var b=BMapLib.AreaRestriction=function(){};var a=false;var c=null;var d=null;b.setBounds=function(f,e){if(!f||!e||!(e instanceof BMap.Bounds)){throw"\u8bf7\u68c0\u67e5\u4f20\u5165\u53c2\u6570\u503c\u7684\u5408\u6cd5\u6027";return false}if(a){this.clearBounds()}c=f;d=e;c.addEventListener("moveend",this._mapMoveendEvent);a=true;return true};b._mapMoveendEvent=function(k){if(d.containsBounds(c.getBounds())){return}var i=c.getBounds(),h=i.getSouthWest(),g=i.getNorthEast(),m=d.getSouthWest(),j=d.getNorthEast();var l={n:0,e:0,s:0,w:0};l.n=(g.lat<j.lat)?g.lat:j.lat;l.e=(g.lng<j.lng)?g.lng:j.lng;l.s=(h.lat<m.lat)?m.lat:h.lat;l.w=(h.lng<m.lng)?m.lng:h.lng;var f=new BMap.Point(l.w+(l.e-l.w)/2,l.s+(l.n-l.s)/2);setTimeout(function(){c.panTo(f,{noAnimation:"no"})},1)};b.clearBounds=function(){if(!a){return}c.removeEventListener("moveend",this._mapMoveendEvent);a=false}})(); \ No newline at end of file +var BMapLib = window.BMapLib = BMapLib || {}; +(function() { + var b = BMapLib.AreaRestriction = function() {}; + var a = false; + var c = null; + var d = null; + b.setBounds = function(f, e) { + if (!f || !e || !(e instanceof BMap.Bounds)) { + throw "璇锋鏌ヤ紶鍏ュ弬鏁板�肩殑鍚堟硶鎬�"; + return false; + } + if (a) { + this.clearBounds(); + } + c = f; + d = e; + c.addEventListener("moveend", this._mapMoveendEvent); + a = true; + return true; + }; + b._mapMoveendEvent = function(k) { + if (d.containsBounds(c.getBounds())) { + return + } + console.log(c.getBounds()); + var i = c.getBounds(), + h = i.getSouthWest(), + g = i.getNorthEast(), + m = d.getSouthWest(), + j = d.getNorthEast(); + var l = { + n: 0, + e: 0, + s: 0, + w: 0 + }; + l.n = (g.lat < j.lat) ? g.lat : j.lat; + l.e = (g.lng < j.lng) ? g.lng : j.lng; + l.s = (h.lat < m.lat) ? m.lat : h.lat; + l.w = (h.lng < m.lng) ? m.lng : h.lng; + var f = new BMap.Point(l.w + (l.e - l.w) / 2, l.s + (l.n - l.s) / 2); + setTimeout(function() { + c.panTo(f, { + noAnimation: "no" + }); + }, 1); + }; + b.clearBounds = function() { + if (!a) { + return + } + c.removeEventListener("moveend", this._mapMoveendEvent); + a = false; + }; +})(); \ No newline at end of file diff --git a/gx_tieta/WebRoot/pages/js/common.js b/gx_tieta/WebRoot/pages/js/common.js index cfd0a9f..4e407d3 100644 --- a/gx_tieta/WebRoot/pages/js/common.js +++ b/gx_tieta/WebRoot/pages/js/common.js @@ -450,6 +450,21 @@ gl.CMD.e61850.getDischargeParm = 41; //鑾峰彇鍙傛暟 })(jQuery, window, document, GLOBAL); +// 鍦板浘淇℃伅 +;(function($, window, document, gl, undefined) { + // 瀹氫箟BMap鐨勫懡鍚嶇┖闂� + gl.namespace('BMap'); + // 鍦板浘鍙鍖哄煙瀹氫箟 + var mapViewArea = [ + {name: '涓浗',area:'涓浗' ,left: {lng:71.3822, lat:0.6212}, right: {lng: 139.526,lat:54.3093}}, + ]; + + // 灏嗗彉閲弇apView缁戝畾鍒癎LOBAL.BMap涓� + gl.BMap.mapViewArea = mapViewArea; + +})(jQuery, window, document, GLOBAL); + + // 鐢熸垚闃块噷鍥炬爣鐨勫厓绱� function create_ali_font(cla, color, data) { var i = $('<i class="icon iconfont"></i>'); -- Gitblit v1.9.1