自定义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();
         }