부트 스트랩 탭이 망가져 있습니다. Google지도

부트 스트랩 탭 안에있는지도가 있습니다. 내가 처음으로 탭을 방문 할 때 나는 그 탭부트 스트랩 탭이 망가져 있습니다. Google지도

$('.locations').click(function(){ 
    setTimeout(initMap(),1500); 
});

Heres는 init 함수

function initMap() { 

    var myLatlng = new google.maps.LatLng(10.0,5.0); 

    var myOptions = { 
     zoom: 2, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 
     google.maps.event.addListener(map, 'click', function(event) { 

    }); 

    }

지도로드 미세에 갈 때 나는지도를 시작합니다. 하지만 다른 탭을 클릭하면 다시 돌아옵니다. 단지 빈 회색 화면이 표시됩니다 (여전히 Google 로고가 표시됩니다.)

Ive는 과거에 이러한 일이 발생했지만 일반적으로 완전히 사라지거나 크기가 조정되어 다시 조정해야합니다. 그러나 이번에는지도가 완전히 사라지지 않은 것 같습니다.

저기 회색입니다. 마치 거의 멀리있는 곳을 확대 한 것처럼, 나는 그것을 어둡게 할 수 없습니다. 탭을 다시 클릭 할 때 처음부터 다시 초기화하거나 돌아 오게하려면 어떻게해야합니까?

지금 당장 탭을 클릭 할 때마다 init 함수가 실행됩니다. 내가 그렇게하면 그렇게하지 못하고 회색 스크린이 나옵니다. 초기화 후에 생각하면 괜찮을까요 ??? 나는 그것을 얻지 않는다. 당신이 클릭에 즉시 initMap()를 호출

현재

setTimeout(initMap,1500);

및 시간 제한은 전혀 사용되지 않는 :

출처

2016-08-21 KyleK

이는 레일 애플 리케이션인가? 터보 링크를 사용하고 있습니까? – nathanallen

스트레이트 HTML이없고 백엔드가 없음 – KyleK

지정된 지연 후 Google Maps API가로드된다는 보장이 없으므로 setTimeout Google지도 초기화 기능을 없애는 것이 좋습니다. Google지도 API는 Google지도를로드할지 여부를 제어하는 자체 방식을 제공합니다. 다음 예에서 :

google.maps.event.addDomListener(window, 'load', initialize);

페이지로드가 완료되면 Google지도가 초기화됩니다.

다음은 부트 스탭 탭에서 맵을 초기화하는 방법을 보여주는 작동 예제입니다.

예

function initMap() { 
 
    var myLatlng = new google.maps.LatLng(10.0, 5.0); 
 

 
    var myOptions = { 
 
    zoom: 2, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    
 
    //google.maps.event.trigger(map, 'resize'); 
 
} 
 

 

 
$(function(){ 
 

 

 
    $("a[href='#locations']").on('shown.bs.tab', function(e) { 
 
     initMap(); 
 
    }); 
 

 

 
});

#map { 
 
     height: 480px; 
 
     width: 640px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js"></script> 
 

 

 
<div> 
 

 

 
<ul id="myTab" class="nav nav-tabs"> 
 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
 
    <li class=""><a href="#locations" data-toggle="tab">Locations</a></li> 
 
</ul> 
 
<div id="myTabContent" class="tab-content"> 
 
    <div class="tab-pane fade active in" id="home"> 
 
    HOME 
 
    </div> 
 
    <div class="tab-pane fade" id="locations"> 
 
    <div id="map"></div> 
 
    </div> 
 
</div>

출처

2016-08-21 08:28:52

왜이 간단한 변화가 일어 났는지 설명해 주시겠습니까? $ (". locationsTab"). (function() {initMap();}); ('a [href ='# locations '] "). ('shown.bs.tab ', function() {initMap();}; 지도가 나타 납니까 ?? 보이는 무엇이 .bs.tab하고 있니? 내 무지를 용서해. – KyleK

콜백 그래서 등과 같은 initMap 기능을 전달하기 위해 시간 제한을 수정 .

출처

2016-08-21 03:35:58 nathanallen

부트 스트랩 탭이 망가져 있습니다. Google지도

답변

관련 문제