自定义tab在地图进行分页显示

 @{

     ViewBag.Title = "GIS地图";

     Layout = null;

 }

 @model HFSoft.Plat.UIWeb.Models.MapShowDataVO

 <style>

     body, html, #allmap { width: %;height: %;overflow: hidden;margin: ;}

     table {width: %;border-collapse: collapse; border: 1px #b8b8bf solid; }

     table tr td{ border: 1px #b8b8bf solid;height:22px;}

     table tr th{ border: 1px #b8b8bf solid; height:22px;line-height:22px;text-align:center;font-weight:normal;}

     .tabPanel {width:480px;height:280px;}

     .tabPanel ul {height: 30px;border-bottom: 1px solid #aaa;}

     .tabPanel ul li {list-style-type:none;float: left;margin:  2px  ;border: 1px solid #aaa;height: 29px;line-height: 30px;width:80px;text-align: center;cursor:pointer;

             text-shadow:  1px  #fff;border-radius: 4px 4px  ;box-shadow: inset  1px  rgba(, , , 0.5);background: #ddd;background: -moz-linear-gradient(top, #eee, #ddd);

             background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));

         }

     .tabPanel .hit {border-bottom: 1px solid #fff;cursor: pointer;color: black;text-shadow:  1px  #fff;

         background: #fff;

         background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));

         background: -moz-linear-gradient(top, #e1e1e1, #fff);

     }

     .pane {border: 0px solid #aaa;border-top: ;min-height: 100px; background-color: #fff;display: none;}

     .pane p {padding:0px;}

 </style>

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=@(Model.MapBaseInfoItem.ApiAk)"></script>

 <div class="easyui-layout" style="width: 100%; height: 100%;">

     <div id="allmap" style="fit:fill"></div>

 </div>

     <script type="text/javascript">

         var v_ZoomLevel = "@(Model.MapBaseInfoItem.ZoomLevel.ToString())";

         var v_CityName = "@(Model.MapBaseInfoItem.CityName)";

         var v_Lng = "@(Model.MapBaseInfoItem.Longitude)";

         var v_Lat = "@(Model.MapBaseInfoItem.Latitude)";

         var v_StationID = "@ViewBag.StationID";

         // 百度地图API功能

         var map = new BMap.Map("allmap");//  创建Map实例

         map.centerAndZoom(new BMap.Point(v_Lng, v_Lat), v_ZoomLevel);  // 初始化地图,设置中心点坐标和地图级别  // 初始化地图,设置中心点坐标和地图级别

         var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件

         map.addControl(top_left_navigation);

         map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

         map.setCurrentCity(v_CityName);          // 设置地图显示的城市 此项是必须设置的

         map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

         //从后台将要显示的数据变到JSON变量中

         var viewMapModel = {

             id: ,

             StationData: [

                  @if (Model != null)

                 {

                     var List = Model.StationList;

                     for (int i = ; i < List.Count; i++)

                     {

                          var item = List[i];

                         if (i != List.Count - )

                         {

                             @:{ StationID: '@item.StationID', StationName: '@item.StationName', Longitude: '@item.Longitude', Latitude: '@item.Latitude', ReservoirName: '@item.ReservoirName', LinkMan: '@item.Linkman', MobilePhone: '@item.MobilePhone', Addresses: '@item.Addresses', Remark: '@item.Remark' },

                         }

                         else

                         {

                             @:{ StationID: '@item.StationID', StationName: '@item.StationName', Longitude: '@item.Longitude', Latitude: '@item.Latitude', ReservoirName: '@item.ReservoirName', LinkMan: '@item.Linkman', MobilePhone: '@item.MobilePhone', Addresses: '@item.Addresses', Remark: '@item.Remark' }

                         }

                     }

                 }

             ],

             GateData: [

                 @if (Model != null)

                 {

                     var GateList = Model.GateList;

                     for (int i = ; i < GateList.Count; i++)

                     {

                         var item = GateList[i];

                         if (i != GateList.Count - )

                         {

                              @:{},

                         }

                         else

                         {

                              @:{}

                         }

                     }

                 }

             ]

         };

         var markers = [];

         var stationItem = null;

         $(document).ready(function () {

             pointMapSite();

             if (markers.length > ) {

                 for (var j = ; j < markers.length; j++) {

                     showInfo(markers[j], stationItem);

                     break;

                 }

             }

         });

         function pointMapSite() {

             if (viewMapModel != null && viewMapModel.StationData.length > ) {

                 for (var i = ; i < viewMapModel.StationData.length; i++) {

                     var stationid = viewMapModel.StationData[i].StationID;

                     var stationname = viewMapModel.StationData[i].StationName;

                     var Longitude = viewMapModel.StationData[i].Longitude;

                     var Latitude = viewMapModel.StationData[i].Latitude;

                     var mkr = new BMap.Marker(new BMap.Point(Longitude, Latitude));

                     map.addOverlay(mkr);

                     if (v_StationID == stationid) {

                         markers.push(mkr);

                         stationItem = viewMapModel.StationData[i];

                     }

                     //给标注点添加点击事件。使用立即执行函数和闭包

                     (function () {

                         var StationModel = viewMapModel.StationData[i];

                         mkr.addEventListener("click", function () {

                             showInfo(this, StationModel);

                         });

                     })();

                 }

             }

         }

         function showInfo(thisMaker, item) {

             var sContent = '<div class="tabPanel">'

                              + '<ul>'

                              + '<li id="tab1" class="hit" onclick=\'javascript:showTab(1);\'></li>'

                              + '<li id="tab2" onclick=\'javascript:showTab(2);\'></li>'

                              + '<li id="tab3" onclick=\'javascript:showTab(3);\'></li>'

                              + '</ul>'

                              + '<div class="panes">'

                              + '<div class="pane" style="display:block;"><p>'

                              + '<table>'

                              + '<tr>'

                              + '<td style="text-align:right;padding:5px;width:80px;">：</td>'

                              + '<td>' + item.StationName + '</td>'

                              + '<td rowspan="5" style="width:100px;">'

                              + '<img src="/Content/images/noimage.png" style="width:160px;height:160px;" />'

                              + '</td>'

                              + '</tr>'

                              + '<tr>'

                              + '<td style="text-align:right;padding:5px;">：</td>'

                              + '<td>' + item.ReservoirName + '</td>'

                              + '</tr>'

                              + '<tr> '

                              + '<td style="text-align:right;padding:5px;">：</td>'

                              + '<td>' + item.LinkMan + '</td>'

                              + '</tr>'

                              + '<tr>'

                              + '<td style="text-align:right;padding:5px;">：</td>'

                              + '<td>' + item.MobilePhone + '</td>'

                              + '</tr> '

                              + '<tr>'

                              + '<td style="text-align:right;padding:5px;">：</td>'

                              + '<td>' + item.Addresses + '</td> '

                              + '</tr>'

                              + '<tr>'

                              + '<td style="text-align:right;padding:5px;">：</td>'

                              + '<td colspan="2">' + item.Remark + '</td>'

                              + '</tr>'

                              + '</table>'

                              + '</p></div>'

                              + '<div class="pane"><p>2</p></div>'

                              + '<div class="pane"><p>3</p></div>'

                              + '</div>'

                              + '</div>';

             var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

             thisMaker.openInfoWindow(infoWindow);   //图片加载完毕重绘infowindow

         }

         function showTab(id) {

             $('#tab' + id).addClass('hit').siblings().removeClass('hit');

             $('.panes>div:eq(' + (id - ) + ')').show().siblings().hide();

         }
巴特西

自定义tab在地图进行分页显示

最新文章

热门文章
