tab页显示百度地图

要看你点击时候tab是怎么呈现的了。我觉得没问题啊
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #map_tab li{float: left;height: 20px;width: 100px;cursor: pointer}
        .clicked{background-color: darkkhaki;}
        .normal{border: 1px solid red}
        #map1,#map2{border: 1px solid red }
    </style>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0E657eb1e48ab664e0e61115abeca92f"></script>
    <title>地图展示</title>
</head>
<body>
<ul id="map_tab">
    <li id="show_map1" class="clicked">
        图1
    </li>
    <li id="show_map2" class="normal">
        图2
    </li>
    <li id="show_map3" class="normal">
        图3
    </li>
</ul>
<div style="clear: both"></div>
<div id="map1" style="height: 500px;width: 500px" ></div>
<div id="map2" style="height: 500px;width: 500px;display:none" ></div>
<div id="map3" style="height: 500px;width: 500px;display:none" ></div>
</body>
</html>
<script type="text/javascript">
    $("#map_tab li").bind("click",function(e){        if($(this).hasClass("normal")){
            $(this).addClass("clicked").removeClass("normal");
            $("#"+$(this).attr("id").split("_")[1]).slideDown();
            $(this).siblings().each(function(){
                $(this).removeClass("clicked").addClass("normal");
                $("#"+$(this).attr("id").split("_")[1]).hide();
            })
        }
    })
    // 百度地图API功能
    var map = new BMap.Map("map1");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("北京");          // 设置地图显示的城市此项是必须设置的
</script><script type="text/javascript">
    // 百度地图API功能
    var map2 = new BMap.Map("map2");
    var point = new BMap.Point(116.404, 39.915);
    map2.centerAndZoom(point, 15);
    // 编写自定义函数,创建标注
    function addMarker(point){
        var er = new BMap.Marker(point);
        map2.addOverlay(er);
    }
    // 随机向地图添加25个标注
    var bounds = map2.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < 25; i ++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        addMarker(point);
    }
</script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("map3");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 4);
    map.enableScrollWheelZoom();    var MAX = 10;
    var ers = [];
    var pt = null;
    var i = 0;
    for (; i < MAX; i++) {
        pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
        ers.push(new BMap.Marker(pt));
    }
    //最简单的用法，生成一个er数组，然后调用erClusterer类即可。
    var erClusterer = new BMapLib.MarkerClusterer(map, {ers:ers});
</script>
不知道是什么原因，但是已经解决了，方法是地图固定不变，tab页改变的只是左半边的内容

调试易

tab页显示百度地图

解决方案 »