用选项卡 切换掉隐藏的百度地图 百度地图不显示

把加载地图的程序封装成一个方法，当打开指定选项卡后，执行这个方法，当然，最好在容器上设置一个属性值，执行方法的时候，查找这个属性值是否存在，如果不存在，则加载地图并给容器添加这个属性；如果存在，则表示己加载过地图，直接return,不再重新加载地图。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slide</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=6066cf2819dbd803b5a1799007d7e3e0 "></script>
    <script type="text/javascript"> 
    function drawMap() {
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    var er = new BMap.Marker(point);  // 创建标注
    map.centerAndZoom(point, 15);
    map.addOverlay(er);              // 将标注添加到地图中
    er.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    }
    $(document).ready(function(){
    var $div_li = $("div.div_head ul li");
    $div_li.click(function(){
    var index =  $div_li.index(this);
    var curr = $div_li.filter('.active');
    var currIndex = $div_li.index(curr);
    if(index != currIndex) {
    curr.removeClass('active');
    $("div.div_con").eq(currIndex).hide();
    $(this).addClass("active");  
    $("div.div_con").eq(index).show();
    if(index == 1) {
    drawMap();
    } else {
    $('#allmap').empty();
    }
    } 
    }).hover(function(){
    $(this).addClass("hover");
    },function(){
    $(this).removeClass("hover");
    });
    });
    </script>   
    <style type="text/css"> 
    *{
    margin:0;
    padding:0;
    }
    li{
    list-style:none;
    }
    .div{
    width:735px;
    float:left;
    border:1px solid #DCDCDC;
    }
    .div_head{
    width:735px;
    float:left;
    }
    .div_head li{
    width:120px;
    height:35px;
    background:#CCC;
    float:left;
    cursor:pointer;
    }
    .div_head .active{
    background:#00BCF3;
    }
    .div_content,.div_con{
    width:735px;
    float:left;
    }
    .div_con{
    display:none;
    }
    </style>
         
    <body>
    <div class="div">
     <div class="div_head">
      <ul>
       <li class="active">数字</li>
       <li>地图</li>
      </ul>
     </div>
     <div class="div_content">
      <div class="div_con" style="display:block">11111111</div>
      <div class="div_con">
         <div style="width:735px;height:415px;overflow:hidden;"id="allmap"></div>
      </div>
     </div>
    </div>
    </body>
    </html>
      

  2.   

    赞一个，不过说下思路吧，就是在地图显示之前，必须让显示地图的那个层从隐藏切换到显示后再加载百度地图的方法，因为加载百度地图跟显示地图层是个链式操作。可以这样试一下，在先加载地图，在让地图显示的层变成block，就知道为什么要让加载底地图层在显示地图层后执行了。
      

  3.   

    function drawMap() {
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    var er = new BMap.Marker(point); 
    map.centerAndZoom(point, 15); 
    map.addOverlay(er);
    }
    $(document).ready(function(){
    var $div_li = $("div.div_head ul li");
    $div_li.click(function(){
    $(this).addClass("active")            
    .siblings().removeClass("active"); 
    var index =  $div_li.index(this);  
    $("div.div_content > div")      
    .eq(index).show()   
    .siblings().hide(); 
    drawMap();
    }).hover(function(){
    $(this).addClass("hover");
    },function(){
    $(this).removeClass("hover");
    })
    });  在你原有的基础上加上这个