hdw
2018-12-14 e5604c3b306bcc645753211debc7084a09416970
gx_tieta/WebRoot/mobil/map.html
@@ -39,7 +39,29 @@
         /* 定义位置 */
         margin-left: 200px;
      }
      .map-panel-btn:hover {
      .map-panel-seen-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;
      }
      .map-panel-btn:hover, .map-panel-seen-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));
@@ -85,10 +107,13 @@
    </div>
    <!-- 存储机房信息列表 -->
    <div id="searchHomeIframe"></div>
    <!-- 机房定位 -->
    <div id="homeLocation"></div>
    <!-- 存在机房信息 -->
    <div id="homeInfoIframe"></div>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="src/layui.all.js"></script>
    <script src="../pages/js/GPS.js"></script>
    <script>
        //  百度地图模块
        var map = new BMap.Map('map');
@@ -116,7 +141,7 @@
                   mk.enableDragging();      // 设置可拖动
                   map.addOverlay(mk);         // 将覆盖物添加到地图中
                   mk.setLabel(label);         // 给覆盖物添加label提示
               map.panTo(r.point, 20);      // 将地图移动到添加的点位置
               map.panTo(r.point);      // 将地图移动到添加的点位置
               map.setZoom(20);         // 设置地图的缩放等级
               
               // 给maker点绑定点击事件
@@ -135,10 +160,13 @@
         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;
               if(allOverlay[i].getLabel()) {
                  if(allOverlay[i].getLabel().content == str){
                     map.removeOverlay(allOverlay[i]);
                     return false;
                  }
               }
            }
            
         }
@@ -301,6 +329,280 @@
         
      }
      
      // 显示地图图标
      var allStation = [];
      searchStation();
      function searchStation(){
         var temp = createSearchParam();
         var json = JSON.stringify(temp);
         var load = layer.load(1);
         // 查询后台
         $.ajax({
              type: "post",
              url: "BattMap_informationAction!searchUserManageStation",
              async: true,
              dataType:'text',
              data:"json="+json,
              success: function(data){
                 data = eval('('+data+')');
                 // 获取结果集
               var rs = JSON.parse(data.result);
               var list = rs.data;
               // console.log(list);
               allStation = new Array();
               if(list!=undefined && list.length>0){
                  // 遍历查询结果
                  for(var i=0;i<list.length;i++){
                     var _list = list[i];
                     allStation.push(formatAllStation(_list));
                  }
                  createMapDot(map, allStation);
                  queryInRect(map);
                  map.addEventListener("moveend", queryInRect.bind({},map));  // 拖动
                  map.addEventListener("zoomend", queryInRect.bind({},map)); // 缩放
               }
              },
              complete:function() {
                 layer.close(load);
              }
          });
      }
      //构造查询条件
      function createSearchParam(){
         var bmd = {
            adata:{
               alm_cleared_type:$('#alarm-station').length == 0?0:$('#alarm-station').is(":checked")?0:100,
               alm_id:$('#low-station').length==0?1:$('#low-station').is(":checked")?1:100,
            },
            bplan:{
               discharge_reason:$('#delayed-station').length==0?3:$('#delayed-station').is(":checked")?3:100,
            }
         };
         return bmd;
      }
      // 格式化查询结果
      function formatAllStation(list) {
         var obj = new Object();
         // GPS坐标转化为百度坐标
         var point = GPS.wgs2bd(list.latitude, list.longitude);
         // 构造结果集
         obj.lng = point.lon;
         obj.lat = point.lat;
         obj.title = list.StationName;
         obj.sId = list.StationId;
         obj.fbsId = list.FBSDeviceId;
         obj.addr = list.Address;
         obj.msg = "";
         obj.num = list.num;
         return obj;
      }
      // 生成地图图标
      function createMapDot(map, dotList) {
         // 遍历查询内容生成对应的图标
         for(var i = 0; i<dotList.length; i++) {
            var pt = new BMap.Point(dotList[i].lng, dotList[i].lat);
            var mk = new BMap.Marker(pt);   // 定义marker点
            // 向mk点添加label
            var home_name = new BMap.Label(dotList[i].title, {offset:new BMap.Size(20,-10)});
            home_name.setStyle({display: 'none', padding: '4px 2px'});   // 设置不可见
            mk.setLabel(home_name);      // 设置label
            mk.addEventListener('click', function(e) {
               var target = e.target;
               //showMapPanel(target, dotList);
               searchPanelInfo(target.point);
            });
            map.addOverlay(mk);         // 添加覆盖物
            mk.hide();
         }
      }
      // 查询机房面板信息
      function searchPanelInfo(param) {
         var point = new BMap.Point(param.lng, param.lat);
         var stationInfo = getStaionByPoint(point);
         if(!stationInfo) {
            alert('面板信息查询失败!');
            return;
         }
         var temp = {
            StationId: stationInfo.sId
         };
         // 查询面板信息
         $.ajax({
            type: 'post',
            async: true,
            url: 'BattMap_informationAction!searchUserManageStation3',
            data: 'json='+JSON.stringify(temp),
            dataType: 'json',
            success: function(result) {
               var rs = JSON.parse(result.result);
               if(rs.length != 0) {
                  var data = rs[0];
                  // console.info(data);
                  var content = '<div style="padding:6px 0; width:50%; float:left;"><span>蓄电池组告警数目:</span>'+data.code+'</div>'+
                        '<div style="padding:6px 0; width:50%; float:left;"><span>蓄电池组落后数目:</span>'+data.sum+'</div>'+
                        '<div style="clear:both"></div>'+
                        '<div style="padding: 6px 4px">经度:<span class="lng">'+data.data.longitude+'</span>,纬度:<span class="lat">'+data.data.latitude+'</span></div>'+
                        '<div style="padding:6px;"><span>地址:</span>'+data.data.Address+'</div>'+
                        '<br>'+
                        '<div class="t-align-right">'+
                           '<a href="javascript:;" class="map-panel-seen-btn mrl8">查看</a>'+
                           '<a href="javascript:;" class="map-panel-seen-btn mrl8">修改</a>'+
                           '<a href="javascript:;" class="map-panel-seen-btn mrl8">删除</a>'+
                        '</div>'+
                        '<input type="hidden" class="ipt-hide home" value="'+data.data.StationName+'">'+
                        '<input type="hidden" class="ipt-hide province" value="'+data.data.stationName1+'">'+
                        '<input type="hidden" class="ipt-hide county" value="'+data.data.stationName5+'">'+
                        '<input type="hidden" class="ipt-hide sid" value="'+data.data.StationId+'">'+
                        '<input type="hidden" class="ipt-hide city" value="'+data.data.stationName2+'">';
                  var list = {
                     title: data.data.StationName,
                     content: content
                  };
                  showMapPanelByPoint(point, list);
               }
            }
         });
      }
      // 显示地图提示面板
      function showMapPanelByPoint(point, dataList) {
         var searchInforWin = null;
         var opts = {
            title  : dataList.title+'<a href="javascript:loadToHomeInfo();" style="margin-left: 1em;text-decoration:none;cursor:not-allowed">详情>></a>',      //标题未开启
            width  : '290',             //宽度
            height : 150,              //高度
            panel  : "panel",         //检索结果面板
            enableAutoPan : true,     //自动平移
            enableSendToPhone:false,
            searchTypes   :[
               // BMAPLIB_TAB_SEARCH,   //周边检索
               // BMAPLIB_TAB_TO_HERE,  //到这里去
               // BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
         };
         searchInforWin = new BMapLib.SearchInfoWindow(map, dataList.content, opts);
         searchInforWin.open(point);
      }
      // 根据经纬度获取机房的信息
      function getStaionByPoint(point) {
         var stationInfo = false;
         // 遍历所有机房
         for(var i=0; i<allStation.length; i++) {
            var info = allStation[i];
            if(info.lng == point.lng && info.lat == point.lat) {
               stationInfo = info;
            }
         }
         return stationInfo;
      }
      // 显示区域内的图标
      function queryInRect(map) {
         var cp = map.getBounds(); // 返回map可视区域,以地理坐标表示
           var sw = cp.getSouthWest(); // 返回矩形区域的西南角
           var ne = cp.getNorthEast(); // 返回矩形区域的东北角
           var mkList = map.getOverlays();
           var zoom = map.getZoom(); //当前缩放级别
           showDotList(mkList, sw, ne, zoom);
      }
      // 获取dots的集合
      function showDotList(mkList, sw, ne, zoom) {
         var rs = [];
            swlng=sw.lng,
               swlat=sw.lat,
               nelng=ne.lng,
               nelat=ne.lat;
               var maxLng = sw.lng>ne.lng?sw.lng:ne.lng;
               var minLng = sw.lng<ne.lng?sw.lng:ne.lng;
               var maxLat = sw.lat>ne.lat?sw.lat:ne.lat;
               var minLat = sw.lat<ne.lat?sw.lat:ne.lat;
               for(var i=0; i<mkList.length; i++) {
                  var mk = mkList[i];
                  var point = mk.getPosition?mk.getPosition():null;
                  if(point) {
                     var lat = point.lat;
                     var lng = point.lng;
                     // 判断当前的maker点是否显示
                     if(lng<maxLng && lng>minLng && lat<maxLat && lat>minLat && zoom>10) {
                        // console.log(123)
                        mk.show();
                     }else {
                        mk.hide();
                     }
                  }
               }
               return rs;
      }
      // 根据后台数据显示地图的中心坐标
      centerMapByPoint(map);
      function centerMapByPoint(map) {
         // 请求后台根据数据更改地图中心坐标
         $.ajax({
              type: "post",
              url: "Positiomap_usrAction!serchByCondition",
              async:true,
              dataType:'text',
              data:null,
              success: function(rs){
                 rs = eval('('+rs+')');
                 var model =  eval('('+rs.result+')');
                 if(model.code == 1) {
                    var data = model.data[0];
                    var _point = new BMap.Point(data.map_longitude,data.map_latitude);
                    map.centerAndZoom(_point, data.map_level);   // 用城市名设置地图中心点
                 }
                }
         });
      }
      // 机房定位面板
      $('#homeLocation').on('click', function() {
         var homeInfo = $(this).data('homeInfo');
         locationByHomeName(map, homeInfo.home);
      });
      // 根据机房名称定位机房
      function locationByHomeName(map, name) {
         var mkList = map.getOverlays();
         // console.log(mkList);
         for(var i=0; i<mkList.length; i++) {
            var mk = mkList[i];
            if(mk.getLabel) {
               console.log(mk.getLabel());
            }
            var _label = mk.getLabel?mk.getLabel()?mk.getLabel().content:'':'';
            // 判断机房名称
            if(_label == name) {
               var point = mk.getPosition();
               map.panTo(point);      // 将地图移动到添加的点位置
               map.setZoom(20);         // 设置地图的缩放等级
               searchPanelInfo(point);
            }
         }
      }
        //拦截安卓回退按钮
        history.pushState(null, null, location.href);
        window.addEventListener('popstate', function(event) {