机房搜索定位功能

hdw

2018-12-14 e5604c3b306bcc645753211debc7084a09416970

机房搜索定位功能

 gx_tieta/WebRoot/mobil/iframe/searchHome.html

@@ -74,10 +74,14 @@
            });

            

            // 点击查询获取homeInfo的值

            var homeLocation = parent.$('#homeLocation');

            $('#searchBtn').on('click', function() {

                var homeInfo = $('#searchInput').data('homeInfo');

                if(homeInfo) {

                    console.log(homeInfo);

                    // console.log(homeInfo);

                    homeLocation.data('homeInfo', homeInfo);

                    homeLocation.click();

                    parent.layer.close(index);

                }else {

                    layer.msg('请选择下方的机房');

                }


 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()) {

                    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) {