Question

我正在尝试将Bing地图放在bootstrap标签内。地图仅在第一个标签上可见。当我导航到第二个选项卡时，地图为空白。目前还不清楚是什么模糊了第二个标签上的地图。

<!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>

感谢任何帮助。

Answer 1

由于CSS选项卡的工作方式，您可能希望在其中包含一些javascript来实现这一目标。我有一个类似的问题，你可以查看这里的信息，但下面是我使用的代码片段。 Previous similar question

基本上你想做什么，以下是当你使标签交换时为地图添加一个延迟触发器。当标签向元素添加visibility: hidden;时，地图通常不会触发，地图也不会从中加载。所以这里发生的事情是当地图窗格进入视图时导致地图触发调整大小。您只需要使用Bing中的相应调用替换google.maps.event.trigger(map, 'resize')。

$('#map-tab').click(function () {
    setTimeout(function() {
        google.maps.event.trigger(map, 'resize');
    }, 200);
});

bing映射引导选项卡

1 个答案: