bing은 부트 스트랩 탭을 매핑합니다

부트 스트랩 탭 내에 Bing 맵을 배치하려고합니다. 지도는 첫 번째 탭에서만 볼 수 있습니다. 두 번째 탭으로 이동하면지도가 비어 있습니다. 두 번째 탭에서지도가 무엇을 가려 냈는지는 분명하지 않습니다.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>

도움을 주시면 감사하겠습니다.

출처

2017-05-22 Eric Schrama

탭 CSS가 작동하는 방식 때문에 일부 자바 스크립트를 포함시켜야합니다. 비슷한 문제가 있었는데 여기에서 정보를 검토 할 수는 있지만 사용 된 코드 스 니펫은 아래에 나와 있습니다. Previous similar question

기본적으로 수행하려는 작업과 아래에 수행 할 작업은 탭을 바꿀 때 지연 트리거를 맵에 추가하는 것입니다. 탭은 요소에 visibility: hidden;을 추가하기 때문에지도가 일반적으로 실행되지 않으며지도가로드되지 않습니다. 따라서 여기에서 일어나는 일은지도 창을 볼 때 크기가 트리거되도록지도를 만드는 것입니다. google.maps.event.trigger(map, 'resize')을 빙 (Bing)의 적절한 호출로 바꿔야합니다.

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

출처

2017-05-22 16:09:18 Ishio

이 논리는 올바르지 만 대신 타임 아웃에서 'GetMap()'을 호출하십시오. –

bing은 부트 스트랩 탭을 매핑합니다

답변

관련 문제