Fatal编程技术网

Twitter bootstrap bing映射引导选项卡

twitter-bootstrap

Twitter bootstrap bing映射引导选项卡,twitter-bootstrap,bing-maps,Twitter Bootstrap,Bing Maps,我正在尝试在引导选项卡中放置Bing地图。地图仅在第一个选项卡上可见。当我导航到第二个选项卡时，地图为空。目前还不清楚是什么使第二个选项卡上的地图变得模糊 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="~/lib/bootstrap/dist/css/bootstrap.css

我正在尝试在引导选项卡中放置Bing地图。地图仅在第一个选项卡上可见。当我导航到第二个选项卡时，地图为空。目前还不清楚是什么使第二个选项卡上的地图变得模糊

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <script type='text/javascript'
            src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
            async defer></script>

    <script type='text/javascript'>
    function GetMap()
    {
        var map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'key'
        });

        var map2 = new Microsoft.Maps.Map('#myMap2', {
            credentials: 'key'
        });
    }
    </script>
</head>
    <body>
        <h3>Header</h3>
        <div class="" role="tabpanel" data-example-id="togglable-tabs">
            <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                <li class="active"><a href="#android" data-toggle="tab">Android</a></li>
                <li><a href="#microsoft" data-toggle="tab">microsoft</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane in active" id="android">
                    <h3>One Map</h3>
                    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
                </div>
                <div class="tab-pane " id="microsoft">
                    <h3>Two</h3>
                    <div id="myMap2" style="position:relative;width:600px;height:400px;"></div>
                </div>
            </div>
        </div>
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>
非常感谢您的帮助。

由于CSS选项卡的工作方式，您需要在其中包含一些javascript来实现这一点。我遇到了一个类似的问题，您可以查看这里的信息，但下面是我使用的代码片段

基本上，您想要做的是，下面要做的是在您使选项卡交换时向映射添加延迟触发器。当选项卡添加可见性时，地图通常不会触发：隐藏；到元素，贴图将不会从中加载。因此，当地图窗格进入视图时，会导致地图触发调整大小。您只需将google.maps.event.triggermap“resize”替换为Bing的相应调用即可

$('#map-tab').click(function () {
    setTimeout(function() {
        google.maps.event.trigger(map, 'resize');
    }, 200);
});
这个逻辑是正确的，只需在超时时调用GetMap即可。