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

hdw

2019-01-14 e28496f652b3914e70d8a5075e4ad0ee04e2f2a5

 gx_tieta/WebRoot/iframe/homeinfo.html

@@ -9,7 +9,11 @@
    <link rel="stylesheet" href="../src/css/layui.css">

    <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">

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