机房信息面板中添加机房地图信息

hdw

2019-01-14 e28496f652b3914e70d8a5075e4ad0ee04e2f2a5

机房信息面板中添加机房地图信息

 gx_tieta/WebRoot/ex-battinfo.jsp

@@ -137,6 +137,7 @@
        <script type="text/javascript" src="src/layui.js"></script>

        <script type="text/javascript" src="pages/js/mylayui.js"></script>

        <script type="text/javascript" src="pages/js/common.js"></script>

        <script type="text/javascript" src="pages/js/GPS.js"></script>

        <script type="text/javascript" src="pages/js/pages/homeInfo.js"></script>

        <script type="text/javascript">

            var permits;

@@ -602,20 +603,44 @@
                // 查看机房信息

                function lookHomeInfo(data) {

                    var sid = data.StationId;

                    var tabC = [

                        {

                    var lng = data.longitude;        // 经度

                    var lat = data.latitude;        // 纬度

                    var addr = data.address;        // 地址

                    var bdPoint = GPS.wgs2bd(lat, lng);        // 百度的经纬度

                    // console.log(data);

                    // 设置读取后台的数据

                    var tabC = [];

                    var isHomeMap = false;

                    // 判断经纬度是否存在

                    if(lat != 0 && lng != 0) {

                        isHomeMap = true;

                        // 添加homeMap模块

                        tabC.push({

                            type: 'homeMap'

                            ,title: '机房定位'

                            ,tshow: 'layui-this'

                            ,cshow: 'layui-show'

                            ,homeName: ''

                            ,lat: bdPoint.lat

                            ,lng: bdPoint.lon

                            ,addr: addr

                        });

                    }

					
                    // 添加基站环境短视频模块

                    tabC.push({

                            type: 'env'

                            ,title: '基站环境短视频'

                            ,tshow: ''

                            ,cshow: ''

                        }

                        ,{

                       });

                       // 添加基站环境图集模块

                       tabC.push({

                            type: 'envImg'

                            ,title: '基站环境图集'

                            ,tshow: 'layui-this'

                            ,cshow: 'layui-show'

                        }

                    ];

                        ,tshow: isHomeMap?'': 'layui-this'

                           ,cshow: isHomeMap?'': 'layui-show'

                       });

                    showHomeInfoIframe(sid, tabC);

                }

                


 gx_tieta/WebRoot/iframe/homeinfo.html

@@ -10,6 +10,10 @@
    <link rel="stylesheet" href="../css/common.css">

    <link rel="stylesheet" href="../pages/css/mylayui.css">

   <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">

    <!-- 导入百度地图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>

    <style>

        body.homeinfo-tab .layui-tab {

            margin: 0;

@@ -373,6 +377,10 @@
                            </div>

                        </div>

                    </div>

                {{# }else if(item.type=='homeMap'){ }}

                    <div class="layui-tab-item {{ item.cshow }}">

                        <div id="BMap" style="width: 100%; height: 100%;"></div>

                    </div>

                {{# } }}

            {{# }); }}

        </div>

@@ -387,7 +395,7 @@
            

            var tabTpl = $('#homeTab').html();

            var homeInfo = parent.$('#homeInfoIframeData').data('data');

            //console.log(homeInfo);

            console.log(homeInfo);

            updatehomeInfoTab(homeInfo);

            

            // 重新渲染

@@ -704,6 +712,74 @@
                

                carousel.reload(options);

            }

			
            // 机房地图模块

            var bMap = $('#BMap');

            // 判断地图容器是否存在

            if(bMap.length != 0) {

                // 创建地图

                let map = createMap();

                // 生成地图图标

                createMapPoint(map);

            }

			
            // 生成地图

            function createMap() {

                let map = new BMap.Map('BMap');

                var point = new BMap.Point(125.3192,43.8090);

                map.centerAndZoom(point, 11);    // 用城市名设置地图中心点

                map.enableScrollWheelZoom();

                map.disableDoubleClickZoom();

                // 添加地图类型控件

                map.addControl(new BMap.MapTypeControl());

                // 给地图添加工具条(地图-卫星-三维)和比例尺控件

                let bottom_left_control = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

                map.addControl(bottom_left_control);    // 添加比例尺到地图

				
                return map;

            }

			
            // 生成地图图标并移动到中心位置

            function createMapPoint(map) {

                var homeData = getTabCItem('homeMap', homeInfo.tabc);

                // 判断是否获取到了

                if(homeData.code == 1) {

                    console.log(homeData);

                    var point = new BMap.Point(homeData.data.lng, homeData.data.lat);

                    var mk = new BMap.Marker(point);

                       var label = new BMap.Label("新机房",{offset:new BMap.Size(20,-10)});

                       label.setStyle({display: 'none', padding: '4px 2px'});

                       mk.disableDragging();        // 设置不可拖动

                       map.addOverlay(mk);            // 将覆盖物添加到地图中

                       mk.setLabel(label);            // 给覆盖物添加label提示

                    map.panTo(point);        // 将地图移动到添加的点位置

                    map.setZoom(20);            // 设置地图的缩放等级

                }else {

                    layer.msg('获取机房信息失败');

                }

            }

			
            // 获取指定的tabC内容

            function getTabCItem(type, tabs) {

                let rs = {

                    code: 0

                    ,data: {}

                    ,msg: '未检测到信息'

                };

                // 遍历tabs

                for(let i=0; i<tabs.length;i++) {

                    let _tab = tabs[i];

                    if(_tab.type == type) {

                        rs.code = 1;

                        rs.data = _tab;

                        rs.msg = '获取成功' ;

                        break;

                    }

                }

				
                return rs;

            }

			
        });

    </script>

</body>